Page MenuHomePhabricator

[ICONS] reference drawer icon and alignment
Closed, ResolvedPublic3 Estimate Story Points

Description

There are four issues with the current references drawer:

    1. the references icon is rendering at 13px due to a font-size: 0.75em; applying to the mw-ui-icon element - that font-size should apply to the span containing the text CITATION
  1. the mw-ui-icon-small doesn't seem compatible with the mw-ui-icon-before selector and the icon renders at 20x20 not 16x16
    1. the references icon and the word citation are not vertically centered to each other
    2. the X icon is outside of the bounds of the containing element

Developer notes

  • Move the font-size styling to the span element containing Citation text
  • Explore issue with mw-ui-icon-small combined with mw-ui-icon-before
  • Make use of mw-ui-icon-flush-top where necessary

QA steps

  • The icon should render at 16x16.
  • The text should vertically align

QA Results

ACStatusDetails
1T233152#5576136
2T233152#5576136

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterModifying top-padding on references drawer
mediawiki/extensions/MobileFrontend : masterRefactor reference drawer header with new icon classes

Event Timeline

Jdlrobson updated the task description. (Show Details)Sep 17 2019, 10:30 PM
Jdlrobson updated the task description. (Show Details)
ovasileva triaged this task as Medium priority.Sep 18 2019, 9:39 AM
ovasileva set the point value for this task to 3.Sep 19 2019, 5:50 PM

Change 539207 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/MobileFrontend@master] Refactor reference drawer header with new icon classes

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

The patch above aligns the header as such that the "x" is in the corner, inside the padding and the word "citation" is vertically middle-aligned with the bookmark icon. The bookmark icon however, isn't perfectly aligned with the edge of the padding because the SVG doesn't touch the edges of its canvas.

@Jdrewniak From your screenshot above, I wonder about the (mis-)alignment of the close icon with the reference icon.

Jdlrobson moved this task from Needs triage to MinervaNeue on the Mobile board.Sep 26 2019, 12:12 AM

Change 539207 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Refactor reference drawer header with new icon classes

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

@Jdrewniak as Volker mentioned the X is not vertically aligned with the citation icon and word citation. In part I'm reluctant to spend more time on this, but if it's an easy fix I figure we might as well do it while we have the chance. Feel free to move this to QA or Signoff if it's not an easy fix.

Jdrewniak added a comment.EditedSep 30 2019, 2:13 PM

@alexhollender @Volker_E Sorry I didn't get back on that, but yeah I think some of the negative margins used to position the icon flush-right and flush-top, combined with fact the icons don't go edge to edge make it look a bit weird, but I don't see an easy fix here :/

We could remove the flush-top, which would centre the icon but it'll add padding to the top of the box, and if we remove the padding, then we'll only have a 16x16 hit area.

after syncing with Jon, realized we can align this be removing the .flush-top and adding 10px top-padding to the container instead of 20px

Change 539967 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/MobileFrontend@master] Modifying top-padding on references drawer

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

Change 539967 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Modifying top-padding on references drawer

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

Edtadros claimed this task.Oct 14 2019, 5:08 PM
Edtadros reassigned this task from Edtadros to ovasileva.Oct 15 2019, 4:50 PM

Test Result:Production

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

On enwiki:

✅ AC1: The icon should render at 16x16.
✅ AC2: The text should vertically align

Edtadros updated the task description. (Show Details)Oct 15 2019, 4:51 PM
ovasileva closed this task as Resolved.Oct 16 2019, 12:51 PM
ovasileva updated the task description. (Show Details)