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.
Built from https://develop.svn.wordpress.org/trunk@57605


git-svn-id: http://core.svn.wordpress.org/trunk@57106 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -2815,6 +2815,34 @@
 		font-size: 14px;
 		line-height: 2.71428571;
 	}
+
+	.media-frame .wp-filter .media-toolbar-secondary {
+		position: unset;
+	}
+	
+	.media-frame .media-toolbar-secondary .spinner {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+		right: 0;
+		left: 0;
+		z-index: 9;
+	}
+	
+	.media-bg-overlay {
+		content: '';
+		background: #ffffff;
+		width: 100%;
+		height: 100%;
+		display: hidden;
+		position: absolute;
+		right: 0;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		opacity: 0.6;
+	}
 }
 
 /* Responsive on portrait and landscape */

wp-includes/css/media-views.css

@@ -2814,6 +2814,34 @@
 		font-size: 14px;
 		line-height: 2.71428571;
 	}
+
+	.media-frame .wp-filter .media-toolbar-secondary {
+		position: unset;
+	}
+	
+	.media-frame .media-toolbar-secondary .spinner {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+		left: 0;
+		right: 0;
+		z-index: 9;
+	}
+	
+	.media-bg-overlay {
+		content: '';
+		background: #ffffff;
+		width: 100%;
+		height: 100%;
+		display: hidden;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		opacity: 0.6;
+	}
 }
 
 /* Responsive on portrait and landscape */

wp-includes/js/media-views.js

@@ -4746,6 +4746,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 
 		if ( ! this.collection.length ) {
 			this.toolbar.get( 'spinner' ).show();
+			this.toolbar.$( '.media-bg-overlay' ).show();
 			this.dfd = this.collection.more().done( function() {
 				if ( ! view.collection.length ) {
 					noItemsView.$el.removeClass( 'hidden' );
@@ -4753,10 +4754,12 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 					noItemsView.$el.addClass( 'hidden' );
 				}
 				view.toolbar.get( 'spinner' ).hide();
+				view.toolbar.$( '.media-bg-overlay' ).hide();
 			} );
 		} else {
 			noItemsView.$el.addClass( 'hidden' );
 			view.toolbar.get( 'spinner' ).hide();
+			this.toolbar.$( '.media-bg-overlay' ).hide();
 		}
 	},
 
@@ -9299,10 +9302,12 @@ Toolbar = View.extend(/** @lends wp.media.view.Toolbar.prototype */{
 		// The toolbar is composed of two `PriorityList` views.
 		this.primary   = new wp.media.view.PriorityList();
 		this.secondary = new wp.media.view.PriorityList();
+		this.tertiary  = new wp.media.view.PriorityList();
 		this.primary.$el.addClass('media-toolbar-primary search-form');
 		this.secondary.$el.addClass('media-toolbar-secondary');
+		this.tertiary.$el.addClass('media-bg-overlay');
 
-		this.views.set([ this.secondary, this.primary ]);
+		this.views.set([ this.secondary, this.primary, this.tertiary ]);
 
 		if ( this.options.items ) {
 			this.set( this.options.items, { silent: true });
@@ -9393,6 +9398,7 @@ Toolbar = View.extend(/** @lends wp.media.view.Toolbar.prototype */{
 		delete this._views[ id ];
 		this.primary.unset( id, options );
 		this.secondary.unset( id, options );
+		this.tertiary.unset( id, options );
 
 		if ( ! options || ! options.silent ) {
 			this.refresh();

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.5-alpha-57604';
+$wp_version = '6.5-alpha-57605';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.