| • alexhollender_WMF | |
| Nov 23 2021, 6:20 PM |
| F34873365: Screen Recording 2021-12-09 at 4.12.44 PM.mov.gif | |
| Dec 10 2021, 12:14 AM |
| F34863048: Screen Recording 2021-12-08 at 9.27.45 AM.mov.gif | |
| Dec 8 2021, 5:31 PM |
| F34762300: search icon alignment.webm | |
| Nov 23 2021, 6:20 PM |
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:
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T296318#7556929 this is a pass per T296318#7560746 |
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T296318#7561788 |
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Update search box margin in sticky header. | mediawiki/skins/Vector | master | +13 -2 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | ovasileva | T283505 [EPIC] Fixed "sticky" site header | |||
| Resolved | ovasileva | T296318 [Sticky header] shift search box 8px |
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.
Change 741728 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Update search box margin in sticky header.
Status: ❓ Need More Info
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA
Test Artifact(s):
❓ 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?
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
Status: ✅ Pass
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA
Test Artifact(s):
✅ AC1: search icon button lines up with the search icon in the input, see task description example.
Test wiki on Patch demo by NRay (WMF) using patch(es) linked to this task was deleted:
Test wiki on Patch demo by NRay (WMF) using patch(es) linked to this task was deleted:
Resolving this. Follow-up on the shift will be in T297531: Sticky header search component shifts position when search is toggled
Test wiki on Patch demo by NRay (WMF) using patch(es) linked to this task was deleted:
Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted: