Page MenuHomePhabricator

Introduce basic grid system to modern Vector
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
bwang
Mar 9 2022, 10:51 PM
Referenced Files
F35282349: image.png
Mon, Jun 27, 11:44 PM
F35282346: image.png
Mon, Jun 27, 11:44 PM
F35282343: image.png
Mon, Jun 27, 11:44 PM
F35282341: image.png
Mon, Jun 27, 11:44 PM
F35282333: image.png
Mon, Jun 27, 11:44 PM
F35039934: image.png
Apr 5 2022, 4:49 PM
F35039940: image.png
Apr 5 2022, 4:49 PM
F35039938: image.png
Apr 5 2022, 4:49 PM
Tokens
"100" token, awarded by Nux."Like" token, awarded by nray."Like" token, awarded by Jdlrobson.

Description

Background

With the upcoming changes to the main menu and article tools, modern Vector will likely need to accommodate what is essentially a responsive 3 column layout. Our current markup/CSS relies heavily on floats and margins, and it has already been difficult to maintain with different screen sizes. Moving towards a grid system would allow us to greatly simply our CSS.

An example of what Vector's grid could look like:

headerheaderheader
sidebararticle toolscolumn
sidebarcontentcolumn
sidebarcontentcolumn
sidebarcontentcolumn
footer

AC

An unmerged patch exists that does the following:

  • Vector uses a flexbox or CSS grid based grid
  • Markup is updated to reflect new grid system, this includes moving the article tools header
  • No visual change

QA

The new grid will be enabled on a patchdemo. Take screenshots for the following:

  • Test in mobile Safari
  • Test in Chrome
  • Test in Firefox
  • Test in Edge
  • Test in Opera
  • Test in IE11

Sign off steps

  • Work out next steps for making this a reality (deployment plan).
  • Review subtasks and close/untag if they are fixed/still an issue

Remaining work

To aid with testing the remaining issues, here is a list of remaining failures when running ./pixel.js reference -c 808059 && ./pixel.js test -c 808258 :

  1. Footer misaligned fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808310
  2. Hamburger misaligned, fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808271
  3. Right hand side of search is misaligned on desktop breakpoint fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808332
  4. Max-width is no longer applying fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808293
  5. On tablet breakpoint the main menu should take up the full page is fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808294
  6. Table of contents does not show on the desktop breakpoint fixed by https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/808294/
Test nameVisual diffIssue
MediaWiki_Main_Page_vector-2022_0_document_1_tablet.png
image.png (768×720 px, 54 KB)
1,2
MediaWiki_Main_Page_vector-2022_0_viewport_2_desktop.png
image.png (900×1 px, 62 KB)
1,2,3
MediaWiki_Main_Page_vector-2022_0_viewport_3_desktop-wide.png
image.png (900×1 px, 76 KB)
1,4
filename: MediaWiki_Test_vector-2022_sidebar-open_0_html_1_tablet.png
image.png (768×720 px, 71 KB)
5
MediaWiki_Test_vector-2022_search-focus_0_html_2_desktop.png
image.png (900×1 px, 149 KB)
3,6

Details

Other Assignee
Jdrewniak
ProjectBranchLines +/-Subject
mediawiki/skins/Vectormaster+1 -1
mediawiki/skins/Vectormaster+1 -3
operations/mediawiki-configmaster+4 -0
operations/mediawiki-configmaster+3 -0
mediawiki/skins/Vectormaster+3 -32
mediawiki/skins/Vectormaster+2 -6
mediawiki/skins/Vectormaster+27 -2
mediawiki/skins/Vectormaster+14 -5
mediawiki/skins/Vectormaster+16 -1
mediawiki/skins/Vectormaster+86 -2
mediawiki/skins/Vectormaster+2 -1
mediawiki/skins/Vectormaster+2 -4
mediawiki/skins/Vectormaster+4 -4
mediawiki/skins/Vectormaster+6 -11
mediawiki/skins/Vectormaster+59 -35
mediawiki/skins/Vectormaster+53 -2
mediawiki/skins/Vectormaster+52 -8
mediawiki/skins/Vectormaster+59 -56
mediawiki/skins/Vectormaster+85 -16
mediawiki/skins/Vectormaster+1 -1
Show related patches Customize query in gerrit

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@alexhollender I just saw T293443 and I'm wondering if that should be declined or incorporated into this spec. Should the footer be full width like the header or match the content?

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

[mediawiki/skins/Vector@master] [Grid preparation] Header and ArticleToolbar components

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

@alexhollender I just saw T293443 and I'm wondering if that should be declined or incorporated into this spec. Should the footer be full width like the header or match the content?

I agree with T293443 — let's make the footer full width

Change 787562 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Grid preparation] ArticleToolbar component

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

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

[mediawiki/skins/Vector@master] [WIP] Grid

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

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

[mediawiki/skins/Vector@master] [Grid preparation] Restrict certain rules to old layout

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

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

[mediawiki/skins/Vector@master] [Grid preparation] Add feature flag for grid

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

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

[mediawiki/skins/Vector@master] [Grid] Implement header with grid

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

Change 791625 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Grid preparation] Add feature flag for grid

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

Change 791626 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Grid preparation] Restrict certain rules to old layout

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

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

[mediawiki/skins/Vector@master] [Grid] Add TableOfContentsContainer

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

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

[mediawiki/skins/Vector@master] [Grid] Move header rule into search rules

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

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

[mediawiki/skins/Vector@master] [Grid] Minor HTML restructure for grid

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

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

[mediawiki/skins/Vector@master] [Grid] Remove vector-layout-legacy selector from sidebar rules

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

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

[mediawiki/skins/Vector@master] [Grid] Vector 2022 layout uses CSS grid

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

Change 777481 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] WIP: Vector 2022 uses CSS Grid

Reason:

See https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/802660

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

Change 791627 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] [Grid] Implement header with grid

Reason:

See https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/802660

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

@Jdrewniak I've amended the patch to use grid-template-areas. I started again hence the abandoned patches.

I suggest we merge these small ones first:

Then meet next week to push https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/802660 over the finish line.

Change 802659 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Grid] Remove vector-layout-legacy selector from sidebar rules

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

Change 802217 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Grid] Add TableOfContentsContainer

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

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

Change 802650 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Grid] Move header rule into search rules

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

Change 802658 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Grid] Minor HTML restructure for grid

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

Change 802660 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Grid] Vector 2022 layout uses CSS grid

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

Blocked on T310054
Once that's completely done we'll run Pixel against the new tabs position and record the changes and move this to design review.

I'll open a ticket for deploying the grid when all this is done.

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

[mediawiki/skins/Vector@master] Layout: Release CSS grid

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

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

[mediawiki/skins/Vector@master] Layout: Align content with hamburger icon

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

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

[mediawiki/skins/Vector@master] Layout: Fixes max-width in new grid layout

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

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

[mediawiki/skins/Vector@master] Layout: Grid is restricted to desktop views

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

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

[mediawiki/skins/Vector@master] Layout: Fix footer margin

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

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

[mediawiki/skins/Vector@master] Grid: Add table of contents to grid

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

Lots of small patches and more work to be done. Making this our top priority next week.

The goal is to minimize the failures when running ./pixel.js reference -c 808059 && ./pixel.js test -c 808258

Change 808271 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Layout: Align content with hamburger icon

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

Change 808334 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Grid: Add table of contents to grid

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

Change 808310 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Layout: Fix footer margin

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

Change 808293 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Layout: Use sibling selectors rather than adjacent sibling

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

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

[operations/mediawiki-config@master] Enable Vector grid on beta cluster

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

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

[mediawiki/skins/Vector@master] Layout: Fixes header margin between search and user links

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

Change 808294 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Layout: Grid columns are restricted to desktop views

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

Change 810046 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable Vector grid on beta cluster

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

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

[operations/mediawiki-config@master] Enable grid on beta cluster

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

Jdlrobson assigned this task to Jdrewniak.

Since we're ending the quarter, I've created a new ticket to capture the remaining work here:
T311793

Change 810109 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable grid on beta cluster

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

Mentioned in SAL (#wikimedia-operations) [2022-06-30T22:13:52Z] <cjming@deploy1002> Synchronized wmf-config/InitialiseSettings-labs.php: Config: [[gerrit:810109|Enable grid on beta cluster (T303484)]] (duration: 03m 43s)

Change 808332 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Layout: Fixes header margin between search and user links

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