Page MenuHomePhabricator
Create Task
Maniphest T314579

[ToC] Content should be centered when TOC is collapsed
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To
Edtadros
Authored By
ovasileva
Aug 4 2022, 2:54 PM
Tags
Referenced Files
F35489547: Screen Shot 2022-08-25 at 11.01.04 AM.png
Aug 25 2022, 9:01 AM
F35470586: resize.gif
Aug 17 2022, 9:29 PM
F35400086: toc collapsed content centered.webm
Aug 5 2022, 2:46 PM
Subscribers
Aklapper
• alexhollender_WMF
bwang
cjming
Jdlrobson
ovasileva
vaughnwalters

Description

Description

In T307901: Add link that allows to hide/show the ToC manually on all screen sizes above 1000px we made the ToC collapsible at all widths. When the ToC is collapsed the content should be centered (at all widths).

Prototype
https://di-collapsible-menus.web.app/Flamingo

Demo

Acceptance criteria

  • when ToC is collapsed, content is centered on page (at all widths)

QA

  • QA the example in the bug report
  • Do some exploratory testing on special pages, opening and closing the sidebar and table of contents. Make sure the max-width is applying correctly. For example on Special:RecentChanges the max-width shouldn't apply and on Special:Preferences it should always apply.

Details

SubjectRepoBranchLines +/-
[ToC] Content should be centered when TOC is collapsedmediawiki/skins/Vectormaster+10 -1
Customize query in gerrit

Related Objects
Search...

Event Timeline

ovasileva created this task.Aug 4 2022, 2:54 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 4 2022, 2:54 PM
ovasileva triaged this task as High priority.Aug 4 2022, 2:54 PM
Jdlrobson moved this task from Incoming to Table of Contents on the Desktop Improvements (Vector 2022) board.Aug 4 2022, 10:22 PM
ovasileva added a comment.Aug 5 2022, 2:09 PM

When we get a fix for this, it would be great to backport it rather than waiting for the train

• alexhollender_WMF renamed this task from Content location and width look unbalanced when ToC collapsed to [ToC] Content should be centered when TOC is collapsed.Aug 5 2022, 2:46 PM
• alexhollender_WMF updated the task description. (Show Details)
ovasileva removed • alexhollender_WMF as the assignee of this task.Aug 8 2022, 11:17 AM
Jdlrobson claimed this task.Aug 8 2022, 4:16 PM
Jdlrobson added a comment.Aug 10 2022, 4:27 PM

The easiest way to do this will be to add the vector-sidebar-container-no-toc class to vector-sidebar-container whenever the move out of the sidebar button is clicked.

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 10 2022, 4:27 PM
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 11 2022, 5:17 PM
LGoto set the point value for this task to 2.
Jdlrobson mentioned this in T307901: Add link that allows to hide/show the ToC manually on all screen sizes above 1000px.Aug 12 2022, 8:11 AM
Jdlrobson mentioned this in T306660: [Goal] Table of contents on narrow screens in vector-2022.Aug 15 2022, 7:37 AM
Jdlrobson removed Jdlrobson as the assignee of this task.Aug 15 2022, 8:03 AM
Jdlrobson subscribed.
Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 15 2022, 2:42 PM
gerritbot added a comment.Aug 15 2022, 2:44 PM

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

[mediawiki/skins/Vector@master] [ToC] Content should be centered when TOC is collapsed

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

gerritbot added a project: Patch-For-Review.Aug 15 2022, 2:44 PM
cjming claimed this task.Aug 15 2022, 2:50 PM
cjming removed cjming as the assignee of this task.Aug 15 2022, 3:30 PM
cjming moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
cjming subscribed.
Jdlrobson assigned this task to bwang.Aug 15 2022, 5:13 PM
bwang reassigned this task from bwang to Jdlrobson.Aug 15 2022, 5:34 PM
bwang subscribed.
Jdlrobson reassigned this task from Jdlrobson to bwang.Aug 15 2022, 8:16 PM
Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
gerritbot added a comment.Aug 15 2022, 8:51 PM

Change 823162 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [ToC] Content should be centered when TOC is collapsed

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

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.25; 2022-08-15).Aug 15 2022, 9:00 PM
Maintenance_bot removed a project: Patch-For-Review.Aug 15 2022, 9:30 PM
Jdlrobson reassigned this task from bwang to Edtadros.Aug 15 2022, 9:43 PM
Jdlrobson mentioned this in T315261: [Visual refinement] Improve alignment of icon buttons in header, page content & stickyheader.
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
gerritbot added a comment.Aug 16 2022, 3:36 PM

Change 823213 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Follow-up: Remove 'vector-sidebar-container-no-toc' class in favor of 'vector-toc-visible' and 'vector-toc-not-visible' body classes, clean up CSS selectors and update TOC helpers in SkinVector22.php

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

gerritbot added a project: Patch-For-Review.Aug 16 2022, 3:36 PM
Jdrewniak mentioned this in T315460: [Regression] Pages which are supposed to have full-width no longer have full-width layout.Aug 17 2022, 7:39 PM
vaughnwalters moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Aug 17 2022, 9:29 PM
vaughnwalters subscribed.

AC passes 👍
Macbook pro
testing with: https://en.wikipedia.beta.wmflabs.org/wiki/Brown_bear

  • when ToC is collapsed, content is centered on page (at all widths)

Chrome:

resize.gif (268×600 px, 2 MB)

Soda mentioned this in T315723: [Regression] Vector 2022 does not scale to full width on edit pages when you hide sidebar.Aug 20 2022, 12:13 PM
Jdlrobson updated the task description. (Show Details)Aug 22 2022, 5:23 PM
ovasileva closed this task as Resolved.Aug 25 2022, 9:01 AM
ovasileva moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Confirming this is fixed on production and resolving

Screen Shot 2022-08-25 at 11.01.04 AM.png (1×2 px, 817 KB)

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