Mobile styles

[jehlers]

Type hierarchy - HIGHEST PRIORITY

Mobile

• [ ] Anything styled like an H1 to an H3 should bump down in size to the next lowest H size. By that I mean:
  • [ ] H1s should go from 44px to 32px on mobile;
  • [ ] H2s should go from 32px to 24px; and
  • [ ] H3s should go from 24px to 19px.
  • [ ] We may also want H4s and H5s to go from 19px to 16px, but I need to see it in action first.

    Tabs and drawer - HIGHEST PRIORITY

Tablet and mobile

• [ ] Read/Write text should never change size.
• [ ] On Tablet, tabs should have 15px visual space on either side of the text and keep right aligned so it gives the way finding header plenty of space. (Shown below)
• [ ] On mobile, the way finding header and the tabs should be the same height: ~40px tall.
• [ ] Closed drawer - Can we widen this a little bit? Both for larger fingers and giving the buttons w/ text a little more space. Its 41px wide now, can we make it 58px so the text has 15px padding on each side? (If that feels like too much, maybe just up it to 50px?)

Read mode - HIGH

Tablet and mobile

• [ ] Hide all “write a comment” links that normally only show up on hover.
• [ ] Can we put them all below the section they are talking about? So if I’m commenting on Section I.B, the link shows up below the paragraph under the header and not directly under the header?
• [ ] Links should also be 15px below the paragraph above them. Right now they look more connected to the paragraph below them than the one above that they are actually connected to.
• [ ] Since there’s no such thing has hover on these devices, "write a comment" links should be normal link blue (not the lightened version they are in the sidebar).
• [ ] On mobile, next and previous links still should have a gray stroke above them (but it can be connected) and should still say “previous” and “next”
• [ ] On mobile, there should only by 30px of space above the top header on the page (under the tabs).

  Write mode - HIGH

Mobile

• [ ] Same as in read mode above, there should only by 30px of space above the top header on the page (under the tabs).
• [ ] Since we have the tabs so close, let’s hide the excerpt so that the user quickly sees “Write your response to…” at the top of the page.
• [ ] Can we put “Save response” on the right next to the upload attachment button? If not, It needs to be much closer to the attachment button. It should only be 15px below that message.

  Homepage - HIGH

Tablet

• [ ] Need 30px padding on either side of text that doesn’t have it now (looking at ~786 size browser)

Mobile Hero area

• [ ] Left align all text
• [ ] Following the type guides listed above, "Read, understand, and comment on new proposed regulations” should be 32px. AND should have a 30px margin above it.
• [ ] Margin/padding above “Comments are due…” and below “Ends September…” should match (us the spacing that is currently above “comments are due…”
• [ ] Title of the rule should be 19px
• [ ] Space above the button should match the space above EPA

“Read and write with ease"

• [ ] All headers should follow type guides above.
• [ ] Each image should have 60px of visual space above them to space the page out a little more.
• [ ] Text inside “Other ways to comment” expandable should be left aligned.
• [ ] 60px of visual space needed after “Other ways to comment” expandable before the new gray section

“Build a good comment”

• [ ] Orange caret bullets should be smaller (half the size they are now?)
• [ ] at least 30px of visual space needed under “Build a good comment:”
• [ ] Same space below the last link in the gray section as the space above “Build a good comment:”

“About this tool”

• [ ] need at least 60px space before the footer

Footer

• [ ] Top and bottom padding around logos should match (use bottom padding)

  Review page - MEDIUM

Mobile

• [ ] “This does not include your attachments” should be left aligned under the link.
• [ ] Tabs for additional information should be evenly spaced (above/below as well as left/right)
• [ ] “I read and understand” should be 16px (it shouldn’t shrink). And be aligned with the submit your comment button. “required to submit” should also be aligned like a normal bullet (Not hanging over towards the check box.)

Confirmation screen - LOW

Tablet

• [ ] The empty right sidebar should disappear so the message can take up the whole screen w/ the same 30px right margin as on the left.

Mobile

• [ ] Same as above except 15px borders on each side.
• [ ] Hide the PDF icon

  Menu icon for the global header - LOW

• [ ] It needs to be vertically centered. It looks closer to the bottom of the header than the top right now.

cc @xtine and @donjo

[xtine]

Probably can't widen the closed drawer for now -- there's some reconfiguration that might affect general eregs and might take longer than anticipated to make sure it works right.

[xtine]

Regarding the placement of the "write a comment" links, the links appear under the section because that's how it's ordered in the html. I don't think there's an easy way to change the placement without a lot of extra effort.