Page MenuHomePhabricator

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


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

image.png (580×1 px, 135 KB)

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


Event Timeline

ovasileva triaged this task as Medium priority.Sep 18 2019, 9:39 AM

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

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.

Screen Shot 2019-09-26 at 00.52.28.png (580×1 px, 151 KB)

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

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

@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.

Screen Shot 2019-09-30 at 10.00.48 AM.png (682×1 px, 109 KB)

@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.

Screen Shot 2019-09-30 at 16.17.17.png (372×1 px, 98 KB)

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

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

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

T233152.png (158×379 px, 18 KB)

ovasileva updated the task description. (Show Details)