Page MenuHomePhabricator

TOC styling update
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

  • Remove background-color from TOC (currently: .sidebar-toc: background-color: #f8f9fa;)
    • Update bottom gradient to use white instead of gray (currently: .sidebar-toc:after: background: linear-gradient(rgba(255,255,255,0),#f8f9fa);)
  • Reduce padding-left to 15px (currently: 32px)
  • Add hyphen: auto; to .sidebar-toc-link elements
beforeafter
Screen Shot 2022-07-05 at 3.35.08 PM.png (818×1 px, 342 KB)
Screen Shot 2022-07-05 at 3.34.46 PM.png (818×1 px, 341 KB)

Event Timeline

ovasileva triaged this task as Medium priority.Jul 6 2022, 11:54 AM
ovasileva raised the priority of this task from Medium to High.Jul 18 2022, 9:11 AM

@alexhollender_WMF
I believe the background color we are using for the main page is just #fff not #f8f9fa. Do you want me to use #fff for the TOC background color and gradient, or do you prefer me to change everything to #f8f9fa?

@alexhollender_WMF
I believe the background color we are using for the main page is just #fff not #f8f9fa. Do you want me to use #fff for the TOC background color and gradient, or do you prefer me to change everything to #f8f9fa?

@bwang apologies for the confusion, i was noting the current background color of the TOC (#f8f9fa) so it's clear what needs to be changed.

Oh gotcha! No problem I just read the task wrong!

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

[mediawiki/skins/Vector@master] Update TOC styles

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

bwang removed bwang as the assignee of this task.Jul 21 2022, 5:05 PM
bwang subscribed.

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

Alex, Bernard this is ready for design review I've left some notes in a Slack DM thread. Please move to needs more work/code review when done.

  1. Chevron seems to be clipped in Pixel https://patchdemo.wmflabs.org/wikis/e534fc5aae/wiki/Test?useskin=vector-2022
  2. I want to confirm that it's okay that the sidebar no longer aligns with the table of contents
alexhollender_WMF added a subscriber: Jdrewniak.
  1. confirming that the chevrons are clipped when the section is open:
currentcorrect
image.png (336×362 px, 62 KB)
image.png (336×362 px, 49 KB)
  1. the alignment looks good to me
  1. @Jdrewniak how can we test the hyphen situation? would we expect to see a hyphen here?
    Screen Shot 2022-07-21 at 3.50.34 PM.png (328×562 px, 86 KB)

Ah yeah, so 15px left padding isnt enough with the existing chevron placement. If the goal is to align the chevrons with the main menu button, one thing we could do is update the left padding to 27px and add a negative left margin of 12px.

Ah yeah, so 15px left padding isnt enough with the existing chevron placement. If the goal is to align the chevrons with the main menu button, one thing we could do is update the left padding to 27px and add a negative left margin of 12px.

it looks like we've already got a margin on the left side of that container (12px). would it work if we reduce the padding to 17px, and then also reduced the margin to 10px (or maybe 18px and 9px if we want to be safe in terms of the clipping)?

Screen Shot 2022-07-21 at 4.20.11 PM.png (637×674 px, 186 KB)

Yeah we got a left margin on large desktop viewports, and no left margin on the regular desktop viewports. I think your proposal is actually the same approach as mine, only you are adjusting by 2px and I was adjusting by 12px. 12px is a bit easier from a code perspective, would that be ok with you? It will look the same regardless.

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

Yeah we got a left margin on large desktop viewports, and no left margin on the regular desktop viewports.

ah right, I forgot how all the margins change at various sizes.

I think your proposal is actually the same approach as mine, only you are adjusting by 2px and I was adjusting by 12px. 12px is a bit easier from a code perspective, would that be ok with you? It will look the same regardless.

yup looks great, thanks

@bwang just noticed this — perhaps we need to add the background color in when the TOC is a menu? or maybe set it to #fff

Screen Shot 2022-07-21 at 5.20.49 PM.png (1×1 px, 1 MB)

Ah great catch! It's fixed in the patch

Change 815768 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Table of contents: Update TOC styles

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

Move to needs more work or sign off (see also T313562).

@bwang just noticed this — perhaps we need to add the background color in when the TOC is a menu? or maybe set it to #fff

Screen Shot 2022-07-21 at 5.20.49 PM.png (1×1 px, 1 MB)

looks like this has been fixed. think we're all set here

Screen Shot 2022-07-25 at 12.51.25 PM.png (630×387 px, 91 KB)

Looks good, resolving!

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

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

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

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