Description

Note: Possibly should be merged with T238681 which is impacted by the same problem

The clock icon + text in the last edited module are not centered vertically, they need to be moved up.

Screen Shot 2019-09-17 at 6.49.04 PM.png (365×864 px, 42 KB)

Acceptance criteria

Ensure the solution does not clip the text (see T234492)
The icon is aligned.

Developer notes

.mw-ui-icon-small elements have height 1em so this applies to the whole last modified bar. Ideally the clock icon would be a child of the bar, not the bar itself..

Given the regressions we've had with the last modified bar, I suggest we setup storybook to help testing this one.

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Last modified should have line-height 1	mediawiki/skins/MinervaNeue	master	+5 -0
	Refactor "last-modified" bar to use flexbox layout.	mediawiki/skins/MinervaNeue	master	+47 -54

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	T233172 [ICONS] last edited element alignment

Event Timeline

• alexhollender_WMF created this task.Sep 17 2019, 10:49 PM

Restricted Application removed a project: Patch-For-Review. · View Herald TranscriptSep 17 2019, 10:49 PM

• alexhollender_WMF mentioned this in T229440: [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency.Sep 17 2019, 10:51 PM

ovasileva triaged this task as Medium priority.Sep 18 2019, 9:41 AM

matmarex unsubscribed.Sep 18 2019, 2:03 PM

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

Jdlrobson moved this task from Needs triage to MinervaNeue on the Mobile board.Sep 26 2019, 12:11 AM

Change 539310 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Refactor "last-modified" bar to use flexbox layout.

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

gerritbot added a project: Patch-For-Review.Sep 26 2019, 11:33 AM

This broke cached HTML:

Screenshot 2019-09-26 at 4.25.50 PM.png (259×402 px, 17 KB)

I've minimised the damage in my follow up patch so it looks like this:

Screenshot 2019-09-26 at 4.33.50 PM.png (234×455 px, 15 KB)

@Jdlrobson thank you! 🙏

Jdlrobson moved this task from Needs Analysis to Needs Design Review on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 27 2019, 12:21 AM

Change 539310 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Refactor "last-modified" bar to use flexbox layout.

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

ReleaseTaggerBot edited projects, added MW-1.34-notes (1.34.0-wmf.25; 2019-10-01); removed MW-1.34-notes (1.34.0-wmf.23; 2019-09-17).Sep 27 2019, 1:00 AM

Checked on Beta. The text is still sitting about a pixel too low. The clock and chevron icons are aligned properly.

Screen Shot 2019-09-30 at 10.25.41 AM.png (698×1 px, 48 KB)

MBinder_WMF edited projects, added Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2); removed Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1).Sep 30 2019, 5:19 PM

MBinder_WMF moved this task from Needs Analysis to Needs Code Review on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.Sep 30 2019, 5:24 PM

MBinder_WMF moved this task from Needs Code Review to Needs More Work on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.Sep 30 2019, 6:23 PM

Change 539928 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Drop content class from last modified bar

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

Jdlrobson moved this task from Doing to Needs Code Review on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.Sep 30 2019, 6:28 PM

Change 539979 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Last modified should have line-height 1

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

Jdlrobson moved this task from Needs Code Review to Needs Design Review on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.Sep 30 2019, 10:15 PM

Change 539979 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Last modified should have line-height 1

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

@Jdlrobson the alignment is correct :) but the bottoms of some letters are getting clipped, which seems to be related to overflow: hidden on the last-modified-bar__text class.

If you want to resolve this task (since it's about alignment) and make a new one for the clipping that's cool with me. Not sure what makes the most sense.

In T233172#5547605, @alexhollender wrote:

@Jdlrobson the alignment is correct :) but the bottoms of some letters are getting clipped, which seems to be related to overflow: hidden on the last-modified-bar__text class.

If you want to resolve this task (since it's about alignment) and make a new one for the clipping that's cool with me. Not sure what makes the most sense.

That bug is captured in https://phabricator.wikimedia.org/T234492 and I have spent the week arguing about the best way to solve it :)

So that (line-height: 1) might, no, will have even worse outcome in languages like Burmese. Should have thought about this, as we've run into issues in OOUI and circumvented them by reducing padding, instead it should provide
line-height: 18px equiv minimum.

Continuing in T234492…

Resolving this one then

The patch that fixed this was reverted as it caused T234492

Jdlrobson removed Jdlrobson as the assignee of this task.Oct 7 2019, 11:32 PM

Jdlrobson removed a project: Patch-For-Review.

Jdlrobson mentioned this in T234492: Descenders of text in last modified get clipped.

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Ready for Signoff to Needs More Work on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.

Jdlrobson moved this task from Needs More Work to Needs Analysis on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.Oct 8 2019, 11:06 PM

Jdlrobson moved this task from Backlog to Misc on the MobileFrontend (MobileFrontend and MinervaNeue architecture) board.Oct 28 2019, 9:47 PM

ovasileva edited projects, added Web-Team-Backlog-Archived; removed Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2).Nov 7 2019, 6:42 PM

ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog-Archived board.

Jdlrobson removed a project: MW-1.34-notes (1.34.0-wmf.25; 2019-10-01).Nov 20 2019, 7:57 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson mentioned this in T238681: History icon not completely visible in smaller screen devices.

@alexhollender T238681 fix possibly also fixed this?

In T233172#5719833, @Jdlrobson wrote:

@alexhollender T238681 fix possibly also fixed this?

It does appear to be fixed

Screen Shot 2019-12-09 at 12.24.03 PM.png (272×756 px, 21 KB)

Jdlrobson moved this task from Needs Analysis to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q2) board.Dec 10 2019, 6:51 PM

ovasileva closed this task as Resolved.Dec 11 2019, 5:58 PM

ovasileva claimed this task.

ovasileva updated the task description. (Show Details)

	F31464045: Screen Shot 2019-12-09 at 12.24.03 PM.png
	Dec 9 2019, 5:32 PM

	F30509974: Screen Shot 2019-09-30 at 10.25.41 AM.png
	Sep 30 2019, 2:26 PM

	F30477853: Screenshot 2019-09-26 at 4.33.50 PM.png
	Sep 26 2019, 11:35 PM

	F30477718: Screenshot 2019-09-26 at 4.25.50 PM.png
	Sep 26 2019, 11:35 PM

	F30383474: Screen Shot 2019-09-17 at 6.49.04 PM.png
	Sep 17 2019, 10:49 PM

	F30543818: image.png
	Oct 4 2019, 4:29 PM

[ICONS] last edited element alignmentClosed, ResolvedPublicActions