Changeset 30813

Timestamp:

12/11/2014 04:11:28 AM (10 years ago)

Author:

azaozz

Message:

Fix the search field width in the media modal, media library grid and on the install new plugins screen. Props helen, fixes #30658.

Location:

trunk/src

Files:

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

trunk/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%;
     }
 }

trunk/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;
 }

trunk/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 {

trunk/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">

trunk/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;