Make WordPress Core

Changeset 57605


Ignore:
Timestamp:
02/12/2024 11:00:04 PM (4 months ago)
Author:
joedolson
Message:

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.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/media/views/attachments/browser.js

    r52806 r57605  
    424424        if ( ! this.collection.length ) {
    425425            this.toolbar.get( 'spinner' ).show();
     426            this.toolbar.$( '.media-bg-overlay' ).show();
    426427            this.dfd = this.collection.more().done( function() {
    427428                if ( ! view.collection.length ) {
     
    431432                }
    432433                view.toolbar.get( 'spinner' ).hide();
     434                view.toolbar.$( '.media-bg-overlay' ).hide();
    433435            } );
    434436        } else {
    435437            noItemsView.$el.addClass( 'hidden' );
    436438            view.toolbar.get( 'spinner' ).hide();
     439            this.toolbar.$( '.media-bg-overlay' ).hide();
    437440        }
    438441    },
  • trunk/src/js/media/views/toolbar.js

    r47122 r57605  
    2929        this.primary   = new wp.media.view.PriorityList();
    3030        this.secondary = new wp.media.view.PriorityList();
     31        this.tertiary  = new wp.media.view.PriorityList();
    3132        this.primary.$el.addClass('media-toolbar-primary search-form');
    3233        this.secondary.$el.addClass('media-toolbar-secondary');
     34        this.tertiary.$el.addClass('media-bg-overlay');
    3335
    34         this.views.set([ this.secondary, this.primary ]);
     36        this.views.set([ this.secondary, this.primary, this.tertiary ]);
    3537
    3638        if ( this.options.items ) {
     
    123125        this.primary.unset( id, options );
    124126        this.secondary.unset( id, options );
     127        this.tertiary.unset( id, options );
    125128
    126129        if ( ! options || ! options.silent ) {
  • trunk/src/wp-includes/css/media-views.css

    r57602 r57605  
    28152815        line-height: 2.71428571;
    28162816    }
     2817
     2818    .media-frame .wp-filter .media-toolbar-secondary {
     2819        position: unset;
     2820    }
     2821   
     2822    .media-frame .media-toolbar-secondary .spinner {
     2823        position: absolute;
     2824        top: 0;
     2825        bottom: 0;
     2826        margin: auto;
     2827        left: 0;
     2828        right: 0;
     2829        z-index: 9;
     2830    }
     2831   
     2832    .media-bg-overlay {
     2833        content: '';
     2834        background: #ffffff;
     2835        width: 100%;
     2836        height: 100%;
     2837        display: hidden;
     2838        position: absolute;
     2839        left: 0;
     2840        right: 0;
     2841        top: 0;
     2842        bottom: 0;
     2843        opacity: 0.6;
     2844    }
    28172845}
    28182846
Note: See TracChangeset for help on using the changeset viewer.