Page MenuHomePhabricator

Fix spacing/margins for screens between 1000 and 1200 px
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

Currently, the ToC appears very wide on screens between 1000 and 1200 px. We would like to reconsider the size of the margins and padding in this range in order to recover more space for the content

Acceptance criteria

  • Decrease the ToC margins for screens between 1000 and 1200 px

Spec

for screen widths below 1200px:

  • reduce padding-left and padding-right on mw-page-container from 40px to 32px
  • reduce margin-left on mw-content-container from 296px to 244px
  • reduce widths of mw-sidebar and .sidebar-toc from 244px to 220px
  • reduce margin-left on .sidebar-toc from 12px to 0px
  • increase padding-right on .sidebar-toc from 8px to 12px

updated prototype: https://di-toc-with-menu-above.web.app/Butterfly

image.png (2×2 px, 1 MB)

QA Results - Prod

ACStatusDetails
1T307004#7920934

Event Timeline

ovasileva created this task.

@ovasileva @Jdlrobson I think we can get a decent amount of space back with a few small changes...

for screen widths below 1200px:

  • reduce padding-left and padding-right on mw-page-container from 40px to 32px
  • reduce margin-left on mw-content-container from 296px to 254px
  • reduce widths of mw-sidebar and .sidebar-toc from 244px to 220px (regains 24px)
  • reduce margin-left on .sidebar-toc from 12px to 0px

updated prototype: https://di-toc-with-menu-above.web.app/Butterfly

image.png (2×2 px, 1 MB)

ovasileva updated the task description. (Show Details)

Change 787545 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Adjust table of contents margins at 1000-1200 breakpoint

https://gerrit.wikimedia.org/r/787545

@alexhollender https://jdlrobson.github.io/T305069/report/index.html
In failures I'm seeing UI changes to desktop, tablet and mobile breakpoints as expected. there is one unexpected change relating to the sticky header - I'm assuming the sticky header alignment (MediaWiki_Test_sticky_header_vector-2022_logged-in_scroll_0_viewport_3_desktop-wide.png with sticky header) should be tied to the table of contents / side bar margins? Should I make sure that doesn't change?

there is one unexpected change relating to the sticky header - I'm assuming the sticky header alignment (MediaWiki_Test_sticky_header_vector-2022_logged-in_scroll_0_viewport_3_desktop-wide.png with sticky header) should be tied to the table of contents / side bar margins? Should I make sure that doesn't change?

hmm, it's hard to tell just from the image why that change might have happened...maybe it's related to changing the padding on mw-page-container... but yea, the sticky header shouldn't change at all. I also notice that in the "test" image you referred to the borer on the bottom of the sticky header doesn't quite reach the edges, but it should.

Screen Shot 2022-04-28 at 4.17.21 PM.png (366×1 px, 184 KB)

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/e7e04aa823/w/

@Jdlrobson looking great all around. Two additional small changes, again only applying below 1200px:

  • increase padding-right on .sidebar-toc from 8px to 12px
beforeafter
Screen Shot 2022-04-29 at 2.28.47 PM.png (671×587 px, 169 KB)
Screen Shot 2022-04-29 at 2.29.05 PM.png (698×586 px, 171 KB)
  • decrease margin-left on .mw-content-container even more, from 254px to 234px
beforeafter
Screen Shot 2022-04-29 at 2.50.07 PM.png (682×610 px, 218 KB)
Screen Shot 2022-04-29 at 2.50.38 PM.png (691×593 px, 225 KB)

with those two additional changes we get a 838px for the content on a 1120px viewport which is great:

image.png (1×2 px, 877 KB)

@Jdlrobson also in case you didn't notice, i'm seeing both the sidebar toc and the inline toc in patchdemo:

Screen Shot 2022-04-29 at 3.01.27 PM.png (682×941 px, 240 KB)

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8825e2d534/w/

@alexhollender_WMF there was a little confusion in code review as the task description no longer matches the actual change. Could you please take one last look at the patch and update the description to incorporate your changes in T307004#7892369 ?

@Jdlrobson @bwang this is looking good. i've updated the task description so it's now a complete checklist of changes.

the two things that are currently not to spec are:

  • reduce widths of mw-sidebar and .sidebar-toc from 244px to 220px
    • this is currently at 182px (or 11.375em)
  • reduce margin-left on mw-content-container from 296px to 244px
    • this was correct but i've changed the spec (was previously 254px)

let me know if either of those two points in unclear. also here is a screenshot of how it should look on a 1120px wide browser, in case that's helpful for a visual check:

Screen Shot 2022-05-03 at 1.38.44 PM.png (695×1 px, 472 KB)

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/1b9249c683/w/

meeting w/ @Jdlrobson & @bwang, changes we discussed:

  • (all breakpoints) .sidebar-toc reduced padding-left from 48px to 32px
  • .mw-content-container increased margin-left from 234px to 244px

note: the chevrons are too high in the patchdemo, but we're waiting to see if that's an issue in production before fixing

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/66a7113371/w/

Jdlrobson added a subscriber: bwang.

Change 787545 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Adjust table of contents margins at 1000-1200 breakpoint

https://gerrit.wikimedia.org/r/787545

Change 790426 had a related patch set uploaded (by Clare Ming; author: Jdlrobson):

[mediawiki/skins/Vector@wmf/1.39.0-wmf.10] Adjust table of contents margins at 1000-1200 breakpoint

https://gerrit.wikimedia.org/r/790426

Change 790426 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.39.0-wmf.10] Adjust table of contents margins at 1000-1200 breakpoint

https://gerrit.wikimedia.org/r/790426

Mentioned in SAL (#wikimedia-operations) [2022-05-09T21:02:16Z] <cjming@deploy1002> Synchronized php-1.39.0-wmf.10/skins/Vector/resources: Backport: [[gerrit:790426|Adjust table of contents margins at 1000-1200 breakpoint (T307004)]] (duration: 00m 53s)

Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Decrease the ToC margins for screens between 1000 and 1200 px

reduce padding-left and padding-right on mw-page-container from 40px to 32px

Screen Shot 2022-05-11 at 6.37.15 AM.png (1×1 px, 395 KB)

reduce margin-left on mw-content-container from 296px to 244px
Screen Shot 2022-05-11 at 6.38.07 AM.png (1×1 px, 397 KB)

reduce widths of mw-sidebar and .sidebar-toc from 244px to 220px
Screen Shot 2022-05-11 at 6.42.17 AM.png (211×318 px, 23 KB)

Screen Shot 2022-05-11 at 6.44.07 AM.png (347×313 px, 32 KB)

reduce margin-left on .sidebar-toc from 12px to 0px
Screen Shot 2022-05-11 at 6.48.42 AM.png (896×1 px, 410 KB)

increase padding-right on .sidebar-toc from 8px to 12p
Screen Shot 2022-05-11 at 6.48.42 AM.png (896×1 px, 410 KB)