Page MenuHomePhabricator

'Mark as read' dots menu is misaligned
Closed, ResolvedPublic

Description

Screen Shot 2016-02-11 at 2.26.47 PM.png (607×189 px, 40 KB)

Used to be like:

Screen Shot 2016-02-11 at 9.45.51 AM.png (620×281 px, 50 KB)

Event Timeline

Etonkovidova raised the priority of this task from to Needs Triage.
Etonkovidova updated the task description. (Show Details)
Etonkovidova added subscribers: Etonkovidova, Pginer-WMF.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald Transcript

Change 272651 had a related patch set uploaded (by Mooeypoo):
Transform the notification action bar to css table layout

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

Change 272651 merged by jenkins-bot:
Transform the notification action bar to css table layout

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

It's no longer misaligned, but now it's all the way over to the right. Is that what we want?

CC @Pginer-WMF

dotdotdot-right.png (501×115 px, 19 KB)

More examples for @Pginer-WMF and @jmatazzoni to confirm whether the layout is acceptable or not:

Screen Shot 2016-02-29 at 6.30.45 PM.png (687×187 px, 34 KB)

Screen Shot 2016-02-29 at 6.31.07 PM.png (963×183 px, 52 KB)

Screen Shot 2016-02-29 at 2.37.40 PM.png (625×236 px, 43 KB)

Screen Shot 2016-02-29 at 6.30.04 PM.png (668×375 px, 68 KB)

It's no longer misaligned, but now it's all the way over to the right. Is that what we want?

CC @Pginer-WMF

dotdotdot-right.png (501×115 px, 19 KB)

No, the "..." option is just one more option in the sequence of secondary actions. It should have the same spacing around it as the other ones. As illustrated in T119374:

notif-layout-spacing-reference.png (502×158 px, 18 KB)

if it's fixed, does it need to go to code review or straight to QA?

There doesn't seem to be unmerged code to review here so I would sent to QA for @Etonkovidova to check.

Checked in betalabs - the check mark position is ok?
'Mark as read' in Messages

Screen Shot 2016-03-14 at 10.22.37 AM.png (567×276 px, 52 KB)

'Mark as read' in Alerts
Screen Shot 2016-03-14 at 10.19.42 AM.png (601×265 px, 35 KB)

'Mark as read' for cross-wiki bundle
Screen Shot 2016-03-14 at 10.23.39 AM.png (586×234 px, 43 KB)

'Mark as read' in cross-wiki expanded bundle
Screen Shot 2016-03-14 at 10.23.54 AM.png (655×372 px, 68 KB)

@Pginer-WMF, this looks about right though I'm not sure it's hitting your spec in all cases. E.g., in some of the examples the horizontal space looks considerably less than the 20px you specify. Are we there yet or do you want to keep adjusting?

@Pginer-WMF, this looks about right though I'm not sure it's hitting your spec in all cases. E.g., in some of the examples the horizontal space looks considerably less than the 20px you specify. Are we there yet or do you want to keep adjusting?

It seems the expand/collapse action is not treated the same as other actions. Adding the missing margin to it would help making things more consistent. If this gets more complicated, it's ok to move it to a separate specific ticket for later since it will affect, for now, the cross-wiki bundle.

It seems the expand/collapse action is not treated the same as other actions. Adding the missing margin to it would help making things more consistent.

@Mooeypoo, are you able to adjust the space around expand/collapse as Pau suggests?

Change 277689 had a related patch set uploaded (by Mooeypoo):
Apply buttons styling to 'expand' bundle button

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

Good point. I've fixed that in this commit.

Change 277689 merged by jenkins-bot:
Apply buttons styling to 'expand' bundle button

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

Checked in betalabs - the horizontal space between the dotdotdot menu seems to be consistent - 22px.

Screen Shot 2016-03-22 at 10.47.05 AM.png (606×301 px, 49 KB)

Screen Shot 2016-03-22 at 10.59.39 AM.png (601×191 px, 29 KB)