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

Assigned To

Authored By

	ovasileva
	Apr 27 2022, 3:35 PM

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

QA Results - Prod

AC	Status	Details
1	✅	T307004#7920934

Details

	Subject	Repo	Branch	Lines +/-
	Adjust table of contents margins at 1000-1200 breakpoint	mediawiki/skins/Vector	wmf/1.39.0-wmf.10	+53 -24
	Adjust table of contents margins at 1000-1200 breakpoint	mediawiki/skins/Vector	master	+53 -24

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T273473 [Epic] Improve the table of contents
Resolved	Jdlrobson	T309972 [Goal] prepare desktop improvements project for further deployment
Resolved	ovasileva	T306660 [Goal] Table of contents on narrow screens in vector-2022
Resolved	ovasileva	T307004 Fix spacing/margins for screens between 1000 and 1200 px

Event Timeline

ovasileva triaged this task as High priority.Apr 27 2022, 3:35 PM

ovasileva created this task.

• alexhollender_WMF mentioned this in T306660: [Goal] Table of contents on narrow screens in vector-2022.Apr 27 2022, 9:10 PM

@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

@alexhollender_WMF - looks good to me

ovasileva removed • alexhollender_WMF as the assignee of this task.Apr 28 2022, 8:45 AM

ovasileva updated the task description. (Show Details)

LGoto moved this task from Incoming to Table of Contents on the Desktop Improvements (Vector 2022) board.Apr 28 2022, 5:27 PM

LGoto set the point value for this task to 3.

LGoto moved this task from Needs Analysis to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson claimed this task.Apr 28 2022, 6:05 PM

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

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

gerritbot added a project: Patch-For-Review.Apr 28 2022, 6:26 PM

Jdlrobson moved this task from Doing to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 28 2022, 7:01 PM

@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?

In T307004#7889099, @Jdlrobson wrote:

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/

You can try out the new changes on https://patchdemo.wmflabs.org/wikis/e7e04aa823/wiki/Polar_bear?useskin=vector-2022&tableofcontents=1

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

increase padding-right on .sidebar-toc from 8px to 12px

before	after

decrease margin-left on .mw-content-container even more, from 254px to 234px

before	after

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

@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)

Jdlrobson removed Jdlrobson as the assignee of this task.May 2 2022, 8:45 PM

Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

bwang claimed this task.May 2 2022, 9:11 PM

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 ?

• alexhollender_WMF updated the task description. (Show Details)May 3 2022, 5:33 PM

• alexhollender_WMF updated the task description. (Show Details)

• alexhollender_WMF updated the task description. (Show Details)May 3 2022, 5:35 PM

@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)

• alexhollender_WMF updated the task description. (Show Details)May 3 2022, 5:41 PM

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 removed bwang as the assignee of this task.May 4 2022, 3:08 AM

Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson added a subscriber: bwang.

bwang claimed this task.May 4 2022, 4:29 PM

Jdlrobson moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.May 4 2022, 4:45 PM

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

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.12; 2022-05-16).May 4 2022, 5:00 PM

Maintenance_bot removed a project: Patch-For-Review.May 4 2022, 5:31 PM

tested on https://patchdemo.wmflabs.org/wikis/66a7113371/wiki/Paris?useskin=vector-2022&tableofcontents=1

looks great to me

below 1000px	1000px–1200px	above 1200px

ovasileva moved this task from Ready for Signoff to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.May 5 2022, 5:03 PM

ovasileva reassigned this task from ovasileva to Edtadros.May 5 2022, 5:05 PM

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

gerritbot added a project: Patch-For-Review.May 9 2022, 5:32 PM

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.10; 2022-05-02); removed MW-1.39-notes (1.39.0-wmf.12; 2022-05-16).May 9 2022, 9:00 PM

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)

Maintenance_bot removed a project: Patch-For-Review.May 9 2022, 9:30 PM

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

Edtadros updated the task description. (Show Details)May 11 2022, 1:53 PM

Jdlrobson merged a task: T307829: The left margin is different when the TOC is on and off.May 11 2022, 5:41 PM

Jdlrobson added a subscriber: Bluehill395.

Looking good!

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/e7e04aa823/w/~~

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/1b9249c683/w/~~

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/8825e2d534/w/~~

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/66a7113371/w/~~

	F35130380: Screen Shot 2022-05-11 at 6.48.42 AM.png
	May 11 2022, 1:49 PM

	F35130355: Screen Shot 2022-05-11 at 6.42.17 AM.png
	May 11 2022, 1:49 PM

	F35130329: Screen Shot 2022-05-11 at 6.37.15 AM.png
	May 11 2022, 1:49 PM

	F35130358: Screen Shot 2022-05-11 at 6.44.07 AM.png
	May 11 2022, 1:49 PM

	F35130333: Screen Shot 2022-05-11 at 6.38.07 AM.png
	May 11 2022, 1:49 PM

	F35130378: Screen Shot 2022-05-11 at 6.48.42 AM.png
	May 11 2022, 1:49 PM

	F35103568: Screen Shot 2022-05-04 at 3.10.59 PM.png
	May 4 2022, 7:13 PM

	F35103569: Screen Shot 2022-05-04 at 3.11.20 PM.png
	May 4 2022, 7:13 PM

Fix spacing/margins for screens between 1000 and 1200 pxClosed, ResolvedPublic3 Estimated Story PointsActions

Description

Background

Acceptance criteria

Spec

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Prod

QA Steps

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

Related Objects
Search...