[Visual refinements] Stop TOC from jumping when sticky header appears (logged-in only)
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Aug 1 2022, 6:46 PM

Description

Currently when the sticky header appears, the TOC jumps down. Note: this only happens if you are logged-in (because logged-out people do not get a sticky header).

To-do

.mw-table-of-contents-container starts out with top: 0. When the sticky header appears some new classes get added and override the top value to top: 3.125rem !important. I think the easiest fix would be, for logged-in only, to set the initial value of top to match the value of top when the sticky header appears (i.e. 3.125rem !important).

Before & after comparison

before (TOC jumps)	after (TOC doesn't jump)

QA Results - Beta

AC	Status	Details
1	✅	T314330#8272583

QA Results - Prod

AC	Status	Details
1	✅	T314330#8272597

Details

	Subject	Repo	Branch	Lines +/-
	Set top value for ToC when sticky header is enabled.	mediawiki/skins/Vector	master	+1 -1
	Modify the sticky header offset styles	mediawiki/skins/Vector	master	+14 -11

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	Jdlrobson	T309972 [Goal] prepare desktop improvements project for further deployment
Resolved	ovasileva	T301780 [Epic] Visual design & layout refinements
Resolved	ovasileva	T314330 [Visual refinements] Stop TOC from jumping when sticky header appears (logged-in only)

Event Timeline

thanks to @Quiddity for calling our attention to this issue

ovasileva triaged this task as Medium priority.Aug 4 2022, 9:15 AM

ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.

Jdlrobson moved this task from Incoming to Visual Enhancements / Layout on the Desktop Improvements (Vector 2022) board.Aug 5 2022, 5:49 AM

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-2022-23-Q1); removed Web-Team-Backlog.Aug 15 2022, 12:33 PM

LGoto assigned this task to Jdrewniak.Aug 15 2022, 5:50 PM

Blocker for deployment

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

[mediawiki/skins/Vector@master] Set top value for ToC when sticky header is enabled.

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

gerritbot added a project: Patch-For-Review.Sep 9 2022, 3:55 PM

Jdrewniak removed Jdrewniak as the assignee of this task.Sep 9 2022, 3:56 PM

Jdrewniak moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Jdrewniak subscribed.

LGoto set the point value for this task to 3.Sep 12 2022, 5:47 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Just in case it helps, my personal user.css is adding code to prevent 2 movements:

Fixing the "jump",
and also removing any movement of the ToC-container at all (if the Main-menu is collapsed).

I wonder if something like this might be worth considering.

Code is here (and possibly other related lines, elsewhere within it) https://www.mediawiki.org/wiki/User:Quiddity/Vector-2022-condensed.css#L-129
Caveats:
-My code doesn't seem to work perfectly in the logged-out view (the ToC-container still moves). [I haven't tried to fix this yet]
-I'm also doing other changes that makes the Site-header become the "Sticky"-header (and adds a supplementary Page-toolbar that appears on scroll), which might mean this is less feasible with the default Sticky-header.

Jdlrobson mentioned this in T301780: [Epic] Visual design & layout refinements.Sep 12 2022, 7:15 PM

Jdlrobson moved this task from Ready for Development to Blocked on Others on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Sep 12 2022, 9:28 PM

Jdlrobson moved this task from Blocked on Others to Ready for Development on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Viosi awarded a token.Sep 13 2022, 1:49 AM

ovasileva edited parent tasks, added: T317632: [EPIC] Visual refinements pt2; removed: T301780: [Epic] Visual design & layout refinements.Sep 13 2022, 12:33 PM

ovasileva edited parent tasks, added: T301780: [Epic] Visual design & layout refinements; removed: T317632: [EPIC] Visual refinements pt2.

• alexhollender_WMF mentioned this in T304330: ToC: micro-interactions.Sep 13 2022, 3:06 PM

Jdrewniak moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.Sep 13 2022, 3:58 PM

LGoto assigned this task to Jdrewniak.Sep 13 2022, 5:12 PM

Jdrewniak reassigned this task from Jdrewniak to bwang.Sep 15 2022, 3:07 PM

Jdrewniak moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Jdrewniak claimed this task.Sep 15 2022, 4:36 PM

Jdrewniak reassigned this task from Jdrewniak to bwang.

Jdrewniak added a subscriber: bwang.

Jdlrobson reassigned this task from bwang to Edtadros.Sep 15 2022, 4:37 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Change 831118 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Set top value for ToC when sticky header is enabled.

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.2; 2022-09-19).Sep 15 2022, 5:00 PM

Maintenance_bot removed a project: Patch-For-Review.Sep 15 2022, 5:30 PM

Jdrewniak claimed this task.Sep 15 2022, 9:00 PM

Jdrewniak moved this task from QA to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Jdrewniak added a subscriber: Edtadros.

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

[mediawiki/skins/Vector@master] Modify top value of the uncollapsed ToC when sticky header enabled

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

gerritbot added a project: Patch-For-Review.Sep 16 2022, 11:46 AM

Jdrewniak reassigned this task from Jdrewniak to bwang.Sep 20 2022, 2:55 PM

Jdrewniak moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Change 832629 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Modify the sticky header offset styles

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.3; 2022-09-26); removed MW-1.40-notes (1.40.0-wmf.2; 2022-09-19).Sep 20 2022, 4:00 PM

Jdlrobson reassigned this task from bwang to Edtadros.Sep 20 2022, 4:12 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.

Maintenance_bot removed a project: Patch-For-Review.Sep 20 2022, 4:31 PM

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: when scrolling down the page, at the point when the sticky header appears, the TOC should not move jump down

Screen Recording 2022-09-29 at 6.47.22 AM.mov.gif (684×1 px, 1 MB)

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: when scrolling down the page, at the point when the sticky header appears, the TOC should not move jump down

Screen Recording 2022-09-29 at 6.49.00 AM.mov.gif (684×1 px, 1 MB)

Edtadros updated the task description. (Show Details)Sep 29 2022, 1:52 PM

Looks good, resolving

	F35539971: Screen Recording 2022-09-29 at 6.49.00 AM.mov.gif
	Sep 29 2022, 1:50 PM

	F35539967: Screen Recording 2022-09-29 at 6.47.22 AM.mov.gif
	Sep 29 2022, 1:49 PM

	F35518216: simplescreenrecorder-2022-09-12_11.07.25.webm
	Sep 12 2022, 6:17 PM

[Visual refinements] Stop TOC from jumping when sticky header appears (logged-in only)Closed, ResolvedPublic3 Estimated Story PointsActions

Description

Description

To-do

Before & after comparison

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

[Visual refinements] Stop TOC from jumping when sticky header appears (logged-in only)
Closed, ResolvedPublic3 Estimated Story Points
Actions

Related Objects
Search...