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

Assigned To

Authored By

	• alexhollender_WMF
	Sep 17 2019, 8:31 PM

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

AC	Status	Details
1	✅	T233152#5576136
2	✅	T233152#5576136

Details

	Subject	Repo	Branch	Lines +/-
	Modifying top-padding on references drawer	mediawiki/extensions/MobileFrontend	master	+4 -4
	Refactor reference drawer header with new icon classes	mediawiki/extensions/MobileFrontend	master	+29 -39

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T226562 AMC - display labels for toolbar actions on larger screens
Resolved	• alexhollender_WMF	T229440 [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency
Resolved	ovasileva	T233152 [ICONS] reference drawer icon and alignment

Event Timeline

• alexhollender_WMF created this task.Sep 17 2019, 8:31 PM

Jdlrobson updated the task description. (Show Details)Sep 17 2019, 10:30 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 17 2019, 10:37 PM

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

ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.

Jdrewniak moved this task from Ready for Development to Doing on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 24 2019, 11:24 PM

Jdlrobson reassigned this task from • alexhollender_WMF to Jdrewniak.Sep 24 2019, 11:36 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

gerritbot added a project: Patch-For-Review.Sep 25 2019, 10:48 PM

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.

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.25; 2019-10-01).Sep 27 2019, 12:00 AM

Maintenance_bot removed a project: Patch-For-Review.Sep 27 2019, 12:10 AM

Jdlrobson reassigned this task from Jdrewniak to • alexhollender_WMF.Sep 27 2019, 12:20 AM

Jdlrobson moved this task from Doing to Needs Design Review on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.

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

MBinder_WMF edited projects, added Web-Team-Backlog (Kanbanana-2019-20-Q2); removed Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1).Sep 30 2019, 5:19 PM

MBinder_WMF moved this task from Needs Analysis to Needs More Work on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Sep 30 2019, 5:27 PM

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

gerritbot added a project: Patch-For-Review.Sep 30 2019, 8:51 PM

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

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

Jdlrobson moved this task from Needs More Work to Needs Design Review on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Sep 30 2019, 9:39 PM

Maintenance_bot removed a project: Patch-For-Review.Sep 30 2019, 10:10 PM

looks good

Screen Shot 2019-10-04 at 12.50.04 PM.png (520×1 px, 48 KB)

ovasileva moved this task from Ready for Signoff to Needs QA on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 7 2019, 10:15 AM

Edtadros claimed this task.Oct 14 2019, 5:08 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)

	F30543863: Screen Shot 2019-10-04 at 12.50.04 PM.png
	Oct 4 2019, 4:50 PM

	F30509958: Screen Shot 2019-09-30 at 16.17.17.png
	Sep 30 2019, 2:18 PM

	F30509929: Screen Shot 2019-09-30 at 10.00.48 AM.png
	Sep 30 2019, 2:01 PM

	F30468574: Screen Shot 2019-09-26 at 00.52.28.png
	Sep 25 2019, 11:12 PM

[ICONS] reference drawer icon and alignmentClosed, ResolvedPublic3 Estimated Story PointsActions