Page MenuHomePhabricator

[Sticky header] shift search box 8px
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

Can we shift search box 8px to the left so that the search icon button lines up with the search icon in the input? I've updated the prototype so it can be used as an example. This is what we want:

QA

  • Verify that search box in sticky header on beta works similarly to the prototype in the description

QA Results - Beta

ACStatusDetails
1T296318#7556929 this is a pass per T296318#7560746

QA Results - Prod

ACStatusDetails
1T296318#7561788

Event Timeline

LGoto triaged this task as High priority.Nov 23 2021, 6:40 PM
LGoto moved this task from Incoming to Sticky header on the Desktop Improvements board.

Change 741728 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Update search box margin in sticky header.

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

Change 741728 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update search box margin in sticky header.

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

cjming moved this task from Code Review to QA on the Readers-Web-Backlog (Kanbanana-FY-2021-22) board.
cjming updated the task description. (Show Details)
Edtadros added a subscriber: Edtadros.

Test Result - Beta

Status: ❓ Need More Info
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

❓ AC1: search icon button lines up with the search icon in the input, see task description example.
@alexhollender The search icon seems to shift to the right momentarily before it goes back to the correct position. Is this passable?

Screen Recording 2021-12-08 at 9.27.45 AM.mov.gif (298×868 px, 217 KB)

Per discussion in standup, this is passable.

Without taking a closer look at the code, the shifting could be from the fact that we need the search form to be focused for the icons to be aligned, and that when you click on the search icon there is a small moment where the form is unfocused.

If that's the issue, a potential solution could be to provide CSS overrides that will always make the sticky header search input have the correct spacing even when unfocused.

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

[mediawiki/skins/Vector@master] Reduce layout shift when toggling sticky header search

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/c2807709ae/w/

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: search icon button lines up with the search icon in the input, see task description example.

Screen Recording 2021-12-09 at 4.12.44 PM.mov.gif (384×868 px, 175 KB)

Test wiki created on Patch demo by NRay (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/b7532ccd6a/w/

Test wiki on Patch demo by NRay (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/b7532ccd6a/w/

Test wiki created on Patch demo by NRay (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/415b242163/w/

Test wiki on Patch demo by NRay (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/415b242163/w/

Test wiki created on Patch demo by NRay (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/2e2d968398/w/

Test wiki on Patch demo by NRay (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/2e2d968398/w/

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/c2807709ae/w/