[ICONS] clear search icon alignment
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Sep 17 2019, 8:43 PM

Description

The clear search (X in the gray circle) icon is currently too high by about 1-2px.

Screen Shot 2019-09-17 at 4.42.55 PM.png (670×914 px, 139 KB)

Developer notes

The top positioning is 0.5em but needs to be 0.55em. Ideally this is calculated via variables - it should be the padding top above the input, half the height of the input and then minus half the icon size.

Do not hardcode this to a specific position (e.g. top: .55em). It should account for the user's browser font size and still be vertically centered

Details

Subject	Repo	Branch	Lines +/-
Overlay header vertical padding to fix clear search alignment	mediawiki/skins/MinervaNeue	master	+7 -2
Move search element's clear icon into form container	mediawiki/extensions/MobileFrontend	master	+15 -12
Vertically center clear icon within search form element	mediawiki/skins/MinervaNeue	master	+6 -3
Clear search alignment	mediawiki/skins/MinervaNeue	master	+15 -7

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	T233156 [ICONS] clear search icon alignment

Event Timeline

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

Jdlrobson added a comment.Sep 17 2019, 9:03 PM

This comment was removed by Jdlrobson.

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

Jdlrobson updated the task description. (Show Details)Sep 18 2019, 4:05 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.

ovasileva set the point value for this task to 2.Sep 19 2019, 6:23 PM

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

• nray updated the task description. (Show Details)Sep 19 2019, 6:27 PM

• nray updated the task description. (Show Details)

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

Change 538929 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Clear search alignment

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

gerritbot added a project: Patch-For-Review.Sep 24 2019, 5:23 PM

Jdlrobson claimed this task.Sep 24 2019, 5:23 PM

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

Jdlrobson moved this task from Needs Code Review to Needs More Work on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 24 2019, 11:33 PM

Jdlrobson moved this task from Needs More Work to Needs Code Review on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 25 2019, 12:21 AM

Change 538929 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Clear search alignment

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

Jdlrobson reassigned this task from Jdlrobson to • alexhollender_WMF.Sep 25 2019, 11:00 PM

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

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

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

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

Checked on Beta. Now it's 1-2px too low 🤦‍♂️

Screen Shot 2019-09-30 at 10.28.59 AM.png (484×1 px, 24 KB)

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 30 2019, 5:10 PM

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

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

Jdlrobson moved this task from Doing to Needs Code Review on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.Sep 30 2019, 6:19 PM

Change 539926 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Overlay header vertical padding to fix clear search alignment

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

gerritbot added a project: Patch-For-Review.Sep 30 2019, 6:19 PM

Change 539963 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Move search element's clear icon into form container

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

Change 539962 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/MinervaNeue@master] Vertically center clear icon within form element

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

Change 539962 merged by Jdlrobson:
[mediawiki/skins/MinervaNeue@master] Vertically center clear icon within search form element

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

Change 539963 merged by Jdlrobson:
[mediawiki/extensions/MobileFrontend@master] Move search element's clear icon into form container

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

Jdlrobson moved this task from Needs Code Review to Needs Design Review on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.Oct 1 2019, 2:52 PM

Change 539926 abandoned by Jdlrobson:
Overlay header vertical padding to fix clear search alignment

Reason:
Fixed elsewhere

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

Maintenance_bot removed a project: Patch-For-Review.Oct 1 2019, 10:11 PM

woohoo!

	F30543784: Screen Shot 2019-10-04 at 12.14.18 PM.png
	Oct 4 2019, 4:14 PM

	F30509979: Screen Shot 2019-09-30 at 10.28.59 AM.png
	Sep 30 2019, 2:30 PM

	F30382154: Screen Shot 2019-09-17 at 4.42.55 PM.png
	Sep 17 2019, 8:43 PM

[ICONS] clear search icon alignmentClosed, ResolvedPublic2 Estimated Story PointsActions