Page MenuHomePhabricator

Add link that allows to hide/show the ToC manually on all screen sizes above 1000px
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

See T306660: [Goal] Table of contents on narrow screens in vector-2022 for context. This is the first of two tickets that will provide collapsible behavior for the table of contents. The first (T307900: Collapse ToC into page title at narrow screens) will allow the ToC to automatically collapse into a button adjacent to the title for narrow screens. The second (this ticket) will allow the ToC to be collapsible into a button alongside the title at all screen sizes.

Prototype

https://di-collapsible-menus.web.app/Brown_bear

Acceptance criteria

  • Create a "hide" button for the ToC

Screen Shot 2022-05-09 at 12.25.50 PM.png (483×362 px, 52 KB)

  • Selecting the hide button will collapse the ToC into the title

Screen Shot 2022-05-09 at 12.26.12 PM.png (453×827 px, 82 KB)

  • When ToC is opened from the title a move to sidebar button should appear
    Screen Shot 2022-05-09 at 12.26.44 PM.png (438×385 px, 55 KB)
  • Selecting move to sidebar will put the ToC back to its original location
  • The "hide" and "move to sidebar" should be button elements, not links
  • The brackets around "hide" and "move to sidebar" are purely visual elements, not read out by screen readers

QA steps

  • On beta cluster page with a TOC, expand the view port to above desktop (1000px) and note that there are hide and move to sidebar links visible next to the TOC Contents that toggles the TOC location between the sidebar and below the TOC icon per ACs.
  • Ensure that TOC works as before below desktop
  • Ensure that the TOC toggle links are not visible in the no-js context

https://phabricator.wikimedia.org/T307901#8122243
https://phabricator.wikimedia.org/T307901#8230993

QA Results - Beta

ACStatusDetails
1T307901#8122243
2T307901#8122243
3T307901#8122243

QA Results - Prod

ACStatusDetails
1T307901#8230993
2T307901#8230993
3T307901#8230993

Related Objects

Event Timeline

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

Over on enwiki we've started looking at a way to make the most of vector-2022 for those that still want a wide layout. Example page with gadget: https://en.wikipedia.org/wiki/Lancaster's_Normandy_chevauch%C3%A9e_of_1356?useskin=vector-2022&withgadget=wide-vector-2022 of course, the TOC in the sidebar is in the way at wide widths - once this TOC collapsing is working, will it also allow the then-empty sidebar to collapse as well?

Over on enwiki we've started looking at a way to make the most of vector-2022 for those that still want a wide layout. Example page with gadget: https://en.wikipedia.org/wiki/Lancaster's_Normandy_chevauch%C3%A9e_of_1356?useskin=vector-2022&withgadget=wide-vector-2022 of course, the TOC in the sidebar is in the way at wide widths - once this TOC collapsing is working, will it also allow the then-empty sidebar to collapse as well?

that's cool. for editors using the gadget I think it might be important for them to keep in mind that readers will be seeing the article with the max-width. I wonder if there's a way to add a note either in the gadget description, and/or if they open the editor with the gadget enabled?

@cjming i've recently updated the prototype which should help clarify some of this stuff: https://di-collapsible-menus.web.app/Brown_bear

  • Below 1000px both the "hide" and "move to sidebar" buttons should be hidden — this is because the TOC automatically hides itself below 1000px, and we don't want to give people the option to move it back to the sidebar
  • Above 1000px the default state is the TOC in the sidebar, below 1000px the default state (and only state) is the TOC hidden
  • Regarding the main menu: in the (hopefully near) future we will add similar logic that makes it automatically hide below 1000px. In other words, in the future, below 1000px, there will be no "pinned" menus. You can see this in the prototype
alexhollender_WMF renamed this task from Add link that allows to hide/show the ToC manually on all screen sizes to Add link that allows to hide/show the ToC manually on all screen sizes above 1000px.Jun 23 2022, 4:01 PM

Change 808300 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Add feature to hide/show collapsible TOC above desktop

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

cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming subscribed.

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

[mediawiki/skins/Vector@master] POC: leverage narrow screens solution for T307901

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

Change 808323 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: leverage narrow screens solution for T307901

Reason:

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

Change 808300 abandoned by Clare Ming:

[mediawiki/skins/Vector@master] Add feature to hide/show collapsible TOC above desktop

Reason:

this will be much easier once grid is merged and css-only solution at narrow screens is refactored

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

@cjming if the TOC is collapsed will it stay collapsed when you navigate to another page?

So it looks like this isn't going to save any screen space right? Just "collapse" the TOC up, but still leave a big empty gutter in the now-empty sidebar? Do we need a different request to be able to collapse empty side bars - since they don't seem to be contained in an object we can deal with via CSS.

So it looks like this isn't going to save any screen space right? Just "collapse" the TOC up, but still leave a big empty gutter in the now-empty sidebar? Do we need a different request to be able to collapse empty side bars - since they don't seem to be contained in an object we can deal with via CSS.

@Xaosflux the limited width for the content is a feature which makes articles more readable. We believe that the reading experience is worse without this feature, so we will not be implementing the ability to remove it. However you can get the text to be full-width via this user script: https://en.wikipedia.org/wiki/User:Jdlrobson/vector-max-width-toggle.js

Yes, I've seen that and understand the default behavior, suppose would need a different request to be able to deal with that via styles instead of javascript. Currently, on narrow enough skins the toolbar can be collapsed/uncollapsed - and when it collapses (other wise leaving the side bar empty) the sidebar also collapses (see images below) - that's the sort of behavior I'm following up about.

So even if the toolbard, and the newly-available-to-be-collapsable TOC are both collapsed, this will still leave the wide gully such as in the third image?

Example of collapsing sidebar working:

image.png (569×763 px, 121 KB)

image.png (489×679 px, 74 KB)

Wide gully to remain?

image.png (858×943 px, 226 KB)

@cjming if the TOC is collapsed will it stay collapsed when you navigate to another page?

@alexhollender_WMF if we set the default for the TOC to be collapsed on page load which I believe is the case currently for all view ports below desktop (above desktop, the TOC persists in the sidebar for the time being), it will remain so whenever navigating to another page.

Yes, I've seen that and understand the default behavior, suppose would need a different request to be able to deal with that via styles instead of javascript. Currently, on narrow enough skins the toolbar can be collapsed/uncollapsed - and when it collapses (other wise leaving the side bar empty) the sidebar also collapses (see images below) - that's the sort of behavior I'm following up about.

So even if the toolbard, and the newly-available-to-be-collapsable TOC are both collapsed, this will still leave the wide gully such as in the third image?

@Xaosflux - the content should stretch to fill the maximum width when the sidebar and the ToC are collapsed, more like the second image. This prototype https://di-collapsible-menus.web.app/Brown_bear shows the expected behavior

@ovasileva thanks for the note, that one seems to at least let the side bars get "squeezed" at all resolutions, so that is a plus!

@cjming if the TOC is collapsed will it stay collapsed when you navigate to another page?

@alexhollender_WMF if we set the default for the TOC to be collapsed on page load which I believe is the case currently for all view ports below desktop (above desktop, the TOC persists in the sidebar for the time being), it will remain so whenever navigating to another page.

to clarify: I mean specifically in the context of this task, which is regarding manual collapsing of the TOC on all screen sizes above 1000px.

With grid work in design review, this is probably unblocked from development, although we shouldnt merge until grid is deployed

My bad, this is still blocked on T311447

Yes we can consider this unblocked. Is there an open patch for this one in Gerrit?
Haha.. sorry didn't see your edit :)

ovasileva set the point value for this task to 3.Jul 25 2022, 5:26 PM

Change 817382 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Add feature to hide/show collapsible TOC above desktop

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

cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Change 817382 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add feature to hide/show collapsible TOC above desktop

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

cjming updated the task description. (Show Details)
cjming updated the task description. (Show Details)
Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: On beta cluster page with a TOC, expand the view port to above desktop (1000px) and note that there are hide and move to sidebar links visible next to the TOC Contents that toggles the TOC location between the sidebar and below the TOC icon per ACs.

Screen Recording 2022-08-01 at 7.37.49 PM.mov.gif (888×698 px, 355 KB)

✅ AC2: Ensure that TOC works as before below desktop

Screen Recording 2022-08-01 at 7.38.21 PM.mov.gif (888×698 px, 1 MB)

✅ AC3: Ensure that the TOC toggle links are not visible in the no-js context

Screen Shot 2022-08-01 at 7.39.14 PM.png (877×705 px, 217 KB)

@cjming This passes, but I'm curious why on the Dog page I don't see the toggle links. I checked a few other pages and they showed up.

Screen Shot 2022-08-01 at 7.37.22 PM.png (730×639 px, 146 KB)

hi @Edtadros

This passes, but I'm curious why on the Dog page I don't see the toggle links. I checked a few other pages and they showed up.

I'm wondering if that Dog page on beta cluster is running a different MW version -- note that the test SiteNotice banner isn't full width on https://en.wikipedia.beta.wmflabs.org/wiki/Dog like it is on https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear and https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein

I'll see if I can dig around some more and come up with an explanation

hi @Edtadros - i asked around and one theory is that the Dog page being different is a side effect of anon pageviews being heavily cached. I guess if you corroborated seeing the feature by checking other pages on beta cluster, that this is ok to pass?

hey @cjming, I think this missed design review (?). Two things I noticed on beta, would it be possible to:

  • use cursor: pointer for the [ hide ] and [ move to sidebar ] buttons?
  • remove the spaces between the brackets and the text for both buttons (e.g. [hide] vs. [ hide ])?

note: we're operating in a bit of gray area with these buttons. They're not links, and not quite design system buttons (yet). I am aware of this, and we will plan to standardize them further in the future.

hi @alexhollender_WMF -- yup i'll follow up with the minor adjustments later today

Change 820566 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Minor fixes to TOC hide/show buttons

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

Change 820566 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Minor fixes to TOC hide/show buttons

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

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

[mediawiki/skins/Vector@master] Follow-up: Refactor button/icon class helpers, make portlet classes consistent

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

Am I missing something? So it looks like hide the TOC is available now (production enwiki for example) - but even collapsing the sidebar and collapsing the TOC we still can't regain the left margin for display - making all the collapsing fairly pointless.

We've tried to work around the width problems with a gadget, but it still leaves that unwanted gap.

Example load article view: https://en.wikipedia.org/wiki/2010_Kilkenny_Senior_Hurling_Championship?useskin=vector-2022&withgadget=wide-vector-2022

If we change the viewport to under 1000px we are able to get rid of all that whitespace, but is there a style that can be targeted to get rid of it any time that it isn't otherwise occupied?

Centering (T314579) isn't the challenge - it is how to delete the empty gutter on the left side when it is not being populated by anything at all - getting rid of the right side gutter was simple.

A bit convoluted, but.... this seems to work (on modern browsers at least)

@media screen and (min-width: 1000px) {
body.vector-toc-collapsed .mw-page-container-inner:has(#mw-sidebar-checkbox:not(:checked)) {
    grid-template-columns: 0px 0px minmax(0,1fr);
}
@media screen and (min-width: 1200px) {
body.vector-toc-collapsed .mw-page-container-inner:has(#mw-sidebar-checkbox:not(:checked)) {
    grid-template-columns: 0px 0px minmax(0,1fr);
}

btw.. why is vector-toc-collapsed on body and vector-toc-visible on the vector-layout-grid class ?

I couldn't get TheDJ's code to do anything when pasting into a Stylus user.css (I tried wrapping the sub-sections (lines 2&3 and 6&7) in additional braces, but that didn't help). Not sure what I'm doing wrong!?

However, my own hack seems to half solve it.
[Warning: My code is a non-professional CSS-dabbler hack! Just sharing in case it helps with a more correctly-structured solution.]

@media screen and (min-width:1000px) {
  .vector-toc-collapsed #mw-sidebar-checkbox:not(:checked) ~ .mw-content-container {
    margin-left: -250px !important;
  }
}
@media screen and (min-width:1200px) {
  .vector-toc-collapsed #mw-sidebar-checkbox:not(:checked) ~ .mw-content-container {
    margin-left: -300px !important;
  }
}

The missing piece is how to move the pop-out TOC itself over to the edge; it currently remains awkwardly indented. I experimented with duplicating the above code and using #mw-panel-toc but that didn't seem to work. idk.

This comment was removed by Xaosflux.

@TheDJ the mediawiki css checker doesn't like that snippet:

image.png (246×829 px, 18 KB)

@TheDJ the mediawiki css checker doesn't like that snippet:

image.png (246×829 px, 18 KB)

Because the edit screen linter is old and has is pretty new.

@TheDJ the mediawiki css checker doesn't like that snippet:

image.png (246×829 px, 18 KB)

Because the edit screen linter is old and has is pretty new.

Also, but also because it's just missing a set of { in my example (now updated) :)

This hack does not take care of centering btw, so it sort of expects you to use the the widen gadget, otherwise the content gets left aligned. In words it does:
"For layouts above 1000px and layouts above 1200px, set the first column to be 0 wide, IF the toc is collapsed AND layout contains a sidebar toggle that is not checked (so if neither the toc nor the sidebar menu are shown/visible).

@TheDJ thank you for the note, the snippet above still appears to have unbalanced {}'s in it however - want to make sure we're on the same page instead of guessing :D

Change 819178 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Follow-up: Refactor button/icon class helpers, make portlet classes consistent

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

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: On a page with a TOC, expand the view port to above desktop (1000px) and note that there are hide and move to sidebar links visible next to the TOC Contents that toggles the TOC location between the sidebar and below the TOC icon per ACs.

Screen Recording 2022-09-12 at 7.02.13 PM.mov.gif (678×984 px, 616 KB)

✅ AC2: Ensure that TOC works as before below desktop

Screen Recording 2022-09-12 at 7.03.18 PM.mov.gif (920×710 px, 2 MB)

✅ AC3: Ensure that the TOC toggle links are not visible in the no-js context

Screen Shot 2022-09-12 at 7.05.27 PM.png (511×1 px, 165 KB)

Screen Shot 2022-09-12 at 7.05.53 PM.png (734×753 px, 168 KB)