Page MenuHomePhabricator

[BUG] SVG translate could use some margins
Open, Needs TriagePublicBUG REPORT

Description

What is the problem?

Steps to reproduce problem
  1. narrow the screen

Expected behavior:
Some margins, so that stuff remains legible :)

Observed behavior:
Hard to read instructions

Environment

Operating system:
Browser:
Wiki(s):
Editor, if applicable:

Screenshots (if applicable):

Event Timeline

TheDJ created this task.Mar 14 2019, 7:44 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 14 2019, 7:44 PM
TheDJ added a comment.EditedMar 22 2019, 1:57 PM

The following fixes an overflow (margin + height: 100% on body === more than 100% viewport height.)

footer, header {
    max-width: 950px;
    padding: 3rem 1em;
    box-sizing: border-box; 
    margin: 0 auto;
}

Fix user-agent list styling

body.search aside.tutorial ol {
    padding: 0;
}

On narrow screens, make tutorial a column, reduce overlapping elements and margins/paddings

@media screen and (max-width:720px) {
    header, footer, body.search aside.tutorial, body.search main {
        padding:1rem;
        margin: 0;
    }
    header .top-row {
        flex-wrap: wrap;
    }
    body.search aside.tutorial ol {
        flex-direction: column;
        flex-wrap: wrap;
    }
    body.search aside.tutorial li {
        flex-wrap: wrap;
    }
    body.search aside.tutorial p.image {
        text-align: center;
    }
    body.search aside.tutorial p.arrow {
        flex-basis: 100%;
        flex-shrink: 0;
        text-align: center;
        transform: rotate(90deg);
        margin: 0;
    }
}

@TheDJ Looks reasonable to me. I'll defer to @Prtksxna to make the call on this, as he is the designer on this project. Thank you so much. :)

Thanks @TheDJ!

@Niharika Do we want to support mobile screen sizes for the translation page too?

Restricted Application changed the subtype of this task from "Task" to "Bug Report". · View Herald TranscriptMay 31 2019, 12:52 AM

Thanks @TheDJ!
@Niharika Do we want to support mobile screen sizes for the translation page too?

Ideally, yes, but based on how much work that creates for the team, we may or may not do it. We can talk to the team about it once we know what it will look like on mobile - iff you have time to work on that.

It doesn't seem worth fixing the search page to work on mobile if the translate page doesn't also work. But maybe we should add a small-screen-only message telling people not to try using narrow devices?

TheDJ added a comment.EditedJun 3 2019, 7:38 AM

This bunching up and margin cutting starts happening on anything under 980px wide.. And then it DOESNT compromise margin there where you really need it, the translation page...
That's not mobile device, that's a normal non-fullscreen desktop size.... It's even worse on mobile sure, but it isn't even good on a smaller screen laptop.

I see now, thanks @TheDJ! The ratio of the screenshot threw me off and I assumed it was a mobile.

On narrow screens, make tutorial a column, reduce overlapping elements and margins/paddings

Nice, this is such an elegant solution, I really like it. It would be good to start doing this once we support narrow (<720px) screens for translations too.


For now, let's fix the issues under 980px:

  • Set the header padding to 0 2rem, both on the main and the translation page.
  • Add 1.5rem of margin to the sides of body.search aside.tutorial
  • Remove the padding completely from body.translate main form