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
image.png (70×1 px, 24 KB)
Only personal tools, not language icon
image.png (182×1 px, 41 KB)
image.png (82×1 px, 20 KB)
  • 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.

Event Timeline

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
image.png (80×436 px, 18 KB)
image.png (280×618 px, 75 KB)

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

image.png (286×524 px, 62 KB)

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:

image.png (164×1 px, 68 KB)

zh
image.png (236×1 px, 46 KB)

he
image.png (184×1 px, 40 KB)

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 This is how PS3 of ULS patch looks on Timeless for me:

image.png (603×337 px, 47 KB)

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?
IE11 ULS zh.PNG (55×554 px, 5 KB)
IE11 personal toolbar zh.PNG (102×578 px, 8 KB)
IE11 personal toolbar ULS.PNG (54×688 px, 5 KB)
IE11 personal tool bar hewiki.PNG (105×697 px, 6 KB)
IE11 personal toolbar gu.PNG (106×629 px, 7 KB)

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

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.

@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

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

Screen Shot 2019-11-14 at 1.14.56 PM.png (73×546 px, 16 KB)

Screen Shot 2019-11-13 at 9.45.27 PM.png (133×548 px, 29 KB)

Volker_E updated the task description. (Show Details)