Page MenuHomePhabricator

[Visual refinements] Bold active section in ToC
Open, HighPublic2 Estimated Story Points

Description

Description

In Vector 2022 the table of contents remains fixed in the sidebar as you scroll down the page. One thing this enables us to do is highlight the "active" section link in the table of contents (i.e. the section link for the section you are currently reading). We recently asked the community for feedback regarding how we should style the active section link:

The feedback was that we should style the active link in bold:

Screen Shot 2022-08-05 at 11.36.06 AM.png (224×1 px, 129 KB)

(Link to summary of community feedback)

To-do

  • Style the active section link in the ToC in bold

Screen Shot 2022-08-05 at 11.45.06 AM.png (1×3 px, 3 MB)

  • If the active section is a child section, and the parent section is expanded, style the parent section in black but not bold

Screen Shot 2022-08-05 at 11.46.12 AM.png (1×3 px, 2 MB)

  • If the active section is a child section, but the parent section is not expanded, style the parent section in bold

Screen Shot 2022-08-05 at 11.47.44 AM.png (1×3 px, 2 MB)

  • Ensure that there is no (or minimal) line wrapping when a section link gets bolded

Event Timeline

and the accompanying patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/814840

This bolds the font and stretches the width of the active element to 100% of the TOC width + TOC padding, (i.e. to the very edge of the sidebar container).

That should prevent text-wrapping due to bolding as best a possible, but on some OS's or browsers, it might result in the text of the active element overlapping the scrollbar (only when the scrollbar is visible of course). I'd consider that a minor edge-case though.

{F35419362}

Change 814840 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] TOC with bold text.

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

LGoto reassigned this task from cjming to bwang.
LGoto added a subscriber: cjming.