[Table of Contents] Offset the top position of the table of contents to the height of the sticky header only when the sticky header is/will be shown
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Jan 25 2022, 9:52 PM

Project Tags

Referenced Files

	F34969353: Screen Shot 2022-02-27 at 9.29.45 PM.png
	Feb 28 2022, 5:32 AM

	F34969354: Screen Shot 2022-02-27 at 9.30.23 PM.png
	Feb 28 2022, 5:32 AM

	F34951836: Screen Shot 2022-02-14 at 5.25.50 PM.png
	Feb 15 2022, 12:30 AM

	F34940094: toc sticky header beta.webm
	Feb 1 2022, 10:59 PM

	F34930663: toc bump down.webm
	Jan 25 2022, 9:52 PM

	F34930664: toc no bump.webm
	Jan 25 2022, 9:52 PM

Subscribers

View All 9 Subscribers

Description

Currently, the table of contents assumes that the sticky header is always shown and offsets its top property to account for the sticky header's height. For example, login and visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?tableofcontents=1&vectorstickyheader=0 and then scroll down the page:

Screen Shot 2022-02-14 at 5.25.50 PM.png (2,850×1,388 px, 1 MB)

However, the sticky header may not be enabled or may not be enabled for specific pages. Therefore, we need to make this offset conditional and based on whether the sticky header is/will be shown.

Acceptance Criteria

Table of contents offsets its top position to account for the sticky header's height only when the sticky header is/will be shown

Developer Notes

The sticky header has a utility class .mw-sticky-header-element that we could make use of here:

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/762559

QA Results - Prod

AC	Status	Details
1	✅	T300077#7740507

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Offset the TableOfContents `top` property only when the sticky header is shown	mediawiki/skins/Vector	master	+13 -9

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		ovasileva	T273473 [Epic] Improve the table of contents
		Resolved		ovasileva	T300077 [Table of Contents] Offset the top position of the table of contents to the height of the sticky header only when the sticky header is/will be shown

Event Timeline

• alexhollender_WMF created this task.Jan 25 2022, 9:52 PM

ovasileva triaged this task as High priority.Jan 26 2022, 1:22 PM

LGoto assigned this task to • nray.Jan 27 2022, 6:15 PM

@nray note that once we do T298836 the sticky header will be hidden below 1000px, so the change described in this task should only apply to windows wider than 1000px.

• alexhollender_WMF updated the task description. (Show Details)Jan 28 2022, 3:08 AM

• alexhollender_WMF updated the task description. (Show Details)

@alexhollender_WMF I think beta already has the effect you are looking for with the sticky header, is that correct?: https://en.wikipedia.beta.wmflabs.org/wiki/Dog?tableofcontents=1&vectorstickyheader=1

We should, however, adjust the TOC styles to not apply an offset for the sticky header height if the sticky header isn't present though e.g.: https://en.wikipedia.beta.wmflabs.org/wiki/Dog?tableofcontents=1&vectorstickyheader=0

In T300077#7669389, @nray wrote:

@alexhollender_WMF I think beta already has the effect you are looking for with the sticky header, is that correct?: https://en.wikipedia.beta.wmflabs.org/wiki/Dog?tableofcontents=1&vectorstickyheader=1

yup, looks great on beta:

We should, however, adjust the TOC styles to not apply an offset for the sticky header height if the sticky header isn't present though e.g.: https://en.wikipedia.beta.wmflabs.org/wiki/Dog?tableofcontents=1&vectorstickyheader=0

yes — do you want a separate task for that?

Change 762559 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Offset the TableOfContents `top` property only when the sticky header is shown

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

Change 762559 abandoned by Nray:

[mediawiki/skins/Vector@master] Offset the TableOfContents `top` property only when the sticky header is shown

Reason:

POC

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

Change 762559 restored by Nray:

[mediawiki/skins/Vector@master] Offset the TableOfContents `top` property only when the sticky header is shown

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

Change 762559 abandoned by Nray:

[mediawiki/skins/Vector@master] Offset the TableOfContents `top` property only when the sticky header is shown

Reason:

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

• nray renamed this task from [Sticky header] increase top distance on ToC for logged-in people to [Table of Contents] Offset the top position of the table of contents to the height of the sticky header only when the sticky header is/will be shown.Feb 15 2022, 12:30 AM

• nray removed • nray as the assignee of this task.

• nray updated the task description. (Show Details)

• nray moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

• nray subscribed.

• nray updated the task description. (Show Details)Feb 15 2022, 12:33 AM

Change 762559 restored by Nray:

[mediawiki/skins/Vector@master] Offset the TableOfContents `top` property only when the sticky header is shown

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

Change 762559 abandoned by Nray:

[mediawiki/skins/Vector@master] Offset the TableOfContents `top` property only when the sticky header is shown

Reason:

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

LGoto moved this task from Incoming to Table of Contents on the Vector 2022 board.Feb 15 2022, 6:20 PM

LGoto set the point value for this task to 2.Feb 15 2022, 6:22 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

bwang claimed this task.Feb 17 2022, 5:31 PM

bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

Change 762559 restored by Bernard Wang:

[mediawiki/skins/Vector@master] Offset the TableOfContents `top` property only when the sticky header is shown

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

bwang removed bwang as the assignee of this task.Feb 17 2022, 6:28 PM

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

bwang subscribed.

Jdlrobson assigned this task to Edtadros.Feb 19 2022, 12:49 AM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

Change 762559 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Offset the TableOfContents `top` property only when the sticky header is shown

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.23; 2022-02-21).Feb 19 2022, 2:00 AM

ovasileva moved this task from QA to QA in Prod on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.Feb 24 2022, 6:11 PM

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: Table of contents offsets its top position to account for the sticky header's height only when the sticky header is/will be shown

Screen Shot 2022-02-27 at 9.29.45 PM.png (1,060×442 px, 138 KB)

Screen Shot 2022-02-27 at 9.30.23 PM.png (1,059×558 px, 214 KB)

Edtadros updated the task description. (Show Details)Feb 28 2022, 5:33 AM

Looks good, resolving.

[Table of Contents] Offset the top position of the table of contents to the height of the sticky header only when the sticky header is/will be shownClosed, ResolvedPublic2 Estimated Story PointsActions

Description

Description

Acceptance Criteria

Developer Notes

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Prod

QA Steps

[Table of Contents] Offset the top position of the table of contents to the height of the sticky header only when the sticky header is/will be shown
Closed, ResolvedPublic2 Estimated Story Points
Actions

Related Objects
Search...