Page MenuHomePhabricator

Homepage: number in mobile impact preview doesn't look aligned in Czech version
Closed, ResolvedPublic

Description

Czech screenshot:

image.png (257×476 px, 23 KB)

English screenshot:

image.png (237×481 px, 17 KB)

Compare the two screenshots, it looks like the 0 in Czech screenshot is put higher than in English version. This is presumably due to the fact that Czech text is longer than the English one.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
MMiller_WMF renamed this task from [mobile homepage design] Number in impact module doesn't look aligned in Czech version to Homepage: number in mobile impact preview doesn't look aligned in Czech version.Jul 2 2019, 4:45 PM
MMiller_WMF moved this task from Inbox to Upcoming Work on the Growth-Team board.
MMiller_WMF added subscribers: Catrope, kostajh, SBisson and 6 others.
MMiller_WMF added a subscriber: MMiller_WMF.

Thanks, @Urbanecm. I think this is worth fixing. Moving to Upcoming Work.

This is also reproducible in English, you just have to make the screen narrower so that the "Views from recent edits" text wraps:

Screenshot from 2019-08-02 13-04-21.png (212×331 px, 18 KB)

Change 527666 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Impact module: Put page view count in its own column in mobile summary

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

The attached patch fixes this by changing the way the impact module uses column layouts. Right now, the "Monitor views" and "You have not yet created" labels take up the entire width of the module, and then the "Views from recent edits" and the pageviews number are in a 2-column layout (where the left column is as wide as possible, and the right column as wide as necessary). With my patch, the entire module is a two-column layout, with all the text in the left column, and the number in the right column (bottom-aligned). This means that we don't get weird display issues when the number is taller than the "Views from recent edits" text, and hacks fighting those display issues is what made it hard to bottom-align the number in the first place.

BeforeAfter
iPhone 6 (375px wide)
Screenshot from 2019-08-02 16-12-25.png (177×357 px, 17 KB)
Screenshot from 2019-08-02 15-16-12.png (181×351 px, 18 KB)
iPhone 5 (320px wide)
Screenshot from 2019-08-02 16-12-17.png (208×301 px, 18 KB)
Screenshot from 2019-08-02 15-16-29.png (228×299 px, 18 KB)

Note that this does mean that, in pathological cases where the number is very wide and/or the screen very narrow, the entire text will wrap to make space for the number, not just the text immediately adjacent to the number:

BeforeAfter
Screenshot from 2019-08-02 15-15-10.png (205×288 px, 12 KB)
Screenshot from 2019-08-02 15-15-29.png (228×291 px, 12 KB)

Change 527666 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Impact module: Put page view count in its own column in mobile summary

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

@Catrope - there is a regression in betalabs only; the articles' edits are displayed on one line:

Fromto
Screen Shot 2019-08-09 at 2.22.35 PM.png (602×423 px, 57 KB)
Screen Shot 2019-08-09 at 2.22.20 PM.png (604×429 px, 48 KB)

@Cntlsn - please take a quick look: (I'll follow up on the bug reported above).

IMG_8200.PNG (1×640 px, 70 KB)
IMG_8201 (1).PNG (1×640 px, 79 KB)
IMG_8203 (1).PNG (1×640 px, 91 KB)
Cntlsn added a subscriber: RHo.

Thanks @Etonkovidova, the alignment looks good to me.
Moving back to QA column for review of bug reported above.

@MMiller_WMF @RHo I think we should find a way to shorten and round numbers (1k, 1.1k, 1.2k...) in the impact module preview for a better user experience. This was discussed before at T216217#5014975 when working on the impact module, but for technical reasons we decided to not abbreviate the numbers there. I will open a separate task.

Thanks @Etonkovidova, the alignment looks good to me.
Moving back to QA column for review of bug reported above.

@MMiller_WMF @RHo I think we should find a way to shorten and round numbers (1k, 1.1k, 1.2k...) in the impact module preview for a better user experience. This was discussed before at T216217#5014975 when working on the impact module, but for technical reasons we decided to not abbreviate the numbers there. I will open a separate task.

Thanks @Cntlsn - I think we can try to utilize "short numbers" and apply localization to the different wikis: http://cldr.unicode.org/translation/number-patterns#TOC-Short-Numbers

Thanks @RHo, I have created a new task T230333, and added your link for reference!

Change 529935 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Follow-up I289cc51fc1218: unbreak impact module layout on mobile

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

Change 529935 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Follow-up I289cc51fc1218: unbreak impact module layout on mobile

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

Checked in betalabs - the issue is fixed.