Page MenuHomePhabricator

Clean up the technical debt and inconsistencies of notification icon (Echo badge) positioning in different skins
Open, LowPublic

Description

Motivation

Visual: notification icons are the odd one in the header with most skins. Bit misaligned or over-sized, different focus outline (and slightly transparent).
Technical: changing alignment (margin, padding, font-size) of menu items in the header is very likely to change positioning of the notification icons in significantly different ways than menu items. The icons should behave consistently with menu items.

Requirements
  • Notification button sizes are proportional to the header and menu items (Modern, MonoBook).
  • Button sizes are responsive to font-size changes (all skins).
  • Buttons' focus outline can be restored to browser default, consistent with any other link's behavior (all skins).
Related

This work started in the Vector skin: T256893: Move the PersonalMenu to the header
Modern skin: T246931: Modern echo icons too high up

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Re: modern, see also T246931

How do you feel about (counter color not the actual):

Demian removed a project: Modern.
Demian moved this task from Backlog to In progress on the Notifications board.

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

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

[Resetting assignee due to inactive user account]