Page MenuHomePhabricator

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

Description

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.

currentcorrected
Screen Shot 2019-04-22 at 9.30.23 AM.png (482×772 px, 185 KB)
Screen Shot 2019-04-22 at 9.41.13 AM.png (452×740 px, 175 KB)
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.

Event Timeline

@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 added subscribers: thiemowmde, WMDE-Fisch.

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

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

Volker_E claimed this task.
Volker_E triaged this task as Medium priority.