NATION

PASSWORD

Proposed additions to ns.embed CSS

Bug reports, general help, ideas for improvements, and questions about how things are meant to work.
User avatar
Caelapes
Ambassador
 
Posts: 1543
Founded: Apr 30, 2007
Ex-Nation

Proposed additions to ns.embed CSS

Postby Caelapes » Fri Apr 21, 2017 6:30 pm

Currently, with the large default text size for headers on NationStates, login verification codes are cut off on mobile in portrait orientation when embedded in external webpages:

Image

while it does work in landscape orientation, this is not intuitive and can frustrate users:

Image

(the login codes are site-specific and have already been passed to the API, making them dead codes)

I'm proposing that the following be added to the ns.embed CSS to make it more responsive when accessed on mobile devices. The code within the media query is taken from the mobile ns.m CSS:

Code: Select all
@media screen and (max-width:767px) {
    h1 {
        text-shadow: none;
        font-size: 2em;
    }
    h2 {
        font-size: 1.6em;
    }
    #proof_of_login_checksum {
        word-break: break-all;
    }
    .button {
        margin: 6px 12px 6px 0;
        padding: 4px 8px;
    }
}


This change in text size should make login codes fit within a mobile portrait window. The "word-break" declaration in particular makes it possible for the browser to break the verification code between any two letters, not just at hyphens (which are not always present).
Last edited by Caelapes on Sun Apr 30, 2017 6:09 am, edited 2 times in total.
    
The Rose Commune of Caelapes
Ego vero custos fratris mei sum.
aka Misley

User avatar
Caelapes
Ambassador
 
Posts: 1543
Founded: Apr 30, 2007
Ex-Nation

Postby Caelapes » Tue Apr 25, 2017 3:58 pm

Been a few days without comment and it's fallen off the front page, so I'm towin' this back up.
    
The Rose Commune of Caelapes
Ego vero custos fratris mei sum.
aka Misley

User avatar
[violet]
Executive Director
 
Posts: 16217
Founded: Antiquity

Postby [violet] » Tue Apr 25, 2017 10:50 pm

It's curious that it's so large on your screenshot. It doesn't look anything like that to me. Can you provide a sample URL and device details?

User avatar
Caelapes
Ambassador
 
Posts: 1543
Founded: Apr 30, 2007
Ex-Nation

Postby Caelapes » Wed Apr 26, 2017 4:06 am

[violet] wrote:It's curious that it's so large on your screenshot. It doesn't look anything like that to me. Can you provide a sample URL and device details?

That's what it looks like in the embed at https://theredand.black/forums/register/

I'm on an iPhone 7 running iOS 10. The page looks the same in Safari and Chrome for me. It appears properly in desktop Chrome using Developer Tools to emulate a mobile device, but it does not work properly on an actual mobile device.

Edit: did some poking around and apparently iOS scales the width of an iframe to 100% of the content size. With the CSS above, the content should be appropriately small enough to fit in the window. Although maybe it'd be preferable to have the code above as the default CSS and change it to min-width with the larger text sizes, to default to a mobile screen and then make it larger if on desktop?
Last edited by Caelapes on Wed Apr 26, 2017 4:59 am, edited 1 time in total.
    
The Rose Commune of Caelapes
Ego vero custos fratris mei sum.
aka Misley

User avatar
Caelapes
Ambassador
 
Posts: 1543
Founded: Apr 30, 2007
Ex-Nation

Postby Caelapes » Sun Apr 30, 2017 6:11 am

Towing this back up again.
    
The Rose Commune of Caelapes
Ego vero custos fratris mei sum.
aka Misley

User avatar
Caelapes
Ambassador
 
Posts: 1543
Founded: Apr 30, 2007
Ex-Nation

Postby Caelapes » Sun May 07, 2017 4:11 pm

Any update on the likelihood of this being added?
    
The Rose Commune of Caelapes
Ego vero custos fratris mei sum.
aka Misley

User avatar
[violet]
Executive Director
 
Posts: 16217
Founded: Antiquity

Postby [violet] » Wed May 10, 2017 11:08 pm

I haven't altered the CSS, but I have stuck the code in a box and added a "Copy to clipboard" button. Does that address the issue?

User avatar
Caelapes
Ambassador
 
Posts: 1543
Founded: Apr 30, 2007
Ex-Nation

Postby Caelapes » Thu May 11, 2017 6:04 am

[violet] wrote:I haven't altered the CSS, but I have stuck the code in a box and added a "Copy to clipboard" button. Does that address the issue?

Yes! It no longer tries to render past the screen, at least on iOS. I haven't tried on Android but imagine it works fine there, too.

Thank you!
    
The Rose Commune of Caelapes
Ego vero custos fratris mei sum.
aka Misley


Advertisement

Remove ads

Return to Technical

Who is online

Users browsing this forum: Alliestrum, Improper Classifications, LeasI, Tape, Tungstan

Advertisement

Remove ads