WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 13 months ago

#32194 new enhancement

Post Locked Notification Dialog is not Responsive

Reported by: iandunn Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 3.6
Component: Administration Keywords: has-patch has-ui-feedback
Focuses: ui Cc:

Description

When notification dialogs were introduced in r23661, they were only designed for larger screens.

Attachments (8)

post-lock-notification-unresponsive.png (17.1 KB) - added by iandunn 2 years ago.
32194.diff (1.4 KB) - added by iandunn 2 years ago.
32194-post-lock-dialog.png (21.8 KB) - added by iandunn 2 years ago.
32194-file-credentials-dialog.png (24.5 KB) - added by iandunn 2 years ago.
32194.2.diff (1.3 KB) - added by iandunn 2 years ago.
Screen Shot 2016-08-11 at 4.49.07 PM.png (334.2 KB) - added by melchoyce 14 months ago.
Screen Shot 2016-08-11 at 4.49.16 PM.png (286.4 KB) - added by melchoyce 14 months ago.
Screen Shot 2016-08-11 at 4.49.19 PM.png (246.7 KB) - added by melchoyce 14 months ago.

Download all attachments as: .zip

Change History (17)

@iandunn
2 years ago

@iandunn
2 years ago

#1 @iandunn
2 years ago

  • Summary changed from Notification Dialogs are not Responsive to Post Locked Notification Dialog is not Responsive

32194.diff modified both the post-locking and file-crediential-request dialogs, but in hindsight the credential dialog is really a different type and needs to take the full viewport, and was better off before the changes.

32194.2.diff only changes the post-locking dialog.

The name of the locking author is bolded to make up for the Gravatar being removed, so that it's still easy to scan the dialog and know who the locking author is without having to read the text.

#2 @iandunn
2 years ago

  • Keywords has-patch ui-feedback added
  • Type changed from defect (bug) to enhancement

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


14 months ago

#4 @hugobaeta
14 months ago

  • Keywords ui-feedback removed
Last edited 14 months ago by hugobaeta (previous) (diff)

#5 @karmatosed
14 months ago

  • Keywords ui-feedback added

I like this as a solution, I've not tested the patch but it would get a +1 for me for the design being used.

#6 @melchoyce
14 months ago

32194.2.diff still applies, but noticed some issues:

  • The responsive breakpoint kicks in very early, leading to super super wide buttons. This breakpoint should be decreased. Once we get small enough, might be worth using another breakpoint to put Go back and Preview onto the same line, with Take over still full-width. Then, when that starts to get small, snap to one button per line.
  • The modal isn't centered in the screen once the breakpoint hits. The modal should always be centered in the screen.
  • The content isn't centered inside the modal — it has more space on the right than they do on the left. The content should have equal spacing on both sides.

Attaching screenshots.

#7 @karmatosed
14 months ago

  • Keywords has-ui-feedback added; ui-feedback removed

#8 follow-up: @FolioVision
13 months ago

Those are nice examples @melchoyce of the dialogue becoming too wide when vertical on a wider screen.

On the other hand, I quite like the idea of a consistent vertical dialogue rather than switching between vertical and horizontal as @karmatosed suggested in last week's design meeting.

What would you think about putting in a maximum width property so that above a certain window width rather than switching from vertical to horizontal (visually jarring in my opinion), the dialogue simply doesn't get any wider.

I'd suggest a maximum width of either 400px or 450px for these dialogues.

How do others feel about dropping the horizontal version?

Last edited 13 months ago by FolioVision (previous) (diff)

#9 in reply to: ↑ 8 @melchoyce
13 months ago

Replying to FolioVision:

On the other hand, I quite like the idea of a consistent vertical dialogue rather than switching between vertical and horizontal as @karmatosed suggested in last week's design meeting.

What would you think about putting in a maximum width property so that above a certain window width rather than switching from vertical to horizontal (visually jarring in my opinion), the dialogue simply doesn't get any wider.

That sounds good.

Note: See TracTickets for help on using tickets.