Page MenuHomePhabricator

Newcomer tasks: UI fixes to Suggested edit guidance screen panel header
Closed, ResolvedPublic

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 no minimum height set. Remove the min-height:96px on .suggested-edits-panel-header

ii. SE icon should be anchored to the bottom right corner of the header, with 16px space between icon and the respective right and bottom edges of the panel (as per the SE tile button on the root screen):

iii. Remove the vertical misalignment between the difficulty tag and the duration text

Actual
Expected

Event Timeline

RHo created this task.Jun 4 2020, 7:54 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 4 2020, 7:54 PM
Tgr claimed this task.Jun 11 2020, 4:43 PM

Change 605283 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] UI fixes to suggested edit guidance screen panel header

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

kostajh added a subscriber: kostajh.

@RHo AFAICT the vertical alignment after the patch is merged seems very close to the expected mockup above but please let us know if further tweaks are needed.

Change 605283 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] UI fixes to suggested edit guidance screen panel header

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

Etonkovidova added a subscriber: Etonkovidova.

i. There should be no minimum height set. Remove the min-height:96px on .suggested-edits-panel-header

Done

productionbetalabs with the fix

ii. SE icon should be anchored to the bottom right corner of the header, with 16px space between icon and the respective right and bottom edges of the panel (as per the SE tile button on the root screen):

@RHo - please review the following- is it what you wanted to be done?

productionbetalabs with the fix

iii. Remove the vertical misalignment between the difficulty tag and the duration text

See the above screenshots

Mobile screenshots (from Chrome browser emulator, but I verified on a real device - iPhone 6s, looks the same):

productionbetalbs with the fix

Hi @kostajh - I noticed the task difficulty text hits the bottom of the header when the task type text goes over 2-3 lines:

I've proposed a fix in comments on the patch (remove margin-bottom: 16px on the icon class and add padding-bottom:16px to the panel header class)

Change 606166 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] More UI fixes to suggested edit guidance screen panel header

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

Change 606166 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] More UI fixes to suggested edit guidance screen panel header

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

Checked the fix in betalabs:

LGTM

Mobile:
Desktop
MMiller_WMF closed this task as Resolved.Jun 26 2020, 2:48 AM

Thank you!