Page MenuHomePhabricator

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

Assigned To
Authored By
RHo
Jun 4 2020, 7:54 PM
Referenced Files
F31870570: image.png
Jun 18 2020, 4:13 PM
F31870567: image.png
Jun 18 2020, 4:13 PM
F31869615: Screen Shot 2020-06-17 at 11.27.09 AM.png
Jun 17 2020, 6:30 PM
F31869173: image.png
Jun 17 2020, 11:56 AM
F31867328: Screen Shot 2020-06-15 at 5.03.20 PM.png
Jun 16 2020, 12:02 AM
F31867326: Screen Shot 2020-06-15 at 5.01.38 PM.png
Jun 16 2020, 12:02 AM
F31867274: Screen Shot 2020-06-15 at 2.17.24 PM.png
Jun 15 2020, 10:52 PM
F31867268: Screen Shot 2020-06-15 at 3.48.14 PM.png
Jun 15 2020, 10:52 PM

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)
image.png (410×702 px, 52 KB)
image.png (600×408 px, 36 KB)

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):

image.png (312×350 px, 10 KB)

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

Actual
image.png (274×624 px, 14 KB)
Expected
image.png (202×616 px, 16 KB)

Event Timeline

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 subscribed.

@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 subscribed.

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

Done

productionbetalabs with the fix
Screen Shot 2020-06-15 at 2.17.36 PM.png (755×880 px, 215 KB)
Screen Shot 2020-06-15 at 2.17.24 PM.png (761×886 px, 193 KB)

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):

image.png (312×350 px, 10 KB)

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

productionbetalabs with the fix
Screen Shot 2020-06-15 at 3.48.14 PM.png (245×433 px, 31 KB)
Screen Shot 2020-06-15 at 3.47.27 PM.png (218×438 px, 31 KB)

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
Screen Shot 2020-06-15 at 5.03.20 PM.png (247×380 px, 24 KB)
Screen Shot 2020-06-15 at 5.01.38 PM.png (239×391 px, 26 KB)

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

image.png (366×632 px, 37 KB)

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