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

Assigned To

Authored By

	• alexhollender_WMF
	Sep 12 2022, 9:42 PM

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 arrows	TOC without arrows	Main menu

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 arrows	TOC without arrows	Main menu

QA Results - Beta

AC	Status	Details
1	✅	T317583#8371439

QA Results - Prod

AC	Status	Details
1	✅	T317583#8407689

Details

Subject	Repo	Branch	Lines +/-
Use standard utility classes for flushing icons left and right	mediawiki/skins/Vector	master	+92 -75
[WIP] Align sidebar ToC and sidebar menu to menu button.	mediawiki/skins/Vector	master	+13 -60
Align text of main menu and ToC to main menu button	mediawiki/skins/Vector	master	+14 -29
Adjust main menu & ToC margins to align text width edge of menu button	mediawiki/skins/Vector	master	+17 -31
Split MenuPortal.less into legacy and modern Vector	mediawiki/skins/Vector	master	+86 -49

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T317884 [EPIC] Vector 2022 post-deployment work
Open	ovasileva	T317632 [EPIC] Visual refinements pt2
Resolved	Jdlrobson	T319047 [Goal] Vector 2022 post-deployment work for Q2
Resolved	ovasileva	T317583 [S] [Visual refinements] Remove ToC and main menu desktop wide viewport spacing

Event Timeline

• alexhollender_WMF created this task.Sep 12 2022, 9:42 PM

• alexhollender_WMF added a parent task: T301780: [Epic] Visual design & layout refinements.

• alexhollender_WMF updated the task description. (Show Details)Sep 12 2022, 9:47 PM

bwang updated the task description. (Show Details)Sep 12 2022, 10:12 PM

Adding to board but not a blocker for deployment.

ovasileva edited parent tasks, added: T317632: [EPIC] Visual refinements pt2; removed: T301780: [Epic] Visual design & layout refinements.Sep 13 2022, 12:38 PM

• alexhollender_WMF updated the task description. (Show Details)Sep 13 2022, 4:29 PM

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

LGoto assigned this task to Jdrewniak.Sep 13 2022, 5:23 PM

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)

• alexhollender_WMF updated the task description. (Show Details)Sep 15 2022, 8:01 PM

Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-2022-23-Q2); removed Web-Team-Backlog (Kanbanana-2022-23-Q1), Desktop Improvements (Vector 2022).Sep 29 2022, 5:17 PM

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

gerritbot added a project: Patch-For-Review.Oct 4 2022, 2:07 PM

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

LGoto moved this task from Needs Analysis to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Jdlrobson added a parent task: T319047: [Goal] Vector 2022 post-deployment work for Q2.Oct 4 2022, 11:03 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

Jdrewniak moved this task from Code Review to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Oct 7 2022, 4:49 PM

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

Jdrewniak moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Oct 19 2022, 4:35 PM

LGoto reassigned this task from Jdrewniak to bwang.Oct 19 2022, 4:40 PM

LGoto added a subscriber: Jdrewniak.

bwang reassigned this task from bwang to Jdrewniak.Oct 19 2022, 4:43 PM

bwang moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

ovasileva added a project: Desktop Improvements (Vector 2022).Oct 19 2022, 4:56 PM

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 )

Jdlrobson removed Jdrewniak as the assignee of this task.Oct 24 2022, 11:20 PM

Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Jdlrobson mentioned this in T321504: [M] [Technical] Vector should consistently use mw-ui-icon-flush-left and mw-ui-icon-flush-right utility classes.

bwang claimed this task.Oct 25 2022, 5:41 PM

bwang reassigned this task from bwang to Jdrewniak.

bwang moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Oct 26 2022, 4:38 PM

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.8; 2022-10-31).Oct 27 2022, 4:00 PM

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

Jdlrobson moved this task from Doing to Design Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 1 2022, 4:25 PM

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.10; 2022-11-14); removed MW-1.40-notes (1.40.0-wmf.8; 2022-10-31).Nov 1 2022, 5:00 PM

Available for design review on beta cluster.

alignment looks good

Screen Shot 2022-11-02 at 10.18.29 AM.png (680×1 px, 579 KB)

Screen Shot 2022-11-02 at 10.18.47 AM.png (703×1 px, 706 KB)

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 arrows	TOC without arrows	Main menu

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 arrows	TOC without arrows	Main menu

Edtadros updated the task description. (Show Details)Nov 19 2022, 5:39 PM

ovasileva closed this task as Resolved.Nov 21 2022, 3:39 PM

	F35801235: Screenshot 2022-11-19 at 9.36.29 AM.png
	Nov 19 2022, 5:38 PM

	F35801233: Screenshot 2022-11-19 at 9.35.44 AM.png
	Nov 19 2022, 5:38 PM

	F35801230: Screenshot 2022-11-19 at 9.34.31 AM.png
	Nov 19 2022, 5:38 PM

	F35707141: Screenshot 2022-11-04 at 2.26.10 PM.png
	Nov 4 2022, 9:28 PM

	F35707139: Screenshot 2022-11-04 at 2.27.27 PM.png
	Nov 4 2022, 9:28 PM

	F35707137: Screenshot 2022-11-04 at 2.24.47 PM.png
	Nov 4 2022, 9:28 PM

	F35696898: Screen Shot 2022-11-02 at 10.18.47 AM.png
	Nov 2 2022, 2:20 PM

	F35696896: Screen Shot 2022-11-02 at 10.18.29 AM.png
	Nov 2 2022, 2:20 PM

[S] [Visual refinements] Remove ToC and main menu desktop wide viewport spacingClosed, ResolvedPublic1 Estimated Story PointsActions

Description

Description

To-do

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

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

Related Objects
Search...