Changeset 30816

Timestamp:

12/11/2014 09:31:45 AM (12 years ago)

Author:

nacin

Message:

Fix the search field width in the media modal, media library grid and on the install new plugins screen.

Merges [30813] to the 4.1 branch.

props helen.
fixes #30658.

Location:

branches/4.1

Files:

• . (modified) (1 prop)
• src/wp-admin/css/common.css (modified) (5 diffs)
• src/wp-admin/css/list-tables.css (modified) (1 diff)
• src/wp-admin/css/media.css (modified) (1 diff)
• src/wp-admin/includes/class-wp-media-list-table.php (modified) (1 diff)
• src/wp-includes/css/media-views.css (modified) (8 diffs)

branches/4.1/src/wp-admin/css/common.css

@@ -955 +955 @@
 }
 
+.filter-items {
+        float: left;
+}
+
 .filter-links {
         display: inline-block;
@@ -989 +993 @@
 
 .wp-filter .search-form {
-        margin: 10px;
-        position: absolute;
-        right: 0;
-        top: 0;
+        float: right;
+        margin: 10px 0;
 }
 
@@ -998 +1000 @@
         margin: 0;
         padding: 3px 5px;
-        max-width: 280px;
-        width: 100%;
+        width: 280px;
+        max-width: 100%;
         font-size: 16px;
         font-weight: 300;
@@ -1006 +1008 @@
 
 .wp-filter .search-form select {
+        margin: 0;
         height: 33px;
         vertical-align: top;
@@ -1206 +1209 @@
 }
 
-@media only screen and (max-width: 910px) {
+@media only screen and (max-width: 1000px) {
+        .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;
-                margin: 20px 0;
+                max-width: 100%;
         }
 }

branches/4.1/src/wp-admin/css/list-tables.css

@@ -631 +631 @@
         display: inline-block;
         vertical-align: middle;
-        padding: 14px 0;
+        padding: 15px 0;
         margin: 0 20px 0 0;
 }

branches/4.1/src/wp-admin/css/media.css

@@ -1127 +1127 @@
 
 @media only screen and (max-width: 1120px) {
-        .media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
-                float: none;
-        }
-
         /* override for media-views.css */
         #wp-media-grid .wp-filter .attachment-filters {

branches/4.1/src/wp-admin/includes/class-wp-media-list-table.php

@@ -166 +166 @@
 ?>
 <div class="wp-filter">
-        <?php $this->view_switcher( $mode ); ?>
-
-        <select class="attachment-filters" name="attachment-filter">
-                <?php
+        <div class="filter-items">
+                <?php $this->view_switcher( $mode ); ?>
+
+                <select class="attachment-filters" name="attachment-filter">
+                        <?php
+                        if ( ! empty( $views ) ) {
+                                foreach ( $views as $class => $view ) {
+                                        echo "\t$view\n";
+                                }
+                        }
+                        ?>
+                </select>
+
+<?php
+                $this->extra_tablenav( 'bar' );
+
+                /** This filter is documented in wp-admin/inclues/class-wp-list-table.php */
+                $views = apply_filters( "views_{$this->screen->id}", array() );
+
+                // Back compat for pre-4.0 view links.
                 if ( ! empty( $views ) ) {
+                        echo '<ul class="filter-links">';
                         foreach ( $views as $class => $view ) {
-                                echo "\t$view\n";
-                        }
-                }
-                ?>
-        </select>
-
-<?php
-        $this->extra_tablenav( 'bar' );
-
-        /** This filter is documented in wp-admin/inclues/class-wp-list-table.php */
-        $views = apply_filters( "views_{$this->screen->id}", array() );
-
-        // Back compat for pre-4.0 view links.
-        if ( ! empty( $views ) ) {
-                echo '<ul class="filter-links">';
-                foreach ( $views as $class => $view ) {
-                        echo "<li class='$class'>$view</li>";
-                }
-                echo '</ul>';
-        }
-?>
+                                echo "<li class='$class'>$view</li>";
+                        }
+                        echo '</ul>';
+                }
+?>
+        </div>
 
         <div class="search-form">

branches/4.1/src/wp-includes/css/media-views.css

@@ -232 +232 @@
         float: right;
         height: 100%;
+        max-width: 33%;
 }
 
@@ -237 +238 @@
         float: left;
         height: 100%;
+        max-width: 66%;
 }
 
@@ -732 +734 @@
 .media-frame select.attachment-filters {
         margin-top: 11px;
-        margin-right: 10px;
+        margin-right: 2%;
+        max-width: 47%;
 }
 
@@ -747 +750 @@
 }
 
-.media-toolbar-secondary .search {
-        margin-right: 16px;
+.media-toolbar-primary .search {
+        max-width: 100%;
 }
 
@@ -2146 +2149 @@
 :lang(he-il) .rtl .media-frame select {
         font-family: Arial, sans-serif;
-}
-
-@media only screen and (max-width: 940px) {
-        .media-frame-content .media-toolbar-secondary .attachment-filters {
-                max-width: 134px;
-        }
 }
 
@@ -2347 +2344 @@
         }
 
-        .media-modal .attachments-browser .media-toolbar-primary,
-        .media-modal .attachments-browser .media-toolbar-secondary {
-                width: 50%;
-        }
-
         .media-modal .attachments-browser .media-toolbar .search {
                 max-width: 100%;
@@ -2359 +2351 @@
 
         .media-modal .attachments-browser .media-toolbar .attachment-filters {
-                margin: 11px 0 0;
                 height: auto;
-                max-width: 65%;
-                max-width: -webkit-calc(100% - 38px);
-                max-width: calc(100% - 38px);
         }
 
@@ -2467 +2455 @@
 
 @media only screen and (max-width: 480px) {
-        .media-frame-content .media-toolbar .attachment-filters {
-                max-width: 90px;
-        }
-
         .media-modal-close {
                 top: 5px;