Page MenuHomePhabricator

Newcomer tasks: arrows are different distances from card on Mobile
Open, Needs TriagePublic

Assigned To
None
Authored By
MMiller_WMF
Nov 13 2019, 11:27 PM
Referenced Files
F32378476: image.png
Oct 8 2020, 5:29 PM
F32378472: image.png
Oct 8 2020, 5:28 PM
F32378474: image.png
Oct 8 2020, 5:28 PM
F31546140: image.png
Feb 3 2020, 4:22 PM
F31520284: Screen Shot 2020-01-21 at 4.10.18 PM.png
Jan 22 2020, 12:10 AM
F31122823: image.png
Nov 21 2019, 5:37 PM
F31122922: image.png
Nov 21 2019, 5:37 PM
F31117764: Capture.PNG
Nov 21 2019, 1:41 AM

Description

@PPham noticed that the "forward" and "back" arrows next to the suggested edit cards are slightly different distances from the card. The "forward" arrow is closer than the back arrow:

image.png (209×536 px, 21 KB)

Both arrows should only be 16px from the card:

image.png (850×1 px, 673 KB)

Event Timeline

It's the same in the desktop version now...

Capture.PNG (473×639 px, 24 KB)

It's the same in the desktop version now...

Capture.PNG (473×639 px, 24 KB)

Unfortunately it is still not quite evenly spaced:

image.png (1×1 px, 87 KB)

I think this is being caused by a negative margin-left on the class .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child
image.png (1×1 px, 264 KB)

Also, the arrows should always be contained within the module even when it is extremely narrow as shown in these screenshots. I have added this restyling for narrow width SE module to the same responsive article cards ticket T238598

Change 565455 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Fix suggested edits arrow positioning

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

Change 565455 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Fix suggested edits arrow positioning

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

Checked in betalabs - the arrows are positioned equally

Screen Shot 2020-01-21 at 4.10.18 PM.png (616×460 px, 118 KB)

Also, the arrows should always be contained within the module even when it is extremely narrow as shown in these screenshots. I have added this restyling for narrow width SE module to the same responsive article cards ticket T238598

It's also done.

Kosta pointed out on the patch that there's still a tiny difference (the left arrow is 2px farther).

Kosta pointed out on the patch that there's still a tiny difference (the left arrow is 2px farther).

Yes there is still a discrepancy - it looks like this may be due to uneven positioning being added on the span element of the arrows?

image.png (1×1 px, 321 KB)

@RHo -- do we still have this issue? If not, please resolve.

@RHo -- do we still have this issue? If not, please resolve.

This is still an issue on Mobile:

image.png (1×1 px, 157 KB)

Also, I think there is a regression elsewhere too because now on Mobile the arrows are further away from the card than expected:

image.png (850×1 px, 673 KB)
(expected Zeplin mock)

RHo renamed this task from Newcomer tasks: arrows are different distances from card to Newcomer tasks: arrows are different distances from card on Mobile.Oct 8 2020, 5:29 PM
RHo updated the task description. (Show Details)