Page MenuHomePhabricator

Increase offset for headings when clicking TOC links
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

When you click a link in the table of contents you get scrolled to the respective section. Currently there is no offset between the section heading and the top of the viewport (aside from clearing the sticky header when logged-in). For example:

logged-outlogged-in
image.png (2×2 px, 1 MB)
image.png (2×2 px, 1 MB)

To-do

Add an offset so that when you click a link in the table of contents the respective section heading is ~50px below the top of the viewport (or sticky header, if logged in):

logged-outlogged-in
image.png (1×2 px, 937 KB)
image.png (1×2 px, 930 KB)

Notes

QA Results - Beta

ACStatusDetails
1T314419#8674766
2T314419#8674766

QA Results - Prod

ACStatusDetails
1T314419#8719822
2T314419#8719822

Event Timeline

ovasileva triaged this task as Medium priority.Aug 4 2022, 9:14 AM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.
alexhollender_WMF renamed this task from [Visual refinements] Increase offset for headings when clicking TOC links to Increase offset for headings when clicking TOC links.Sep 15 2022, 2:25 PM
ovasileva raised the priority of this task from Medium to High.Feb 17 2023, 10:34 PM

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

[mediawiki/skins/Vector@master] Increase scroll-padding-top for page sections

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

Change 893050 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Increase scroll-padding-top for page sections

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

When resizing the window our icon touch area adapts to 44x44 (it's 43.333 for some reason but ignoring that for now). I think the scrolling-padding-top should be slightly bigger to compensate for that. Ideally the margin between the top of the screen and the icon should match the margin between bottom of icon and heading. What do you think?

Screenshot 2023-03-01 at 11.27.12 AM.png (413×1 px, 309 KB)

When resizing the window our icon touch area adapts to 44x44 (it's 43.333 for some reason but ignoring that for now). I think the scrolling-padding-top should be slightly bigger to compensate for that. Ideally the margin between the top of the screen and the icon should match the margin between bottom of icon and heading. What do you think?

Screenshot 2023-03-01 at 11.27.12 AM.png (413×1 px, 309 KB)

that sounds good. we can increase it from 50px to 100px. let me know if you'd like me to update the mockups in the task description.

@alexhollender_WMF I think 60px should be sufficient here, I don't think we should make this spacing too big.

One use-case that I noticed that will be impacted by this change is the "small sections" scenario. This was originally raised by the editing team in regards to this spacing on talk pages, however, it could be more pronounced on projects like Wiktionary, which tend to have very very small sections. In the example below, when scrolling to the section "Dutch > Etymology", the section at the very top is "Dutch", not "Etymology".

Screenshot 2023-03-06 at 11.36.38 AM.png (322×640 px, 52 KB)

Perhaps we should consider highlighting the active section (in the content) along with this change? (could even be done temporarily with a fade animation).

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

[mediawiki/skins/Vector@master] Increase @scroll-padding-top to 60px

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

@alexhollender_WMF I think 60px should be sufficient here, I don't think we should make this spacing too big.

right, sounds good. as a reminder: one thing we discussed last week was that we might need to make the spacing here match the spacing in T317661: [Table of contents] Increase threshold for when a section is active, so maybe they could both be 75px or something

In the example below, when scrolling to the section "Dutch > Etymology", the section at the very top is "Dutch", not "Etymology".

Screenshot 2023-03-06 at 11.36.38 AM.png (322×640 px, 52 KB)

Perhaps we should consider highlighting the active section (in the content) along with this change? (could even be done temporarily with a fade animation).

hmm, generally speaking I think it's okay if there's a different section heading (i.e. not the one corresponding to the link you clicked) visible towards the top of the screen. because of the variability of section lengths, spacing, and screen sizes I think it'd be difficult to try and get this perfect. highlighting the section seems like it could be helpful (we do a very subtle highlight when you click the ^ link next to references, so there's an existing pattern), though I guess we should further verify it's needed before working on it at all.

Discussed in standup and settled on 75, moving to needs more work

bwang removed bwang as the assignee of this task.Mar 6 2023, 8:55 PM
bwang subscribed.

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

[mediawiki/skins/Vector@master] Update scroll threshold to be the same as scroll padding top

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

Change 894696 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Increase @scroll-padding-top to 75px

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

bwang removed bwang as the assignee of this task.Mar 7 2023, 6:41 PM

Change 894712 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update scroll threshold to be the same as scroll padding top

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Add an offset so that when you click a link in the table of contents the respective section heading is 75px (per T314419#8669632) below the top of the viewport if sticky header is not present

Screenshot 2023-03-07 at 2.50.55 PM.png (437×683 px, 136 KB)

✅ AC2: Add an offset so that when you click a link in the table of contents the respective section heading is 75px (per T314419#8669632) below the top of the sticky header, if present.

Screenshot 2023-03-07 at 2.43.53 PM.png (730×803 px, 222 KB)

Edtadros removed ovasileva as the assignee of this task.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Add an offset so that when you click a link in the table of contents the respective section heading is 75px (per T314419#8669632) below the top of the viewport if sticky header is not present

Screenshot 2023-03-22 at 10.10.06 AM.png (244×728 px, 71 KB)

✅ AC2: Add an offset so that when you click a link in the table of contents the respective section heading is 75px (per T314419#8669632) below the top of the sticky header, if present.

Screenshot 2023-03-22 at 10.11.31 AM.png (297×812 px, 97 KB)