Page MenuHomePhabricator
Create Task
Maniphest T303484

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

Assigned To
Jdrewniak
Authored By
bwang
Mar 9 2022, 10:51 PM
Tags
Referenced Files
F35282349: image.png
Jun 27 2022, 11:44 PM
F35282346: image.png
Jun 27 2022, 11:44 PM
F35282343: image.png
Jun 27 2022, 11:44 PM
F35282341: image.png
Jun 27 2022, 11:44 PM
F35282333: image.png
Jun 27 2022, 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
View All 9 Files
Subscribers
Aklapper
• alexhollender_WMF
Bebiezaza
bwang
Feldo
Izno
Jdlrobson
View All 12 Subscribers

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
Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Layout: Align table of contents correctly when sidebar closedmediawiki/skins/Vectormaster+7 -0
Layout: Fixes header margin between search and user linksmediawiki/skins/Vectormaster+1 -3
Enable grid on beta clusteroperations/mediawiki-configmaster+4 -0
Enable Vector grid on beta clusteroperations/mediawiki-configmaster+3 -0
Layout: Grid columns are restricted to desktop viewsmediawiki/skins/Vectormaster+3 -32
Layout: Use sibling selectors rather than adjacent siblingmediawiki/skins/Vectormaster+2 -6
Layout: Fix footer marginmediawiki/skins/Vectormaster+27 -2
Grid: Add table of contents to gridmediawiki/skins/Vectormaster+14 -5
Layout: Align content with hamburger iconmediawiki/skins/Vectormaster+16 -1
[Grid] Vector 2022 layout uses CSS gridmediawiki/skins/Vectormaster+86 -2
[Grid] Minor HTML restructure for gridmediawiki/skins/Vectormaster+2 -1
[Grid] Move header rule into search rulesmediawiki/skins/Vectormaster+2 -4
[Grid] Add TableOfContentsContainermediawiki/skins/Vectormaster+4 -4
[Grid] Remove vector-layout-legacy selector from sidebar rulesmediawiki/skins/Vectormaster+6 -11
[Grid preparation] Restrict certain rules to old layoutmediawiki/skins/Vectormaster+59 -35
[Grid] Implement header with gridmediawiki/skins/Vectormaster+53 -2
WIP: Vector 2022 uses CSS Gridmediawiki/skins/Vectormaster+52 -8
[Grid preparation] Add feature flag for gridmediawiki/skins/Vectormaster+59 -56
[Grid preparation] ArticleToolbar componentmediawiki/skins/Vectormaster+85 -16
Prepare for grid layoutmediawiki/skins/Vectormaster+1 -1
Show related patches Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.May 5 2022, 10:48 PM
ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.12; 2022-05-16); removed MW-1.39-notes (1.39.0-wmf.7; 2022-04-11).May 5 2022, 11:00 PM
Maintenance_bot removed a project: Patch-For-Review.May 5 2022, 11:31 PM
Jdlrobson claimed this task.May 9 2022, 5:44 PM
Jdlrobson moved this task from Doing to Blocked on Others on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.May 11 2022, 11:49 PM

Blocking this on T303549 for now.

gerritbot added a comment.May 13 2022, 3:19 PM

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

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

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

gerritbot added a project: Patch-For-Review.May 13 2022, 3:19 PM
Jdlrobson removed Jdlrobson as the assignee of this task.May 13 2022, 3:21 PM
Jdlrobson moved this task from Blocked on Others to Code Review on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.
gerritbot added a comment.May 13 2022, 3:21 PM

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

gerritbot added a comment.May 13 2022, 3:21 PM

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

gerritbot added a comment.May 13 2022, 3:22 PM

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

gerritbot added a comment.May 13 2022, 10:07 PM

Change 791625 merged by jenkins-bot:

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

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

Jdlrobson assigned this task to Jdrewniak.May 13 2022, 10:14 PM
Feldo subscribed.May 21 2022, 4:20 PM
cjming closed subtask T306353: Adjust placement of tabs for full-width pages as Resolved.May 27 2022, 7:00 PM
ovasileva removed Jdrewniak as the assignee of this task.May 31 2022, 12:56 PM
Jdrewniak claimed this task.May 31 2022, 5:10 PM
Jdlrobson claimed this task.May 31 2022, 11:05 PM
Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.
Jdlrobson updated Other Assignee, added: Jdrewniak.
gerritbot added a comment.Jun 1 2022, 6:27 PM

Change 791626 merged by jenkins-bot:

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

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.15; 2022-06-06); removed MW-1.39-notes (1.39.0-wmf.12; 2022-05-16).Jun 1 2022, 7:00 PM
gerritbot added a comment.Jun 1 2022, 11:47 PM

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

gerritbot added a comment.Jun 2 2022, 9:53 PM

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

gerritbot added a comment.Jun 2 2022, 10:49 PM

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

gerritbot added a comment.Jun 2 2022, 10:49 PM

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

gerritbot added a comment.Jun 2 2022, 10:49 PM

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

Jdlrobson removed Jdlrobson as the assignee of this task.Jun 2 2022, 10:50 PM
Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.
gerritbot added a comment.Jun 2 2022, 10:52 PM

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

gerritbot added a comment.Jun 2 2022, 10:53 PM

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

Jdlrobson assigned this task to Jdrewniak.EditedJun 2 2022, 10:53 PM

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

Jdlrobson mentioned this in T309711: Vector 2022 broken in IE11.Jun 3 2022, 8:15 PM
Jdlrobson updated the task description. (Show Details)
gerritbot added a comment.Jun 3 2022, 10:05 PM

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

gerritbot added a comment.Jun 3 2022, 11:34 PM

Change 802217 merged by jenkins-bot:

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

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

PatchDemoBot added a comment.Jun 6 2022, 2:53 PM

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

gerritbot added a comment.Jun 6 2022, 7:44 PM

Change 802650 merged by jenkins-bot:

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

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

Jdlrobson added a subtask: T309711: Vector 2022 broken in IE11.Jun 6 2022, 9:16 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subtask: T309223: #right-navigation Tab Moves to The Left, Next to #left-navigation, on browsers that do not have full Flexbox support in Vector-2022.
Jdlrobson added a subtask: T310010: Use grid to align header elements and search component.Jun 6 2022, 9:19 PM
Bebiezaza subscribed.Jun 7 2022, 2:04 PM
gerritbot added a comment.Jun 7 2022, 2:31 PM

Change 802658 merged by jenkins-bot:

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

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.16; 2022-06-13); removed MW-1.39-notes (1.39.0-wmf.15; 2022-06-06).Jun 7 2022, 3:00 PM
Jdlrobson mentioned this in T295433: Long username/language labels leads to horizontal scroll bar on meta on 1000-1200px threshold.Jun 7 2022, 10:01 PM
gerritbot added a comment.Jun 7 2022, 10:12 PM

Change 802660 merged by jenkins-bot:

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

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

Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.Jun 7 2022, 10:26 PM
Jdlrobson moved this task from Doing to Blocked on Others on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.Jun 7 2022, 10:51 PM
Jdlrobson claimed this task.Jun 7 2022, 10:57 PM

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.

Jdlrobson moved this task from Blocked on Others to Doing on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.Jun 23 2022, 6:26 PM
gerritbot added a comment.Jun 24 2022, 3:27 PM

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

gerritbot added a comment.Jun 24 2022, 4:14 PM

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

gerritbot added a comment.Jun 24 2022, 6:05 PM

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

gerritbot added a comment.Jun 24 2022, 6:05 PM

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

gerritbot added a comment.Jun 24 2022, 8:23 PM

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

gerritbot added a comment.Jun 24 2022, 11:35 PM

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

Jdlrobson removed Jdlrobson as the assignee of this task.Jun 24 2022, 11:54 PM
Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.
Jdlrobson added a comment.Jun 25 2022, 12:05 AM

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

Jdlrobson added a subtask: T311359: vector-2022: Talk/Discussion tab wraps into content area at smaller screen widths.Jun 27 2022, 2:58 PM
Jdlrobson updated the task description. (Show Details)Jun 27 2022, 11:44 PM
Jdlrobson updated the task description. (Show Details)
gerritbot added a comment.Jun 28 2022, 6:16 PM

Change 808271 merged by jenkins-bot:

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

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

gerritbot added a comment.Jun 29 2022, 3:16 PM

Change 808334 merged by jenkins-bot:

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

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

gerritbot added a comment.Jun 29 2022, 5:20 PM

Change 808310 merged by jenkins-bot:

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

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

gerritbot added a comment.Jun 30 2022, 3:10 PM

Change 808293 merged by jenkins-bot:

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

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

gerritbot added a comment.Jun 30 2022, 4:12 PM

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

gerritbot added a comment.Jun 30 2022, 8:34 PM

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

gerritbot added a comment.Jun 30 2022, 8:51 PM

Change 808294 merged by jenkins-bot:

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

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

gerritbot added a comment.Jun 30 2022, 9:01 PM

Change 810046 merged by jenkins-bot:

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

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

gerritbot added a comment.Jun 30 2022, 9:52 PM

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 closed this task as Resolved.Jun 30 2022, 10:04 PM
Jdlrobson assigned this task to Jdrewniak.
Jdlrobson mentioned this in T311793: [Layout] Ready Vector's new CSS grid layout for wider deployment.
Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

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

gerritbot added a comment.Jun 30 2022, 10:08 PM

Change 810109 merged by jenkins-bot:

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

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

Stashbot added a comment.Jun 30 2022, 10:13 PM

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)

gerritbot added a comment.Jun 30 2022, 11:40 PM

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

gerritbot added a comment.Jul 6 2022, 3:25 PM

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

[mediawiki/skins/Vector@master] Align table of contents correctly when sidebar closed

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

gerritbot added a comment.Jul 6 2022, 6:30 PM

Change 811742 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Layout: Align table of contents correctly when sidebar closed

Reason:

Chatted to Bernard and apparently this is expected visual change.

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.21; 2022-07-18); removed MW-1.39-notes (1.39.0-wmf.16; 2022-06-13).Jul 11 2022, 8:02 PM
ovasileva closed subtask T309711: Vector 2022 broken in IE11 as Resolved.Jul 12 2022, 8:47 AM
ovasileva closed subtask T309223: #right-navigation Tab Moves to The Left, Next to #left-navigation, on browsers that do not have full Flexbox support in Vector-2022 as Resolved.Aug 1 2022, 12:46 PM
PatchDemoBot added a comment.Oct 18 2022, 2:11 PM

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

https://patchdemo.wmflabs.org/wikis/beb5daaf5b/w/

Volker_E mentioned this in T395081: [SPIKE] Evaluate new Codex Grid mixins with Vector.May 22 2025, 7:14 PM
bwang closed subtask T310010: Use grid to align header elements and search component as Resolved.Aug 26 2025, 3:30 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits