Changeset 27959

Timestamp:

04/05/2014 08:03:41 PM (6 years ago)

Author:

nacin

Message:

Theme Installer: Better responsive styles for feature filters.

props matveb.
fixes #27661.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (5 diffs)
• theme-install.php (modified) (2 diffs)

trunk/src/wp-admin/css/themes.css

@@ -1217 +1217 @@
 .more-filters-container {
     display: none;
-    padding: 30px;
+    padding: 20px;
     border-top: 1px solid #eee;
     margin: 0 -20px;
@@ -1224 +1224 @@
 body.more-filters-opened .more-filters-container {
     display: block;
+    overflow: hidden;
 }
 body.more-filters-opened .theme-section.current {
@@ -1255 +1256 @@
     list-style-type: none;
     margin: 20px 0 0;
-    display: block;
     font-size: 12px;
 }
+.more-filters-container li {
+    display: inline-block;
+    vertical-align: top;
+    list-style-type: none;
+    margin: 5px 0;
+    padding-right: 25px;
+    width: 160px;
+}
 .theme-navigation .more-filters-container .apply-filters {
-    margin: 20px 0 0;
+    margin: 0 0 20px;
 }
 .theme-navigation .more-filters-container .clear-filters {
     display: none;
-    margin: 20px 0 0 10px;
+    margin: 0 0 20px 10px;
 }
 .more-filters-container .apply-filters span {
@@ -1346 +1354 @@
         margin-bottom: 0;
         margin-top: 5px;
-        width: 49%;
-    }
-    .more-filters-container .filters-group:nth-child(3n) {
-        clear: left;
+        width: 100%;
+    }
+    .more-filters-container .filters-group li {
+        margin: 10px 0;
     }
 }
@@ -1355 +1363 @@
 @media only screen and (max-width: 782px) {
     .more-filters-container .filters-group {
+        width: 100%;
+    }
+    .more-filters-container .filters-group li {
         width: 100%;
     }

trunk/src/wp-admin/theme-install.php

@@ -124 +124 @@
         </div>
         <div class="more-filters-container">
+            <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
+            <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
+            <br class="clear" />
         <?php
         $feature_list = get_theme_feature_list();
@@ -140 +143 @@
         }
         ?>
-            <br class="clear" />
-            <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
-            <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
             <div class="filtering-by">
                 <span><?php _e( 'Filtering by:' ); ?></span>