Page MenuHomePhabricator

Newcomer tasks: UI fixes to the text elements on the Post-edit dialog
Open, Needs TriagePublic

Description

Actual desktop
Expected desktop
Actual mobile
Expected mobile

This task addresses a number of minor style issues related to the text inside of the post-edit dialog suggested edit card.

Specific issues :
i. "Next suggestion" header
Expected: Header style uses the OOUI Fieldset header style which is font-size:~18.2px on Mobile, and font-size:16px on Desktop
Actual: font-size is larger on both desktop and mobile

ii. Next suggestion font-color on Desktop
Expected: Should use standard Progressive Button style which is color #36c
Actual: Using a blue not in the standard colour palette

iii. Task difficulty text font-size
Expected: Task difficulty text font-style uses the Wikipedia hatnote thumbcaption style which is font-size:13px on Mobile, and font-size:12.4px on Desktop
Actual: On mobile the font-size is larger than expected at ~14.17px
(Note that the Task difficulty icon and text is also not vertically centered, but this was filed separately as T255613)

iv. Icon and text spacing
Expected: Spacing between icon and text (for visits and task type) is 8px
Actual: margin set to 10px

v. Remove the right and bottom padding from .mw-ge-help-panel-postedit-main .mw-ge-help-panel-postedit-card-text-container

Actual
Expected:

vi. Task type element on Mobile and desktop should be right aligned and anchored to the bottom of the ‘card’ “text container”.

vii. Page views stat is shown on the same row as the task type, taking maximum 50% of the flex-box space before text overflows

Event Timeline

RHo created this task.Jun 18 2020, 8:06 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 18 2020, 8:06 PM
Tgr added a subscriber: Tgr.EditedJun 25 2020, 6:55 PM

@RHo do you have an example of the hatnote style somewhere else on the site? I want to check if it is something reusable.

vi. Task type element on Mobile and desktop should be right aligned and anchored to the bottom of the ‘card’ “text container”.
vii. Page views stat is shown on the same row as the task type, taking maximum 50% of the flex-box space before text overflows

They do that, showing them in separate rows is flex behavior for when they don't fit on the same line. Do we want to fit them in the same row even at the cost of truncating the text? That's visually nicer but feels less useful to me.

RHo updated the task description. (Show Details)Jul 1 2020, 10:19 AM
RHo added a comment.Jul 1 2020, 10:23 AM

@RHo do you have an example of the hatnote style somewhere else on the site? I want to check if it is something reusable.

Sorry this should actually be the thumbcaption style which is used on image captions on articles:

Desktop example
Mobile version

vi. Task type element on Mobile and desktop should be right aligned and anchored to the bottom of the ‘card’ “text container”.
vii. Page views stat is shown on the same row as the task type, taking maximum 50% of the flex-box space before text overflows

They do that, showing them in separate rows is flex behavior for when they don't fit on the same line. Do we want to fit them in the same row even at the cost of truncating the text? That's visually nicer but feels less useful to me.

  • I think it is worth doing for the nicer visual here since users should now have familiarity with the SE (after having completed a task) to know what the two bits of data refer to even if the text is partially truncated.

Change 608972 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: UI fixes to the text elements on the post-edit dialog

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /608972

Tgr claimed this task.Jul 1 2020, 11:04 PM

Change 608972 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: UI fixes to the text elements on the post-edit dialog

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /608972

Checked in betalabs -

i. "Next suggestion" header
Expected: Header style uses the OOUI Fieldset header style which is font-size:~18.2px on Mobile, and font-size:16px on Desktop

Desktop

betalabsproduciton

Mobile

betalabsproduciton

Seems that on mobile color #36c was in place.

ii. Next suggestion font-color on Desktop
Expected: Should use standard Progressive Button style which is color #36c

betalabsproduction
Desktop
Mobile

iii. Task difficulty text font-size
Expected: Task difficulty text font-style uses the Wikipedia hatnote thumbcaption style which is font-size:13px on Mobile, and font size:12.4px on Desktop

the font size on mobile is 11.5 vs 13 specified.

betalabsproduction
Desktop
Mobile

iv. Icon and text spacing
Expected: Spacing between icon and text (for visits and task type) is 8px

spacing between icon and visits is still 10px.

v. Remove the right and bottom padding from .mw-ge-help-panel-postedit-main .mw-ge-help-panel-postedit-card-text-container

vi. Task type element on Mobile and desktop should be right aligned and anchored to the bottom of the ‘card’ “text container”.

vii. Page views stat is shown on the same row as the task type, taking maximum 50% of the flex-box space before text overflows

.mw-ge-help-panel-postedit-main .mw-ge-help-panel-postedit-card-tasktype {
    flex: 1 0 0;
    justify-self: flex-end;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

Etonkovidova updated the task description. (Show Details)Jul 3 2020, 1:11 AM

Moving back so @Tgr can adjust the two minor items (iii) and (iv) that @Etonkovidova found. Thanks both!

iii. Task difficulty text font-size
Expected: Task difficulty text font-style uses the Wikipedia hatnote thumbcaption style which is font-size:13px on Mobile, and font size:12.4px on Desktop

the font size on mobile is 11.5 vs 13 specified.

betalabsproduction
Desktop
Mobile

iv. Icon and text spacing
Expected: Spacing between icon and text (for visits and task type) is 8px

spacing between icon and visits is still 10px.

Change 609777 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Post-edit panel style fixes

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

Change 609777 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Post-edit panel style fixes

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

  • the font size on mobile is 13 as specified.
Mobile before fix
Mobile after fix
  • spacing between icon and visits is fixed - 8px

iv. Icon and text spacing
Expected: Spacing between icon and text (for visits and task type) is 8px

before fix
after fix

Thanks, LGTM

  • the font size on mobile is 13 as specified.
Mobile before fix
Mobile after fix
  • spacing between icon and visits is fixed - 8px

iv. Icon and text spacing
Expected: Spacing between icon and text (for visits and task type) is 8px

before fix
after fix