Maniphest T320453

[subtask] Update styling and position of floating TOC button
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Oct 10 2022, 10:40 PM

Description

The current floating TOC button is styled as a default/quiet button, which can make it slightly difficult to locate. This task is about updating the styling to default/normal (codex spec), and adding more spacing around the button (12px from top & side).

current styling & position	updated styling & position

AC

At narrow widths, the TOC button has 12px spacing from the top-left edge of the screen.

QA Results - Beta

AC	Status	Details
1	✅	T320453#8658988

QA Results - Prod

AC	Status	Details
1	✅	T320453#8658995

Details

Subject	Repo	Branch	Lines +/-
Fix dropdown icon markup to match Codex button	mediawiki/skins/Vector	master	+16 -21
Update mw-ui-icon-element line height	mediawiki/core	master	+2 -0
Shows TOC below page title for anon users	mediawiki/skins/Vector	master	+69 -35
Update mw-ui-icon-element styles to avoid conflicts with button classes and make default styles work with the checkbox hack	mediawiki/core	master	+27 -16
Ensure hidden TOC is visible below the page title on large viewports for anon users	mediawiki/skins/Vector	master	+75 -36

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T317884 [EPIC] Vector 2022 post-deployment work
Declined		ovasileva	T317632 [EPIC] Visual refinements pt2
Declined		None	T304330 ToC: micro-interactions
Open	BUG REPORT	None	T306744 Sticky header doesn't show the page title if PAGEBANNER is used
Resolved	BUG REPORT	ovasileva	T315639 Vector 2022: Absence of #contentSub breaks on-wiki gadgets and user scripts
Resolved	BUG REPORT	ovasileva	T316095 PAGEBANNER is not displaying at euwiki with New Vector
Resolved		ovasileva	T311311 Visual refinements to page toolbar & VE toolbar
Resolved		ovasileva	T313409 Hide article toolbar/tab-bar if there is only one item/tab
Resolved		• Mabualruz	T313349 Allow special pages to register navigation links in skins
Duplicate	Spike	None	T254055 Typography: Increased font-size design for Vector 2022
Resolved	BUG REPORT	ppelberg	T322738 Font size of page description, warning box, toolbar, edit buttons and other elements too large
Resolved	BUG REPORT	TheresNoTime	T321728 Preview font size has increased in Vector 2022
Resolved		ovasileva	T322000 [Unplanned] Font size in jQuery UI dialog too large when using vector 2022
Resolved		ovasileva	T311469 [QA] Evaluate Chinese, Japanese, and Korean characters' font size
Declined		Jdrewniak	T313735 Make "new message" alert a floating element
Resolved		• alexhollender_WMF	T314323 [EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022)
Resolved		Volker_E	T317800 [Icons] Bring mediawiki-ui-icon colors in line with Codex
Resolved		• alexhollender_WMF	T319070 [M] [Visual Enhancements] Correct margins of icons and arrows
Resolved		Jdlrobson	T320101 [M] Enable VectorVisualEnhancementsNext everywhere
Resolved	BUG REPORT	Jdlrobson	T320907 Add to watchlist icon is not shown correctly for larger font sizes
Resolved		ovasileva	T321504 [M] [Technical] Vector should consistently use mw-ui-icon-flush-left and mw-ui-icon-flush-right utility classes
Resolved		ovasileva	T322150 (Unplanned) Wikilove icon out of position in vector 2022
Resolved		ovasileva	T322673 Test VectorVisualEnhancementsNext flag
Resolved	BUG REPORT	ovasileva	T323176 [S] Sticky header icon buttons are missing padding
Invalid		None	T323246 Icon button dropdown should be 48px wide (not 50px)
Resolved		Jdlrobson	T323421 [subtask] Remove VectorVisualEnhancementsNext feature flag and relevant code
Open		JScherer-WMF	T314328 [Visual refinements] Decrease height of sticky header
Open		Jdrewniak	T314487 [Visual refinements] Decrease (or remove) min-width on Vector dropdown menus
Duplicate		Jdlrobson	T315609 [Visual refinements] Fix language button styling
Resolved		ovasileva	T316032 [Visual refinements] Bold active section in ToC (Part 2!)
Resolved		ovasileva	T316609 Buttons in sticky header should never wrap
Resolved		• KieranMcCann	T316950 [Visual refinements] Reduce height of article toolbar
Duplicate		Jdrewniak	T317558 [Visual refinements] Standardize menu border radiuses & box shadows
Resolved		ovasileva	T317583 [S] [Visual refinements] Remove ToC and main menu desktop wide viewport spacing
Resolved		ovasileva	T317573 (M) [Visual enhancement] Remove horizontal padding on .mw-body
Open		None	T323272 Update watchstar animation
Resolved		Jdlrobson	T323244 Remove extra spacing from username/create account link
Resolved	BUG REPORT	ovasileva	T323172 [S] Extra spacing around personal tools icon buttons on viewports below tablet
Declined	BUG REPORT	None	T323177 Page titlebar elements are vertically centered when the page title wraps
Resolved		None	T323631 Make dropdown arrows consistent across Vector and aligned with the spec
Resolved		ovasileva	T323625 Add label and title attribute/tooltip to full-screen toggle button
Resolved		None	T323245 Weird flash when opening sticky search
Resolved		CCiufo-WMF	T325553 [Design spike] Style "hide" and "move to sidebar" buttons as buttons (not links)
Resolved		ovasileva	T325554 [Regression] ToC icon in sticky header is missing spacing
Resolved	BUG REPORT	ovasileva	T325083 Sticky user menu is invisible but still clickable after scrolling to top
Stalled	BUG REPORT	None	T320906 Text for "You have a new talk page message" does not get larger when the page font size is made larger
In Progress		None	T303013 Indicate when search results are from redirects (sometimes)
Resolved		• EUdoh-WMF	T323987 Add supporting text in MenuItem component
Resolved		Jdlrobson	T325064 [Category] Table of contents
Resolved	BUG REPORT	None	T323174 Spacing between the collapsed ToC button and page title changes above 1000px
Resolved		None	T311160 Add indicator that appears when TOC & page tools menu have been hidden
Resolved		ovasileva	T315932 TOC should float on larger screen sizes when the "hide" button is pressed
Resolved		ovasileva	T320453 [subtask] Update styling and position of floating TOC button
Resolved		None	T325086 When navigating directly to a sub-section, the table of contents section should expand (if collapsed) and be bolded

Event Timeline

• alexhollender_WMF created this task.Oct 10 2022, 10:40 PM

• alexhollender_WMF added a parent task: T317884: [EPIC] Vector 2022 post-deployment work.

ovasileva triaged this task as Medium priority.Oct 17 2022, 8:38 PM

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

Jdlrobson moved this task from Incoming to Table of Contents on the Desktop Improvements (Vector 2022) board.Oct 18 2022, 6:00 PM

• alexhollender_WMF renamed this task from Update styling and position of floating TOC button (logged-out only) to Update styling and position of floating TOC button.Nov 8 2022, 10:23 PM

Volker_E awarded a token.Nov 9 2022, 6:12 AM

@alexhollender_WMF Given the updates to icon button styles on mobile, would it make sense to update the mock for this to be a standard 44px by 44px icon button (12px of padding for increased touch area on mobile)?

Also, what do you think about updating the position to be 12px from the top and left viewports? With a 44px by 44px button size this would align the floating Toc icon with the position of the Toc icon when collapsed into the page titlebar

@bwang, thanks for calling this stuff out:

the button should be 32x32 until we get to the tablet breakpoint, and then it will increase to 44x44
12px from the top & side of the viewports sounds good (I updated the mock in the task description)

• alexhollender_WMF added a parent task: T325064: [Category] Table of contents.Dec 13 2022, 2:12 PM

• alexhollender_WMF mentioned this in T315932: TOC should float on larger screen sizes when the "hide" button is pressed.Feb 14 2023, 5:33 PM

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

[mediawiki/skins/Vector@master] Ensure hidden TOC is visible below the page title on large viewports for anon users

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

gerritbot added a project: Patch-For-Review.Feb 15 2023, 7:15 PM

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

[mediawiki/core@master] Update mw-ui-icon-element styles to avoid conflicts with button classes

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

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

[mediawiki/skins/Vector@master] Ensure hidden TOC is visible below the page title on large viewports for anon users

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

Change 889190 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] Ensure hidden TOC is visible below the page title on large viewports for anon users

Reason:

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

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

[mediawiki/skins/Vector@master] Fix dropdown icon markup to match Codex button

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

bwang renamed this task from Update styling and position of floating TOC button to [subtask] Update styling and position of floating TOC button.Feb 16 2023, 9:37 PM

bwang edited projects, added Web-Team-Backlog (Web Team FY2022-23 Q3 Sprint 3); removed Web-Team-Backlog.

bwang added a parent task: T315932: TOC should float on larger screen sizes when the "hide" button is pressed.

bwang moved this task from Incoming to Code Review on the Web-Team-Backlog (Web Team FY2022-23 Q3 Sprint 3) board.Feb 16 2023, 10:04 PM

Change 889827 merged by jenkins-bot:

[mediawiki/core@master] Update mw-ui-icon-element styles to avoid conflicts with button classes and make default styles work with the checkbox hack

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

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Web Team FY2022-23 Q3 Sprint 3) board.Feb 17 2023, 6:28 PM

Jdlrobson claimed this task.Feb 17 2023, 6:31 PM

Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Web Team FY2022-23 Q3 Sprint 3) board.

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.24; 2023-02-20).Feb 17 2023, 7:00 PM

Jdlrobson removed Jdlrobson as the assignee of this task.Feb 18 2023, 12:52 AM

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Web Team FY2022-23 Q3 Sprint 3) board.