Page MenuHomePhabricator

[S] [Visual refinements] Remove ToC and main menu desktop wide viewport spacing
Closed, ResolvedPublic1 Estimated Story Points

Description

Description

Currently the TOC arrows are aligned with the main menu icon on desktop wide viewports (above 1200px). However:

  • not all TOCs have arrows
  • the text is a more dominant element

Main menus are also aligned with the main menu icon on desktop wide viewports (above 1200px). For consistency we should also update the main menu.

current alignment
TOC with arrowsTOC without arrowsMain menu
Screen Shot 2022-09-12 at 5.45.36 PM.png (949×813 px, 85 KB)
Screen Shot 2022-09-12 at 5.45.07 PM.png (958×729 px, 55 KB)
Screen Shot 2022-09-13 at 12.35.05 PM.png (1×952 px, 284 KB)

To-do

  • On desktop wide viewports adjust the TOC so that the TOC text is aligned with the main menu icon.
  • On desktop wide viewports adjust the main menu so that the main menu is aligned with the container edge.
updated alignment
TOC with arrowsTOC without arrowsMain menu
Screen Shot 2022-09-12 at 5.44.22 PM.png (956×770 px, 75 KB)
Screen Shot 2022-09-12 at 5.44.42 PM.png (959×754 px, 59 KB)
Screen Shot 2022-09-15 at 4.01.15 PM.png (938×667 px, 283 KB)

QA Results - Beta

ACStatusDetails
1T317583#8371439

QA Results - Prod

ACStatusDetails
1T317583#8407689

Event Timeline

ovasileva triaged this task as Medium priority.Sep 13 2022, 7:38 AM

Adding to board but not a blocker for deployment.

@bwang thinking about this a little more: if we made this change, which shifts the TOC ~14/15px to the left, I think we could actually remove the special CSS that shifts the TOC (and the Main menu) closer to the edge of the browser window for 1000–1200px wide viewports, because we would be regaining that space with this change. Does that make sense to you?

bwang renamed this task from [Visual refinements] Align TOC text with container edge to [Visual refinements] Remove ToC and main menu desktop wide viewport spacing.Sep 13 2022, 5:50 PM
bwang updated the task description. (Show Details)
Jdlrobson set the point value for this task to 1.Sep 29 2022, 5:30 PM

Change 838164 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Align sidebar ToC and sidebar menu to menu button.

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

LGoto renamed this task from [Visual refinements] Remove ToC and main menu desktop wide viewport spacing to [S] [Visual refinements] Remove ToC and main menu desktop wide viewport spacing.Oct 4 2022, 5:17 PM

Change 840194 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Split MenuPortal.less into legacy and modern Vector

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

Change 840208 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Adjust sidebar margins to align menu & toc with menu button

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

Change 840194 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Split MenuPortal.less into legacy and modern Vector

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

LGoto added a subscriber: Jdrewniak.

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

[mediawiki/skins/Vector@master] Use standard utility classes for flushing icons left and right

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

@bwang says that my patch in https://gerrit.wikimedia.org/r/838926 should take care of this so I'm associating this patch with this ticket. It is currently feature flag only (?vectorvisualenhancementnext=1 )

Change 838926 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use standard utility classes for flushing icons left and right

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

Change 850290 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Align text of main menu and ToC to main menu button

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

Change 840208 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] Adjust main menu & ToC margins to align text width edge of menu button

Reason:

abandoning in favor of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/850290

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

Change 850290 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Align text of main menu and ToC to main menu button

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

Available for design review on beta cluster.

Change 838164 abandoned by Jdrewniak:

[mediawiki/skins/Vector@master] [WIP] Align sidebar ToC and sidebar menu to menu button.

Reason:

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Text in TOC and sidebar menu should align with menu icon as shown in the task description:

TOC with arrowsTOC without arrowsMain menu
Screenshot 2022-11-04 at 2.24.47 PM.png (1×1 px, 537 KB)
Screenshot 2022-11-04 at 2.27.27 PM.png (1×1 px, 497 KB)
Screenshot 2022-11-04 at 2.26.10 PM.png (1×1 px, 523 KB)
Edtadros subscribed.

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: Text in TOC and sidebar menu should align with menu icon as shown in the task description:

TOC with arrowsTOC without arrowsMain menu
Screenshot 2022-11-19 at 9.34.31 AM.png (917×1 px, 526 KB)
Screenshot 2022-11-19 at 9.35.44 AM.png (810×1 px, 467 KB)
Screenshot 2022-11-19 at 9.36.29 AM.png (914×1 px, 628 KB)