Page MenuHomePhabricator

Personal tool icons need to be put on baseline with labels
Closed, ResolvedPublic

Description

Currently, the personal tool items' small icons (ULS and user, not Notices and alerts) are somewhere floating in the space.
Expected: They should _visually_ be on baseline of connected labels.

With missing baseline amendment (current state)Proposed
Only personal tools, not language icon
  • Make icons vertically start on label baseline, ensure for both
    • anon and
    • logged-in user due to different elements carrying icons
  • Amend ULS icon position to have same left padding as user – 16px equivalent in ems instead of currently 18px

QA

  • Older browsers (IE 8+, older Safaris) have to be tested – “newer” CSS properties are used, like display: inline-block which might result in display glitches, most importantly
    • if user icon is fully visible (not cut off) and in acceptable position

There are differences by 1px in various browsers, they are caused by rendering inconsistencies x-browser and have to be accepted (for example Chrome/Yandex/Safari 5 on Windows), see also comments below.

Details

Related Gerrit Patches:
mediawiki/extensions/UniversalLanguageSelector : masterPut overhauled icon on baseline and unify code with Vector's
mediawiki/skins/Vector : masterBring personal tools' icons on baseline with label

Event Timeline

Volker_E created this task.Oct 15 2018, 7:14 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 15 2018, 7:14 PM
Volker_E updated the task description. (Show Details)Oct 15 2018, 7:21 PM
Volker_E updated the task description. (Show Details)Oct 15 2018, 7:24 PM
Volker_E updated the task description. (Show Details)

Change 467551 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Bring personal tools' icons on baseline with label

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

IE 8 has already been slightly misaligned, but improves with this patch

BeforeAfter

Edge 15 with an ULS issue due to contain instead of numeric values.

Change 467552 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/UniversalLanguageSelector@master] Put overhauled icon on baseline and unify code with Vector's

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

Exemplified with patches in Burmese my:


zh

he

Edge doesn't seem to accept em on ULS?! background-size: 14px 14px works.

Change 467551 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Bring personal tools' icons on baseline with label

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

Volker_E updated the task description. (Show Details)Oct 18 2018, 6:02 PM
Volker_E added subscribers: ABorbaWMF, Etonkovidova.

Please verify, @Etonkovidova or @ABorbaWMF!

Volker_E updated the task description. (Show Details)Oct 18 2018, 6:04 PM

@Volker_E This is how PS3 of ULS patch looks on Timeless for me:

Change 467552 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/UniversalLanguageSelector@master] Put overhauled icon on baseline and unify code with Vector's

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

@Volker_E - I checked it overall (and specifically in IE11). So far all looks good (I'll do some additional testing following your notes QA testing in the task). The screenshots below are for IE11.

  • The alignment looks a bit off only in Gujarati (guwiki).
  • the placement for a user name and the language icon is bit too tight?

Great @Etonkovidova, thanks!
The language and the user icon behave similar. We have no perfect way to care about i18n/script variety letter boxes together with vertical alignment. I'd be satisfied with similar position.

Etonkovidova closed this task as Resolved.Oct 18 2019, 8:50 PM
Etonkovidova claimed this task.

Great @Etonkovidova, thanks!
The language and the user icon behave similar. We have no perfect way to care about i18n/script variety letter boxes together with vertical alignment. I'd be satisfied with similar position.

Thanks, @Volker_E - I agree.

QA
Older browsers (IE 8+, older Safaris) have to be tested – “newer” CSS properties are used, like display: inline-block which might result in >display glitches, most importantly
if user icon is fully visible (not cut off) and in acceptable position
There are differences by 1px in various browsers, they are caused by rendering inconsistencies x-browser and have to be accepted (for example Chrome/Yandex/Safari 5 on Windows), see also comments below.

Checked in the following browsers - all looks good.

IEFFChromeYandexSafari
1169771913
10647212
911
10
9
8
Volker_E reopened this task as Open.Oct 20 2019, 5:09 AM

Beautiful case of misunderstanding. Have assumed @Etonkovidova, that you've tested my latest update of the corresponding patch. But it seems that all those tests were about the status quo :D
The recently update patch needs review by Language team members. And with and after that your ok.

Volker_E updated the task description. (Show Details)Nov 13 2019, 10:51 PM

@Etonkovidova Please give this another take. @Nikerabbit and myself have resolved this side-by-side.

Change 467552 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Put overhauled icon on baseline and unify code with Vector's

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

Etonkovidova closed this task as Resolved.Nov 14 2019, 6:34 PM

Checked in betalabs - looks acceptable (including IE11 and Edge): and confirmed as such by @Volker_E.

Volker_E claimed this task.Nov 14 2019, 6:44 PM
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)Nov 14 2019, 7:20 PM
Volker_E updated the task description. (Show Details)