Page MenuHomePhabricator

Hovercards text size, leading and whitespace management
Closed, ResolvedPublic

Assigned To
Authored By
Vibhabamba
Apr 3 2015, 1:44 AM
Referenced Files
F111488: margin.gif
Apr 11 2015, 1:04 PM
F111423: Screen_Shot_2015-04-11_at_5.48.56_PM.png
Apr 11 2015, 12:58 PM
F111432: Screen_Shot_2015-04-11_at_5.50.08_PM.png
Apr 11 2015, 12:58 PM
F111450: Screen_Shot_2015-04-11_at_5.51.52_PM.png
Apr 11 2015, 12:58 PM
F111479: Screen_Shot_2015-04-11_at_5.52.17_PM.png
Apr 11 2015, 12:58 PM
F111473: Screen_Shot_2015-04-11_at_6.00.56_PM.png
Apr 11 2015, 12:58 PM
F111454: Screen_Shot_2015-04-11_at_5.53.46_PM.png
Apr 11 2015, 12:58 PM
F111468: Screen_Shot_2015-04-11_at_6.00.42_PM.png
Apr 11 2015, 12:58 PM
Tokens
"Like" token, awarded by Quiddity.

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.

Screen_Shot_2015-04-02_at_6.33.58_PM.png (401×324 px, 91 KB)

Screen_Shot_2015-04-02_at_5.02.26_PM.png (439×338 px, 138 KB)

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

Screen_Shot_2015-04-02_at_6.38.56_PM.png (298×479 px, 164 KB)

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.
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
Screen_Shot_2015-04-11_at_5.57.58_PM.png (289×469 px, 98 KB)
Screen_Shot_2015-04-11_at_5.48.51_PM.png (282×479 px, 96 KB)
Screen_Shot_2015-04-11_at_5.58.18_PM.png (424×342 px, 110 KB)
Screen_Shot_2015-04-11_at_5.48.56_PM.png (387×328 px, 105 KB)
Screen_Shot_2015-04-11_at_5.58.26_PM.png (278×472 px, 131 KB)
Screen_Shot_2015-04-11_at_5.49.07_PM.png (281×484 px, 140 KB)
Screen_Shot_2015-04-11_at_5.58.34_PM.png (450×342 px, 93 KB)
Screen_Shot_2015-04-11_at_5.49.56_PM.png (426×329 px, 90 KB)
Screen_Shot_2015-04-11_at_5.58.42_PM.png (281×481 px, 157 KB)
Screen_Shot_2015-04-11_at_5.50.08_PM.png (285×480 px, 162 KB)
Screen_Shot_2015-04-11_at_5.58.49_PM.png (308×533 px, 84 KB)
Screen_Shot_2015-04-11_at_5.54.05_PM.png (282×477 px, 83 KB)

Chinese

OldNew
Screen_Shot_2015-04-11_at_5.59.15_PM.png (311×491 px, 111 KB)
Screen_Shot_2015-04-11_at_5.51.52_PM.png (273×466 px, 105 KB)
Screen_Shot_2015-04-11_at_5.59.28_PM.png (439×343 px, 162 KB)
Screen_Shot_2015-04-11_at_5.53.46_PM.png (419×324 px, 158 KB)
Screen_Shot_2015-04-11_at_5.59.36_PM.png (303×488 px, 145 KB)
Screen_Shot_2015-04-11_at_5.53.37_PM.png (281×477 px, 143 KB)
Screen_Shot_2015-04-11_at_5.59.43_PM.png (449×330 px, 100 KB)
Screen_Shot_2015-04-11_at_5.53.26_PM.png (400×325 px, 95 KB)
Screen_Shot_2015-04-11_at_5.59.50_PM.png (297×480 px, 162 KB)
Screen_Shot_2015-04-11_at_5.53.12_PM.png (278×475 px, 157 KB)
Screen_Shot_2015-04-11_at_5.59.58_PM.png (291×516 px, 88 KB)
Screen_Shot_2015-04-11_at_5.53.03_PM.png (273×471 px, 83 KB)

Catalan

OldNew
Screen_Shot_2015-04-11_at_6.00.19_PM.png (277×465 px, 85 KB)
Screen_Shot_2015-04-11_at_5.52.06_PM.png (275×466 px, 85 KB)
Screen_Shot_2015-04-11_at_6.00.27_PM.png (429×324 px, 149 KB)
Screen_Shot_2015-04-11_at_5.52.11_PM.png (416×323 px, 148 KB)
Screen_Shot_2015-04-11_at_6.00.34_PM.png (297×482 px, 137 KB)
Screen_Shot_2015-04-11_at_5.52.17_PM.png (282×490 px, 136 KB)
Screen_Shot_2015-04-11_at_6.00.42_PM.png (445×349 px, 95 KB)
Screen_Shot_2015-04-11_at_5.52.21_PM.png (420×324 px, 90 KB)
Screen_Shot_2015-04-11_at_6.00.49_PM.png (298×478 px, 161 KB)
Screen_Shot_2015-04-11_at_5.52.50_PM.png (272×470 px, 159 KB)
Screen_Shot_2015-04-11_at_6.00.56_PM.png (319×551 px, 84 KB)
Screen_Shot_2015-04-11_at_5.52.42_PM.png (278×470 px, 80 KB)

@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.

margin.gif (387×581 px, 33 KB)

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 subscribed.

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