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

Assigned To

Authored By

	Jdlrobson
	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

Verify the solution works on cached HTML: http://readingwebstaging.wmflabs.org/w/extensions/MobileFrontend/Albert.html (make sure the Minerva and MobileFrontend repos are up to date when testing.
Find an article edited by someone with a long name on stable - does the last modified bar show with truncation ?

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Fix truncated text showing through icons & last-modified bar	mediawiki/skins/MinervaNeue	master	+30 -15
	Fix text truncation on last modified and login menu link	mediawiki/skins/MinervaNeue	master	+19 -17

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T226562 AMC - display labels for toolbar actions on larger screens
Resolved	• alexhollender_WMF	T229440 [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency
Resolved	ovasileva	T232792 [Regression] ICONS: Not compatible with truncated text (last modified and logout button)

Event Timeline

Jdlrobson created this task.Sep 12 2019, 10:47 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 12 2019, 10:47 PM

Jdlrobson triaged this task as High priority.Sep 12 2019, 10:47 PM

Jdlrobson updated the task description. (Show Details)Sep 12 2019, 10:51 PM

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 merged a task: T232791: [Regression] ICONS: Logout has styling issues.

Jdlrobson added a subscriber: Jdrewniak.

Jdlrobson updated the task description. (Show Details)Sep 12 2019, 11:18 PM

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

gerritbot added a project: Patch-For-Review.Sep 12 2019, 11:38 PM

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.

Jdlrobson moved this task from Upcoming to Needs Code Review on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 12 2019, 11:52 PM

Jdlrobson mentioned this in T229440: [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency.Sep 13 2019, 12:00 AM

Screenshot 2019-09-12 at 5.14.34 PM.png (107×344 px, 8 KB)

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

phuedx added a parent task: T229440: [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency.Sep 13 2019, 9:12 AM

The logout icon on Firefox is misaligned:

Jdlrobson assigned this task to • alexhollender_WMF.Sep 13 2019, 4:09 PM

Jdlrobson moved this task from Needs Code Review to Needs Design Review on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.

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

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

Restricted Repository Identity mentioned this in rSKIN4cfdb1a9b1af: Update git submodules.Sep 13 2019, 9:55 PM

Maintenance_bot removed a project: Patch-For-Review.Sep 13 2019, 10:10 PM

@Edtadros this seems to be fixed

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.

✅ AC2: Long username with icon and ellipsis.

Masumrezarock100 subscribed.Sep 24 2019, 2:41 PM

Looks good, resolving

	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

	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

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