Page MenuHomePhabricator

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

Description

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 & positionupdated styling & position
image.png (3×2 px, 958 KB)
image.png (1×1 px, 321 KB)

AC

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

QA Results - Beta

ACStatusDetails
1T320453#8658988

QA Results - Prod

ACStatusDetails
1T320453#8658995

Related Objects

StatusSubtypeAssignedTask
Openovasileva
Openovasileva
DeclinedNone
OpenBUG REPORTNone
ResolvedBUG REPORTovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedMabualruz
DuplicateSpikeNone
ResolvedBUG REPORTppelberg
ResolvedBUG REPORTTheresNoTime
Resolvedovasileva
Resolvedovasileva
OpenNone
Resolved alexhollender_WMF
ResolvedVolker_E
Resolved alexhollender_WMF
ResolvedJdlrobson
ResolvedBUG REPORTJdlrobson
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
InvalidNone
ResolvedJdlrobson
OpenNone
OpenNone
OpenJdlrobson
Resolvedovasileva
Resolvedovasileva
Resolved KieranMcCann
OpenNone
Resolvedovasileva
Resolvedovasileva
OpenNone
ResolvedJdlrobson
ResolvedBUG REPORTovasileva
OpenBUG REPORTNone
OpenNone
Resolvedovasileva
ResolvedNone
OpenNone
Resolvedovasileva
ResolvedBUG REPORTovasileva
OpenBUG REPORTNone
In ProgressNone
Resolved EUdoh-WMF
ResolvedJdlrobson
ResolvedBUG REPORTNone
ResolvedNone
Resolvedovasileva
Resolvedovasileva
ResolvedNone

Event Timeline

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.
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

@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)

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

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

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

Change 889828 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Shows TOC below page title for anon users

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

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

[mediawiki/core@master] Update mw-ui-icon-element line height

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

Change 890889 merged by jenkins-bot:

[mediawiki/core@master] Update mw-ui-icon-element line height

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

Change 889859 merged by jenkins-bot:

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

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

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

Screenshot 2023-03-01 at 3.57.52 PM.png (890×773 px, 304 KB)

Edtadros subscribed.

Test Result - Prod

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

Test Artifact(s):

QA Steps

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

Screenshot 2023-03-01 at 3.59.30 PM.png (885×776 px, 272 KB)