Make WordPress Core

Opened 8 years ago

Last modified 7 weeks ago

#33049 accepted enhancement

Media Library toolbar: spinner position on small screens

Reported by: afercia's profile afercia Owned by: joedolson's profile joedolson
Milestone: 6.5 Priority: normal
Severity: normal Version: 4.2
Component: Media Keywords: has-screenshots has-ui-feedback
Focuses: ui Cc:

Description

After 31996 the spinner position is now generally improved across the admin. There are still places where it can be further improved though, especially for small screens.

Please see the screenshot below, on the left how the spinner is currently being displayed. Since it's hidden with visibility: hidden it does reserve space and thus there's a big space between form elements.

Considering also translations, the form fields length is unpredictable, they could be displayed in three rows or four rows or just tow, depending on the viewport width and basically there's no easy CSS solution if we still want to display the spinner "inline".

One possible solution could be the one on the right in the screenshot: under a certain viewport width, just give the spinner an absolute position in order to have it centered in a semi-transparent overlay. This would work regardless of the form fields length, number of lines, etc.

I'm not a designer :) but I'd like to bring this to the UI/design team attention.

https://cldup.com/S-TkeXpowi.png

Change History (4)

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


8 years ago

#2 @afercia
8 years ago

  • Keywords has-screenshots ui-feedback added

#3 @karmatosed
7 years ago

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

I would +1 to giving a transparent overlay and being the left option. To me having a consistent play for the eye makes a lot of sense to users. I am also all for unifying any interaction or feedback like this.

#4 @joedolson
7 weeks ago

  • Milestone set to 6.5
  • Owner set to joedolson
  • Status changed from new to accepted
Note: See TracTickets for help on using tickets.