Make WordPress Core

Opened 10 years ago

Last modified 6 years ago

#32194 new enhancement

Post Locked Notification Dialog is not Responsive

Reported by: iandunn's profile iandunn Owned by:
Milestone: 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 10 years ago.
32194.diff (1.4 KB) - added by iandunn 10 years ago.
32194-post-lock-dialog.png (21.8 KB) - added by iandunn 10 years ago.
32194-file-credentials-dialog.png (24.5 KB) - added by iandunn 10 years ago.
32194.2.diff (1.3 KB) - added by iandunn 10 years ago.
Screen Shot 2016-08-11 at 4.49.07 PM.png (334.2 KB) - added by melchoyce 9 years ago.
Screen Shot 2016-08-11 at 4.49.16 PM.png (286.4 KB) - added by melchoyce 9 years ago.
Screen Shot 2016-08-11 at 4.49.19 PM.png (246.7 KB) - added by melchoyce 9 years ago.

Download all attachments as: .zip

Change History (17)

@iandunn
10 years ago

@iandunn
10 years ago

#1 @iandunn
10 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
10 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.


9 years ago

#4 @hugobaeta
9 years ago

  • Keywords ui-feedback removed
Last edited 9 years ago by hugobaeta (previous) (diff)

#5 @karmatosed
9 years 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
9 years 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
9 years ago

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

#8 follow-up: @FolioVision
8 years 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 8 years ago by FolioVision (previous) (diff)

#9 in reply to: ↑ 8 @melchoyce
8 years 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.