Decrease size and fix alignment of icon in reference preview panel
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Apr 22 2019, 5:07 PM

Description

Currently the icons are displaying at roughly 24px and are not vertically aligned with the title. They should be roughly 20px and vertically aligned.

current	corrected

Icon size

It seems like the easiest way to achieve this might be by adjusting the font-size of .mwe-popups .mw-ui-icon.

.mwe-popups .mw-ui-icon {
    font-size: 13px;
}

Layout

I'm not sure what the best approach is here. The vertical-align:middle is helping, but it seems like some additional styling is needed. For the screenshot above I added a negative margin to the icon, which seems like an odd approach.

.mwe-popups .mw-ui-icon {
    font-size: 13px;
    margin-top: -3px;
}

An alternative approach might be using display:flex on the parent element <strong class="mwe-popups-title">. This requires wrapping the title in a tag, and then using align-self: center on that and the icon element. Seems to result in the desired layout.

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Use standard size and fix alignment of generic reference icon	mediawiki/extensions/Popups	master	+2 -0

Customize query in gerrit

Related Objects

Mentioned In: T280762: Icon placement in reference previews is broken (again)

Event Timeline

• alexhollender_WMF created this task.Apr 22 2019, 5:07 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 22 2019, 5:07 PM

@Volker_E maybe you have suggestions of how to do this properly?

All of that sounds from an front-end POV shooting with a too big cannon to achieve this, Page Previews is actually featuring such smaller icon treatment in other places already, but as .mw-ui-icon:before styles. I think background-size override seems most appropriate, without knowing the exact code. Where does it live?

thiemowmde moved this task from Backlog to In preparation on the Reference Previews board.Oct 9 2019, 2:44 PM

Note: The minor style change suggested here might help with some users wondering why the headline feels like it consumes a lot of space. https://www.mediawiki.org/wiki/Topic:V9rvc0daya3p77xb

Also, let's keep in mind, that icons should be treated the same way like text and therefore rely on em based sizing equivalents to the requested px in order to be scalable by user in browser preference settings for accessibility reasons.

Change 546387 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Popups@master] Use standard size and fix alignment of generic reference icon

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

gerritbot added a project: Patch-For-Review.Oct 28 2019, 5:42 AM

Above patch results in

Volker_E added a project: UI-Standardization-Kanban.Oct 28 2019, 5:44 AM

Restricted Application added a project: UI-Standardization. · View Herald TranscriptOct 28 2019, 5:44 AM

Change 546387 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Use standard size and fix alignment of generic reference icon

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

Maintenance_bot removed a project: Patch-For-Review.Oct 30 2019, 9:10 AM

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.5; 2019-11-05).Oct 30 2019, 10:00 AM

Volker_E closed this task as Resolved.Oct 30 2019, 3:31 PM

Volker_E claimed this task.

Volker_E triaged this task as Medium priority.

awight mentioned this in T280762: Icon placement in reference previews is broken (again).Apr 21 2021, 10:30 AM

	F28729888: Screen Shot 2019-04-22 at 9.41.13 AM.png
	Apr 22 2019, 5:07 PM

	F28729883: Screen Shot 2019-04-22 at 9.30.23 AM.png
	Apr 22 2019, 5:07 PM

	F30906772: image.png
	Oct 28 2019, 5:44 AM

Decrease size and fix alignment of icon in reference preview panelClosed, ResolvedPublicActions

Description

Description

Icon size

Layout

Details

Related Objects

Event Timeline

Decrease size and fix alignment of icon in reference preview panel
Closed, ResolvedPublic
Actions