Page MenuHomePhabricator

[Regression] ICONS: Not compatible with truncated text (last modified and logout button)
Closed, ResolvedPublic

Assigned To
Authored By
Jdlrobson
Sep 12 2019, 10:47 PM
Referenced Files
F30454124: T232792.png
Sep 24 2019, 2:24 PM
F30454140: T232792b.png
Sep 24 2019, 2:24 PM
F30318081: image.png
Sep 13 2019, 2:54 PM
F30313779: Screenshot 2019-09-12 at 5.14.34 PM.png
Sep 13 2019, 12:14 AM
F30313153: Screen Shot 2019-09-13 at 01.32.41.png
Sep 12 2019, 11:34 PM
F30312882: Screenshot 2019-09-12 at 4.18.28 PM.png
Sep 12 2019, 11:18 PM
F30312322: Screenshot 2019-09-12 at 3.45.49 PM.png
Sep 12 2019, 10:47 PM

Description

Problem: when truncating text that contains an icon, an elipsis shows and the text is hidden. This impacts the last modified bar and the logout button

Device: iPhone 5 emulated
Modes: Stable + AMC

Screenshot 2019-09-12 at 3.45.49 PM.png (565×338 px, 52 KB)

Screenshot 2019-09-12 at 4.18.28 PM.png (87×304 px, 9 KB)

Last modified text is only readable at desktop/tablet resolution.

Acceptance

  • CSS only solution (to avoid caching problems)

QA

Event Timeline

I didn't catch this one during local testing as it doesn't impact usernames < 5 characters long 😱

Jdlrobson renamed this task from [Regression] ICONS: Last modified bar text is not readable at mobile resolution to [Regression] ICONS: Not compatible with truncated text (last modified and logout button).Sep 12 2019, 11:04 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Jdrewniak.

Since this following is also last-modified-bar related, I'm just gonna tack this on here.

Screen Shot 2019-09-13 at 01.32.41.png (1×2 px, 742 KB)

Green bar not full width.

Change 536379 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] WIP: fix text truncation on last modified and login menu link

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

Change 536380 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Fix truncated text showing through icons & last-modified bar

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

Opened https://phabricator.wikimedia.org/T232800 for last modified background issue - not quite the same problem.

Change 536379 abandoned by Jdlrobson:
Fix text truncation on last modified and login menu link

Reason:
Jan's touches less files https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/ /536380/

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

The logout icon on Firefox is misaligned:

image.png (532×969 px, 86 KB)

Change 536380 merged by Jdlrobson:
[mediawiki/skins/MinervaNeue@master] Fix truncated text showing through icons & last-modified bar

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

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX, iPhone 5/SE

Test Artifact(s):

QA Steps:
✅ AC1: Last modified with icon and ellipsis.

T232792.png (1×640 px, 138 KB)

✅ AC2: Long username with icon and ellipsis.

T232792b.png (1×640 px, 56 KB)

Looks good, resolving