Page MenuHomePhabricator

Hovercards text size, leading and whitespace management
Closed, ResolvedPublic

Description

Reduce the top padding between text and image in the portrait hovercard.
This will make an additional line show up. Further, it will solve the 'run in' issue on Greek Wikipedia, which is critical.


Setup text area such that 2 more lines are visible in the landscape card.

Request more lines from text extract, so that after eliminating parenthesis, the first sentence can be read in 90% cases.
Any clearance from Ori is fine.

Event Timeline

Vibhabamba assigned this task to Prtksxna.
Vibhabamba raised the priority of this task from to Needs Triage.
Vibhabamba updated the task description. (Show Details)
Vibhabamba added a project: Page-Previews.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 3 2015, 1:44 AM
Vibhabamba set Security to None.
Vibhabamba updated the task description. (Show Details)

prtksxna - Regarding Step 1:
We need to reduce top padding and maybe adjust leading so we can accommodate one more line in portrait hovercard.
This might be easiest accomplished on a hangout together.

it will solve the 'run in' issue on Greek Wikipedia

Could you provide a link for this issue?

Request more lines from text extract, so that after eliminating parenthesis, the first sentence can be read in 90% cases.

Discussing this in T93160#1177416.

To see the affect of the reduced font size and leading you can add the following code to your common.css

/* Hovercards - T94957 */
.mwe-popups {
	font-size: 14px;
	line-height: 20px;
}
 
.mwe-popups.mwe-popups-is-tall .mwe-popups-extract {
	height: 142px;
}

Adding screenshots from English, Chinese and Catalan Wikipedias.


English

OldNew

Chinese

OldNew

Catalan

OldNew

@Vibhabamba, I am sorry for the delay in providing these.

@Vibhabamba had also asked me to reduce the top margin of the excerpt when the image is landscape.

I had some issues when I was trying to do this. Will give an update on this soon.

@Prtksxna The screenshots with additional lines of text, reduced font size and leading look pretty good.

@Prtksxna That margin you highlighted looks like its 36px in height and it can go down to 29px, so reduce it by 5px or so and please post some screenshots? Thank you so much for posting old and new screenshots. That was super helpful!

@Jaredzimmerman - Please take a look and let us know if you have any comments.

@Prtksxna That margin you highlighted looks like its 36px in height and it can go down to 29px, so reduce it by 5px or so and please post some screenshots? Thank you so much for posting old and new screenshots. That was super helpful!

As I mentioned in T94957#1200996, it'll take a while before I can show you those screenshots. Some time next week for sure.

@Prtksxna Thats totally fine. Fixing the extra margin is *not critical* for release, that can be fixed next week.

Change 202627 had a related patch set uploaded (by Prtksxna):
Update font-size and line-height

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

@Jaredzimmerman - Please take a look and let us know if you have any comments.

@Jaredzimmerman-WMF (re-ping with correct username, in case that helps email-filters etc. :)

This looks good everyone, I had concerns but seeing the images all looks well.

Change 202627 merged by jenkins-bot:
Update font-size and line-height

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

Change 204796 had a related patch set uploaded (by Ori.livneh):
Update font-size and line-height

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

Change 204796 merged by Ori.livneh:
Update font-size and line-height

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

Change 204797 had a related patch set uploaded (by Ori.livneh):
Update font-size and line-height

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

Change 204797 merged by Ori.livneh:
Update font-size and line-height

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

Jdlrobson closed this task as Resolved.Sep 23 2015, 7:04 PM
Jdlrobson added a subscriber: Jdlrobson.

I'm assuming this is fixed as there are lots of patches linked to this. Please reopen if not.