Page MenuHomePhabricator

Overlay icons misaligned in alpha
Closed, ResolvedPublic

Description

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterFix icons
mediawiki/core : masterRevert "Remove the 'top' definition from .mw-ui-icon-element:before"

Event Timeline

Jdlrobson created this task.Jan 7 2015, 7:01 PM
Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: Readers-Web-Backlog.
Jdlrobson added subscribers: Jdlrobson, Prtksxna.

Change 183298 had a related patch set uploaded (by Jdlrobson):
Revert "Remove the 'top' definition from .mw-ui-icon-element:before"

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

Patch-For-Review

Note this also effects the hamburger icon @Maryana when you close the overlay. @Prtksxna any idea how to fix this?

Problematic rule in mobile is:
.overlay-header .overlay-action a, .overlay-header button {
min-height: 3.35em;
}

Prtksxna added a comment.EditedJan 8 2015, 10:29 AM

There isn't any documentation on the styleguide about using the mw-ui-icon class with a button. Changing the element to div immediately solves the problem. So I tried to make a standalone button with the class to see if the problem persists, it does not. mw-ui-icon when correctly used supports both divs and buttons.

Which would mean that there are other styles that are overriding it. Jumping into the inspector I found a rule that sets the pseudo element's height to 100% but I couldn't find the corresponding code that adds this. Unchecking that rule solves the problem too.

I am not familiar enough with the mobile front-end code to be able to find where it might be, though I tried. Hope this helps, @Jdlrobson!

Jdlrobson claimed this task.Jan 8 2015, 5:33 PM

Awesome. I think I can work this out now..

Change 183632 had a related patch set uploaded (by Jdlrobson):
Fix icons

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

Patch-For-Review

Change 183298 abandoned by Jdlrobson:
Revert "Remove the 'top' definition from .mw-ui-icon-element:before"

Reason:
Seems I found another fix thanks to Prateek's pointer -> https://gerrit.wikimedia.org/r/183632

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

Change 183632 merged by jenkins-bot:
Fix icons

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

Jdlrobson closed this task as Resolved.Jan 14 2015, 7:24 PM