Make WordPress Core

Opened 9 years ago

Closed 7 weeks ago

#33049 closed enhancement (fixed)

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 has-patch commit dev-reviewed fixed-major
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

Attachments (4)

33049.diff (2.6 KB) - added by kushang78 4 months ago.
Added patch for this ticket.
33049.2.diff (2.8 KB) - added by joedolson 3 months ago.
Update patch to properly show/hide the overlay; rename property to tertiary instead of third for consistency
33049.png (5.5 KB) - added by joedolson 3 months ago.
Screenshot after patch
33049-before.png (5.1 KB) - added by joedolson 3 months ago.
Before patch

Download all attachments as: .zip

Change History (28)

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


9 years ago

#2 @afercia
8 years ago

  • Keywords has-screenshots ui-feedback added

#3 @karmatosed
8 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 months ago

  • Milestone set to 6.5
  • Owner set to joedolson
  • Status changed from new to accepted

@kushang78
4 months ago

Added patch for this ticket.

#5 @kushang78
4 months ago

  • Keywords has-patch added

The loader is now in center with white Background overlay under ‘’media-782'’.

So, Please check the attached diff file and Share your feedback on it.

Thanks!

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 months ago

#7 @audrasjb
3 months ago

  • Keywords needs-testing added

@joedolson
3 months ago

Update patch to properly show/hide the overlay; rename property to tertiary instead of third for consistency

@joedolson
3 months ago

Screenshot after patch

@joedolson
3 months ago

Before patch

#9 @joedolson
3 months ago

  • Keywords commit added; needs-testing removed

#10 @joedolson
3 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 57605:

Media: Update progress spinner position on small screens.

Move the media library progress spinner to overlay the filter controls while active. Improves design and prevents unpredictable layout.

Props afercia, kushang78, joedolson, karmatosed.
Fixes #33049.

#12 @ramonopoly
8 weeks ago

Could folks help me confirm if https://core.trac.wordpress.org/changeset/57605 affects the ability of the media library to add new images in narrow viewport widths in the editor?

I think the new overlay is making the button unclickable. Furthermore, the button is not disabled via any attribute but by an overlay div (.media-bg-overlay), therefore I'd argue it probably constitutes an accessibility problem as well.

See .media-bg-overlay here:

https://github.com/WordPress/wordpress-develop/commit/1a4692f54d1863386549dfc0a3ffd7a40076c1cc#diff-c657d8edf83f580c59e61e205f967175fbf6e687c188e87e98221b47286c7074R2832

Reported here https://github.com/WordPress/gutenberg/issues/60152 in case the fix lies with Guteberg, but I think it should be fixed in Core?

Thanks!

#13 @wildworks
8 weeks ago

Could folks help me confirm if https://core.trac.wordpress.org/changeset/57605 affects the ability of the media library to add new images in narrow viewport widths in the editor?

Maybe it's a typo in the CSS value? I don't think that display:hidden is correct CSS.

https://github.com/WordPress/wordpress-develop/blob/f9b59e940dcb34a9b8cd6faacc5c35a2846dbbd2/src/wp-includes/css/media-views.css#L2837

This ticket was mentioned in PR #6313 on WordPress/wordpress-develop by @ramonopoly.


8 weeks ago
#14

display: hidden is invalid CSS

It's causing the following bug:

https://github.com/WordPress/gutenberg/issues/60152

Trac ticket: https://core.trac.wordpress.org/ticket/33049

#15 @ramonopoly
8 weeks ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Maybe it's a typo in the CSS value? I don't think that display:hidden is correct CSS.

I just saw this too! Thanks @wildworks

I updated a Core patch to correct

https://github.com/WordPress/wordpress-develop/pull/6313

@swissspidy commented on PR #6313:


8 weeks ago
#16

Ah, that's why I wasn't able to insert images on my phone! 💡

#17 @swissspidy
8 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 57881:

Media: Fix CSS issue preventing inserting images on smaller viewports.

Addresses a regression introduced in [57605] where the “Select” button in the media modal was not clickable anymore due to an overlaid element.

Props ramonopoly, swissspidy, freewebmentor.
Fixes #33049.

@ramonopoly commented on PR #6313:


8 weeks ago
#19

Thanks for taking care of that @swissspidy

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.


7 weeks ago

#21 @joedolson
7 weeks ago

  • Keywords dev-reviewed added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for merge to 6.5 branch; reviewed and ready for merge.

#22 @swissspidy
7 weeks ago

  • Keywords fixed-major added

This ticket was mentioned in Slack in #core by desrosj. View the logs.


7 weeks ago

#24 @joedolson
7 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 57884:

Media: Fix CSS issue preventing inserting images on smaller viewports.

Addresses a regression introduced in [57605] where the “Select” button in the media modal was not clickable anymore due to an overlaid element.

Props ramonopoly, swissspidy, freewebmentor.
Reviewed by joedolson.
Merges [57881] to the 6.5 branch.
Fixes #33049.

Note: See TracTickets for help on using tickets.