Page MenuHomePhabricator

Reduce spacing of icons in mobile header
Closed, ResolvedPublic

Description

NOTE: to reduce complexity this task should not be worked on until T229440 is complete
Description

Reduce the spacing between the icons in the header for both AMC and non-AMC modes, without reducing the size of the icons themselves.

Designs
currentfixedfixed (no markup)
AMC
image.png (714×377 px, 210 KB)
image.png (720×384 px, 116 KB)
image.png (669×377 px, 111 KB)
logged-in
image.png (714×377 px, 114 KB)
image.png (720×384 px, 211 KB)
image.png (669×377 px, 208 KB)

QA Results

ACStatusDetails
1T229447#5516154
2T229447#5516154

Event Timeline

alexhollender_WMF renamed this task from Fix icon spacing to Fix spacing of icons in mobile header.Jul 31 2019, 4:56 PM
alexhollender_WMF renamed this task from Fix spacing of icons in mobile header to Reduce spacing of icons in mobile header.
alexhollender_WMF created this task.

cc @Volker_E this could be a good opportunity to make changes to mw-ui-icon

Jdlrobson triaged this task as Medium priority.Aug 2 2019, 4:56 PM

Change 531558 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] WIP: Change the default behaviour for mw-ui-icon

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

Change 533111 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Remove icon hacks

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

@alexhollender I notice the mockups also indicate that you'd like the Beta Cluster label to move over a bit. I've gone ahead and implemented that change (diff 397002).

capture-2.png (216×724 px, 15 KB)

capture.png (238×746 px, 17 KB)

In kick off we agreed to push this to the backlog. We will pull it back in when T229440 is ready to QA

@Jdlrobson @Jdrewniak this is fixed. Currently the icons are slightly closer together than in the spec, however once we increase the icon areas to 44px (T230033) then it will be all set. I don't think we should do any remaining work here.

en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_MobileOptions&success(iPhone 6_7_8).png (1×750 px, 143 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Selenium_diff_test_0.6092330460615769(iPhone 6_7_8) (1).png (1×750 px, 116 KB)
This comment was removed by Edtadros.
Edtadros subscribed.

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX, Galaxy S5, iPad Pro, Google Pixel 2, Galaxy Note 3

Test Artifact(s):
✅ AC1 - Icon spacing reduced Logged in ACM On

T229447.png (2×1 px, 252 KB)

✅ AC2 - Icon spacing reduced Logged in ACM Off

T230323b.png (2×1 px, 242 KB)

cc @Volker_E this could be a good opportunity to make changes to mw-ui-icon

And it was 🎉– thanks everyone involved.