Page MenuHomePhabricator

Modern echo icons too high up
Closed, ResolvedPublicBUG REPORT

Description

Since around April 2018, the echo icons in the Modern skin have been slightly elevated. Viewing any page as a logged-in user should do it, for an example:

Setting .mw-echo-notifications-badge { top: 0; } does the trick.

Event Timeline

Restricted Application added a project: Growth-Team. · View Herald TranscriptMar 4 2020, 7:16 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Adding .mw-echo-notifications-badge { top: 0; } indeed centers the icons, but if you have any notifications pending, the number is now cut off.

BeforeAfter

One could adjust the :after although I'm not certain what folks would consider appropriate there, given the sizes are fairly equivalent. Further left (65%?) and a bit down?

Change 609806 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Modern@master] Modern skin: Fix Echo icon, counter size and alignment with menu items.

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

Looks great to me! Not sure about usability, etc., but then again it's modern not vector so might be fine.

It looks like there's an uneven overlap on the bell and inbox, is there a chance that'd be even more pronounced with double-digits?

It looks like there's an uneven overlap on the bell and inbox, is there a chance that'd be even more pronounced with double-digits?

The uneven overlap is present in all skins, but more pronounced in this aligment on the side. In Timeless it would look like:

I haven't looked into that particular aspect yet. Could be refined, if you will. It's adjusted by the right: -5%; rule on the :after pseudo-element of the badge. If you choose another number you prefer, I'll add that. You can choose different values for the two icons. The whole selector is: #pt-notifications-alert .mw-echo-notifications-badge:after, #pt-notifications-notice .mw-echo-notifications-badge:after

Change 609806 merged by jenkins-bot:
[mediawiki/skins/Modern@master] Modern skin: Fix Echo icon, counter size and alignment with menu items.

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

Jdlrobson closed this task as Resolved.Aug 6 2020, 4:39 PM

Change 637834 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Modern@master] Notification icons: don't show screen reader text when hovering

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

Demian reopened this task as Open.Sat, Oct 31, 2:50 PM
Demian triaged this task as Low priority.
Amorymeltzer added a comment.EditedSat, Oct 31, 5:01 PM

@Demian I filed that as T265832, I think it's related to T248751 not this, based on when it started to appear.

Demian closed this task as Resolved.Sat, Oct 31, 5:32 PM
Demian moved this task from Awaiting Review to Done on the User-Demian board.

@Demian I filed that as T265832, I think it's related to T248751 not this, based on when it started to appear.

Thank you for filing that ticket, Amorymeltzer! It was simpler for me to register the patch here, but now I'll move the patch.