[Layout] Ready Vector's new CSS grid layout for wider deployment
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Jdlrobson
	Jun 30 2022, 10:04 PM

Description

The wgVectorGrid flag implemented in T303484 enables layout in Vector via CSS grid. This has now been enabled on the beta cluster. In the initial deploy, no visual changes are expected, unless approved by @alexhollender_WMF

There are a few remaining issues that must be fixed prior to deployment

TODO

Right hand side of search is misaligned on desktop breakpoint fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808332
The alignment of the table of contents in the sidebar has regressed
Manually review failures on https://pixel.wmcloud.org/reports/desktop-dev/ (Around 12 failures are expected in the final version)

Expected visual changes

The footer will go full width (T293443)
The top of the TOC should align with the hr under the page title

QA steps

Please check the grid layout in the following browsers:

IE11
Edge (latest)
Chrome
Firefox
Opera
Safari
iPad

Please provide screenshots of how the new layout looks in these browsers.

In all browsers the interface should be usable but the screenshots should be manually reviewed as part of sign off.

Sign off steps

Move T312241 into the sprint board

Details

	Subject	Repo	Branch	Lines +/-
	Layout: Fixes table of contents alignment issues	mediawiki/skins/Vector	master	+50 -25
	Layout: Fixes content alignment issues	mediawiki/skins/Vector	master	+11 -0

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	Jdlrobson	T309972 [Goal] prepare desktop improvements project for further deployment
Resolved	ovasileva	T301780 [Epic] Visual design & layout refinements
Resolved	Jdlrobson	T311793 [Layout] Ready Vector's new CSS grid layout for wider deployment

Event Timeline

Jdlrobson created this task.Jun 30 2022, 10:04 PM

Jdlrobson mentioned this in T303484: Introduce basic grid system to modern Vector.

Jdlrobson triaged this task as High priority.Jun 30 2022, 10:30 PM

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

[mediawiki/skins/Vector@master] Layout: Fixes content alignment issues

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

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

[mediawiki/skins/Vector@master] Layout: Fixes table of contents alignment issues

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

Jdlrobson moved this task from Incoming to Layout on the Desktop Improvements (Vector 2022) board.Jul 1 2022, 3:26 PM

cjming updated the task description. (Show Details)Jul 1 2022, 4:57 PM

Change 810122 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Layout: Fixes content alignment issues

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

Bebiezaza subscribed.Jul 1 2022, 5:44 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.Jul 5 2022, 11:35 PM

Change 810123 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Layout: Fixes table of contents alignment issues

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

Maintenance_bot removed a project: Patch-For-Review.Jul 6 2022, 1:30 PM

Jdlrobson mentioned this in T312241: Deploy the new grid layout.Jul 6 2022, 4:28 PM

:info-i: Grid update! Bernard and I reviewed https://pixel.wmcloud.org/reports/desktop-development/ and we believe all the UI regressions flagged there are expected improvements. We are moving the grid into QA now so that we can look to deploy it ASAP after inspiration week. @alexhollender_WMF @Edtadros next week is inspiration week so we’d like to target deployment the week after. In this case we want QA and design review to happen in parallel. I’m going to put this in the QA column

Jdlrobson updated the task description. (Show Details)Jul 6 2022, 4:36 PM

Jdlrobson removed a subscriber: • Alex.Jul 6 2022, 4:52 PM

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.21; 2022-07-18).Jul 12 2022, 12:02 AM

Test Result - Beta

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

Test Artifact(s):

QA Steps

For the browsers below, the following criteria should be validated:

The footer will go full width (T293443)
The top of the TOC should align with the hr under the page title

AC	Browser	OS	Resolution	Full Width Footer	Comments
❌ AC1	IE11	Windows 10	1600x1080		1) No TOC 2) At 1600 width it still requires scrolling to the right. As a result the menu is off screen.
✅ AC2	Edge (latest)	Windows 11	1600x1080
✅ AC3	Chrome	Windows 11	1600x1080
✅ AC4	Firefox	Windows 11	1600x1080
✅ AC5	Opera	Windows 11	1600x1080
✅ AC6	Safari	MacOS Monterey	1600x1080
❓ AC7	iPad	iOS 15.5	Resolution: 1620x2160 px Viewport: 810 x 1010 px	The TOC covers the footer.

@Jdlrobson , the question mark on AC7 is just the first time I saw the TOC overlapping the footer. I'm not sure if this is as designed or not. I did go back and look at Safari and saw the same, so the issue isn't iPad specific, it's vertical resolution specific.

Screen Shot 2022-07-13 at 10.13.54 PM.png (1×1 px, 444 KB)

Jdlrobson mentioned this in T287609: Collapse main menu (fka sidebar) by default for logged-out people.Jul 14 2022, 4:20 PM

Jdlrobson moved this task from QA to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.

Thanks @Edtadros I'm marking T287609 as a blocker for the grid deployment to make sure the sidebar is always collapsed by default here.

Before grid

After grid (with sidebar collapsed)

{F35317201}

Screen Shot 2022-07-13 at 4.27.01 PM.png (1×1 px, 916 KB)

Minus the sidebar this seems an improvement, does that work for you @ovasileva . I've opened T313066 for the reamining issues.

Regarding the footer iPAd issue I hadn't seen that before. It doesn't look like a rare case. @alexhollender_WMF do you consider T313060 a blocker for deploying the grid? If so, I suggest reverting and reopening T293443 to restore the old layout with the footer under the content for now.

Jdlrobson closed this task as Resolved.Jul 26 2022, 5:15 PM

Jdlrobson updated the task description. (Show Details)

	F35316623: Screen Shot 2022-07-13 at 10.13.54 PM.png
	Jul 14 2022, 5:20 AM

	F35316614: Screen Shot 2022-07-13 at 10.08.09 PM.png
	Jul 14 2022, 5:20 AM

	F35316610: Screen Shot 2022-07-13 at 10.06.27 PM.png
	Jul 14 2022, 5:20 AM

	F35316612: Screen Shot 2022-07-13 at 10.07.26 PM.png
	Jul 14 2022, 5:20 AM

	F35316608: Screen Shot 2022-07-13 at 10.05.35 PM.png
	Jul 14 2022, 5:20 AM

	F35316621: Screen Shot 2022-07-13 at 10.12.54 PM.png
	Jul 14 2022, 5:20 AM

	F35316619: Screen Shot 2022-07-13 at 10.12.45 PM.png
	Jul 14 2022, 5:20 AM

	Restricted File
	Jul 14 2022, 5:04 PM

[Layout] Ready Vector's new CSS grid layout for wider deploymentClosed, ResolvedPublicActions