Index: src/wp-admin/css/common.css =================================================================== --- src/wp-admin/css/common.css (revision 32088) +++ src/wp-admin/css/common.css (working copy) @@ -931,7 +931,7 @@ -moz-box-sizing: border-box; box-sizing: border-box; margin: 12px 0 25px; - padding: 0 20px; + padding: 0 15px; width: 100%; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); box-shadow: 0 1px 1px rgba(0,0,0,0.04); @@ -1023,6 +1023,7 @@ font-size: 16px; font-weight: 300; line-height: 1.5; + text-align: left; } .wp-filter .search-form select { @@ -1235,14 +1236,6 @@ .filter-items { float: none; } - - .wp-filter .media-toolbar-primary, - .wp-filter .media-toolbar-secondary, - .wp-filter .search-form { - float: none; /* Remove float from media-views.css */ - position: relative; - max-width: 100%; - } } @media only screen and (max-width: 782px) { @@ -1250,6 +1243,10 @@ padding: 0; width: 50%; } + + .wp-filter .search-form input[type="search"] { + width: 100%; + } } @media only screen and (max-width: 320px) { Index: src/wp-admin/css/media.css =================================================================== --- src/wp-admin/css/media.css (revision 32088) +++ src/wp-admin/css/media.css (working copy) @@ -562,7 +562,6 @@ } .media-frame.mode-grid .media-toolbar select { - margin: 0 10px 0 0; font-size: 14px; } @@ -580,10 +579,6 @@ margin-top: 0; } -.media-frame.mode-grid .spinner { - margin-top: 15px; -} - .attachments-browser .media-toolbar-secondary > .media-button { margin-right: 10px; } @@ -1124,10 +1119,16 @@ @media only screen and (max-width: 1120px) { /* override for media-views.css */ #wp-media-grid .wp-filter .attachment-filters { - max-width: 100%; + max-width: 35%; } } +@media only screen and (max-width: 1000px) { + #wp-media-grid .wp-filter .attachment-filters { + max-width: 20%; + } +} + @media only screen and ( max-width: 782px ) { .media-frame.mode-select .attachments-browser.fixed .media-toolbar { top: 46px; @@ -1184,6 +1185,10 @@ height: auto; width: 100%; } + + #wp-media-grid .wp-filter .attachment-filters { + max-width: 35%; + } } @media only screen and (max-width: 640px), screen and (max-height: 400px) { Index: src/wp-includes/css/media-views.css =================================================================== --- src/wp-includes/css/media-views.css (revision 32088) +++ src/wp-includes/css/media-views.css (working copy) @@ -231,21 +231,46 @@ .media-toolbar-primary { float: right; - height: 100%; + width: 100%; max-width: 33%; + text-align: right; } .media-toolbar-secondary { float: left; - height: 100%; + width: 100%; max-width: 66%; } +.ie8 .media-toolbar-primary { + width: 33%; + max-width: none; +} + +.ie8 .media-toolbar-secondary { + width: 66%; + max-width: none; +} + +.ie8 .wp-filter .search-form input[type="search"], +.ie8 .media-toolbar-primary #media-search-input { + float: right; +} + +.ie8 .media-frame-toolbar .media-toolbar-primary .media-button { + float: right; +} + + +.media-modal .media-toolbar-primary, +.media-modal .media-toolbar-secondary { + padding-top: 10px; +} + .media-toolbar-primary > .media-button, .media-toolbar-primary > .media-button-group { margin-left: 10px; - float: left; - margin-top: 15px; + margin-top: 5px; } .media-toolbar-secondary > .media-button, @@ -738,16 +763,20 @@ * Attachment Browser Filters */ .media-frame select.attachment-filters { - margin-top: 11px; - margin-right: 2%; - max-width: 47%; + margin: 0 2% 0 0; + /* need to reserve space for the spinner, hacky because 46% + 2% * 2 = 96% doesn't guarantee we have 20px left */ + /* need for calc()? e.g. calc( 48% - 10px ) would always work assuming there are 2 selects */ + max-width: 46%; } +.ie8 .media-frame select.attachment-filters { + max-width: 40%; +} + /** * Search */ .media-frame .search { - margin-top: 11px; padding: 4px; font-size: 13px; color: #464646; @@ -757,6 +786,7 @@ .media-toolbar-primary .search { max-width: 100%; + margin-top: 0; } /** @@ -1504,12 +1534,16 @@ /** * Spinner + * need to replicate what's already in common.css because media can be enqueued in the front-end */ .media-frame .spinner { background: url(../images/spinner.gif) no-repeat; -webkit-background-size: 20px 20px; background-size: 20px 20px; - display: none; + display: inline-block; + visibility: hidden; + float: right; + vertical-align: middle; opacity: 0.7; filter: alpha(opacity=70); width: 20px; @@ -1517,10 +1551,18 @@ margin: 0; } -.media-toolbar .spinner { - margin-top: 14px; +.media-frame .media-toolbar-secondary .spinner { + float: none; } +.media-frame .spinner.is-active { + visibility: visible; +} + +.wp-core-ui .media-toolbar-secondary .button { + vertical-align: middle; +} + /** * Attachment Details */ @@ -1535,16 +1577,16 @@ z-index: 10; } -.attachment-details .settings-save-status .spinner { - margin: 0 5px 0; -} - .attachment-details .settings-save-status .saved { float: right; display: none; + margin-right: -15px; } -.attachment-details.save-waiting .settings-save-status .spinner, +.attachment-details.save-waiting .settings-save-status .spinner { + visibility: visible; +} + .attachment-details.save-complete .settings-save-status .saved { display: block; } @@ -2199,6 +2241,13 @@ font-family: Arial, sans-serif; } + +@media only screen and (max-width: 1120px) { + .media-frame select.attachment-filters { + max-width: 43%; + } +} + /** * Responsive layout */ @@ -2402,10 +2451,6 @@ height: auto; } - .media-modal .attachments-browser .media-toolbar .spinner { - margin: 14px 8px 0; - } - /* Text inputs need to be 16px, or they force zooming on iOS */ .media-frame input[type="text"], .media-frame input[type="password"], @@ -2419,6 +2464,21 @@ } } +@media only screen and (max-width: 782px) { + .media-toolbar-primary, + .media-toolbar-secondary { + max-width: none; + } + + .media-modal .media-toolbar-primary { + max-width: 33%; + } + + .media-modal .media-toolbar-secondary { + max-width: 66%; + } +} + /* Responsive on portrait and landscape */ @media only screen and (max-width: 640px), screen and (max-height: 400px) { /* Full-bleed modal */ @@ -2534,6 +2594,10 @@ .media-frame.hide-router .media-frame-content { top: 40px; } + + .media-frame select.attachment-filters { + max-width: 42%; + } } /** Index: src/wp-includes/js/media/views/attachments.js =================================================================== --- src/wp-includes/js/media/views/attachments.js (revision 32088) +++ src/wp-includes/js/media/views/attachments.js (working copy) @@ -284,13 +284,13 @@ // Show the spinner only if we are close to the bottom. if ( el.scrollHeight - ( scrollTop + el.clientHeight ) < el.clientHeight / 3 ) { - toolbar.get('spinner').show(); + toolbar.get('spinner').$el.addClass( 'is-active' ); } if ( el.scrollHeight < scrollTop + ( el.clientHeight * this.options.refreshThreshold ) ) { this.collection.more().done(function() { view.scroll(); - toolbar.get('spinner').hide(); + toolbar.get('spinner').$el.removeClass( 'is-active' ); }); } } Index: src/wp-includes/js/media/views/attachments/browser.js =================================================================== --- src/wp-includes/js/media/views/attachments/browser.js (revision 32088) +++ src/wp-includes/js/media/views/attachments/browser.js (working copy) @@ -306,7 +306,7 @@ } if ( ! this.collection.length ) { - this.toolbar.get( 'spinner' ).show(); + this.toolbar.get( 'spinner' ).$el.addClass( 'is-active' ); this.dfd = this.collection.more().done( function() { if ( ! view.collection.length ) { noItemsView.$el.removeClass( 'hidden' ); @@ -313,11 +313,11 @@ } else { noItemsView.$el.addClass( 'hidden' ); } - view.toolbar.get( 'spinner' ).hide(); + view.toolbar.get( 'spinner' ).$el.removeClass( 'is-active' ); } ); } else { noItemsView.$el.addClass( 'hidden' ); - view.toolbar.get( 'spinner' ).hide(); + view.toolbar.get( 'spinner' ).$el.removeClass( 'is-active' ); } }, Index: src/wp-includes/js/media/views/button/select-mode-toggle.js =================================================================== --- src/wp-includes/js/media/views/button/select-mode-toggle.js (revision 32088) +++ src/wp-includes/js/media/views/button/select-mode-toggle.js (working copy) @@ -55,7 +55,7 @@ this.controller.content.get().$el.removeClass( 'fixed' ); toolbar.$el.css( 'width', '' ); toolbar.$( '.delete-selected-button' ).addClass( 'hidden' ); - children.not( '.spinner, .media-button' ).show(); + children.not( '.media-button' ).show(); this.controller.state().get( 'selection' ).reset(); } } Index: src/wp-includes/js/media/views/embed/link.js =================================================================== --- src/wp-includes/js/media/views/embed/link.js (revision 32088) +++ src/wp-includes/js/media/views/embed/link.js (working copy) @@ -34,7 +34,7 @@ return; } - this.spinner.show(); + this.spinner.addClass( 'is-active' ); this.fetch(); }, 600 ), @@ -95,7 +95,7 @@ this.model.unset( 'width', opts ); } - this.spinner.hide(); + this.spinner.removeClass( 'is-active' ); this.$('.embed-container').show().find('.embed-preview').html( html ); } Index: src/wp-includes/js/media/views/spinner.js =================================================================== --- src/wp-includes/js/media/views/spinner.js (revision 32088) +++ src/wp-includes/js/media/views/spinner.js (working copy) @@ -17,7 +17,7 @@ show: function() { if ( ! this.spinnerTimeout ) { this.spinnerTimeout = _.delay(function( $el ) { - $el.show(); + $el.addClass( 'is-active' ); }, this.delay, this.$el ); } @@ -25,7 +25,7 @@ }, hide: function() { - this.$el.hide(); + this.$el.removeClass( 'is-active' ); this.spinnerTimeout = clearTimeout( this.spinnerTimeout ); return this;