Page MenuHomePhabricator

Newcomer tasks: UI fixes to Suggested edit guidance screen - Quick start tips
Open, Needs TriagePublic

Description

This task tracks design fixes on the panel header of the suggested edits screen which were found on both Desktop and Mobile versions.

Actual (CS Betalabs 04-Jun) DesktopExpected (Zeplin mock)

There are some alignment and padding issues:
i. There should be 24px spacing between the top of “Quick start tips” heading text and the bottom of the panel header. Potentially fixed by adding .suggested-edits-panel-header {margin-bottom:16px;}

Actual
Expected

ii. There should be 16px top padding (not 8px) between the tabs divider and the tip text

Actual
Expected

iii. There should be only 12px padding all around the supplement example text and its container
Currently, there is too much top and bottom padding in the example text, possibly due to double padding

Actual
Expected

iv. Inline icons in guidance text should have 8px left and right padding

Actual
Expected

v. There should be 16px spacing expected between each guidance content element

Actual
Expected

Event Timeline

RHo created this task.Jun 4 2020, 10:04 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 4 2020, 10:04 PM

Change 605587 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel UI fixes

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

Tgr added a subscriber: Tgr.

The patch takes care of points ii-v, but not i as far as I can see.

Change 605587 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel UI fixes

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

The patch takes care of points ii-v, but not i as far as I can see.

Hmph, must have been lost in a rebase.

Change 606500 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Adjust margin on suggested edits panel

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

Change 606500 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Adjust padding on quick start tips header

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

Etonkovidova added a subscriber: Etonkovidova.EditedThu, Jul 23, 10:35 PM

Some of the fixes have been deployed, hence there is no comparison pictures.

i. There should be 24px spacing between the top of “Quick start tips” heading text and the bottom of the panel header. Potentially fixed by adding .suggested-edits-panel-header {margin-bottom:16px;}

before the fixafter the fix

ii. There should be 16px top padding (not 8px) between the tabs divider and the tip text

iii. There should be only 12px padding all around the supplement example text and its container
Currently, there is too much top and bottom padding in the example text, possibly due to double padding

iv. Inline icons in guidance text should have 8px left and right padding

v. There should be 16px spacing expected between each guidance content element

It seems to be in place.

Note: The placement of text and icons looks a bit tight - please advise whether some adjustments are needed here:

Note: The placement of text and icons looks a bit tight - please advise whether some adjustments are needed here:

Thanks for noticing that @Etonkovidova, this is because the guidance text is setup so icons are shown inline within the paragraph here so it can look strange if adding top and bottom padding/margins. Maybe we should could look at adding a <br> before and after the icons in this instance instead on the translatewiki field?

LGTM too on Desktop and Mobile for the points in the task though so will move to PM review.

Desktop
Mobile