Page MenuHomePhabricator

PageList descriptions too small font and line height
Closed, ResolvedPublic

Assigned To
Authored By
Volker_E
Sep 6 2019, 9:51 PM
Referenced Files
F34006251: en.m.wikipedia.org_wiki_Main_Page(iPhone 11 Pro Max).png
Jan 18 2021, 5:10 AM
F34006253: Screen Shot 2021-01-17 at 9.08.08 PM.png
Jan 18 2021, 5:10 AM
F34006246: Screen Shot 2021-01-17 at 9.04.42 PM.png
Jan 18 2021, 5:06 AM
F34000911: Screen Shot 2021-01-14 at 11.17.45 AM.png
Jan 14 2021, 4:18 PM
F34000859: 20210114_123939.jpg
Jan 14 2021, 3:41 PM
F31674369: image.png
Mar 10 2020, 3:55 PM

Description

PageList component:
https://doc.wikimedia.org/MobileFrontend/master/js/ui/?path=/story/pagelist--default

The wikidata descriptions are too small and no line height is applied.

image.png (852×678 px, 162 KB)

Design

font-size: 13px (or 0.8125em)
line-height: 19px (or 1.5)

image.png (1×750 px, 378 KB)

QA Results - Beta

ACStatusDetails
1T232229#6754229

QA Results - Prod

ACStatusDetails
1T232229#6754231

Event Timeline

Jdlrobson renamed this task from Search result wikidata descriptions feature too small font and line height to PageList descriptions too small font and line height.Sep 6 2019, 10:10 PM
Jdlrobson updated the task description. (Show Details)

@Volker_E as we've discussed a more comprehensive review of font-sizes in mobile front end is needed, however this issue seems worth addressing in the meantime.

A quick survey of possible reference points for what font-size we could use for the PageList descriptions:

image.png (1×2 px, 379 KB)

13px font looks correct to me (which I believe should also be used for the description text on the "RELATED ARTICLES" cards):

current13px font / 18px line-height14px font / 19px line height
image.png (1×750 px, 361 KB)
image.png (1×750 px, 378 KB)
image.png (1×750 px, 384 KB)
ovasileva triaged this task as Medium priority.Apr 2 2020, 4:54 PM
ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog-Archived board.

Can the font size and spacing be specific to the loading format?

I am new to open-source. Assign me this task

Can the font size and spacing be specific to the loading format?

Not sure I understand the question. Please clarify.

I am new to open-source. Assign me this task

Hi @Srk224, have you already made yourself comfortable with contributing to Wikimedia products. https://www.mediawiki.org/wiki/How_to_become_a_MediaWiki_hacker is a good introduction.

Hi All,
I am new to open source and would like to work on this task.
I have set up MediaWiki-Docker and MinervaNeue

Change 652395 had a related patch set uploaded (by Prernaswarna; owner: Prernaswarna):
[mediawiki/extensions/MobileFrontend@master] Change font and line height Pagelist description

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

Change 652395 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Change font and line height Pagelist description

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

@Jdlrobson how can I get that view to appear. I only get the page titles

en.m.wikipedia.beta.wmflabs.org_w_index.php_title=Special_MobileOptions&returnto=Main+Page(iPhone 11 Pro Max).png (2×1 px, 251 KB)

Search for german topics like "Albert Einstein" - that should do it.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: iPhone X

Test Artifact(s):

QA Steps

✅ AC1: The wikidata descriptions should appear as the image in design steps in the task description with the following specs:
font-size: 13px (or 0.8125em)
line-height: 19px (or 1.5)

en.m.wikipedia.beta.wmflabs.org_wiki_Selenium_diff_test_0.4435485606817703(iPhone 11 Pro Max).png (2×1 px, 240 KB)
Screen Shot 2021-01-17 at 9.04.42 PM.png (544×1 px, 110 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: iPhone X

Test Artifact(s):

QA Steps

✅ AC1: The wikidata descriptions should appear as the image in design steps in the task description with the following specs:
font-size: 13px (or 0.8125em)
line-height: 19px (or 1.5)

en.m.wikipedia.org_wiki_Main_Page(iPhone 11 Pro Max).png (2×1 px, 728 KB)
Screen Shot 2021-01-17 at 9.08.08 PM.png (552×1 px, 110 KB)