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?

In T307901#8021483, @Xaosflux wrote:

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

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

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

blocked on grid work and T311447

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.

In T307901#8044733, @Xaosflux wrote:

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:

Wide gully to remain?

In T307901#8044250, @alexhollender_WMF wrote:

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

In T307901#8044897, @Xaosflux wrote:

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!

In T307901#8045074, @cjming wrote:

In T307901#8044250, @alexhollender_WMF wrote:

@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 :)

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

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

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?

T314579 perhaps?

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.

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

In T307901#8154009, @Xaosflux wrote:

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

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

In T307901#8154078, @Izno wrote:

In T307901#8154009, @Xaosflux wrote:

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

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