Ticket #28794: drawer-grouping-2.diff

src/wp-admin/css/common.css

@@ -1055 +1055 @@
 .wp-filter-drawer {
         display: none;
         margin: 0 -20px;
-        padding: 20px;
+        padding: 15px;
         border-top: 1px solid #eee;
         background: #fafafa;
 }
@@ -1091 +1091 @@
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         float: left;
-        margin: 0 1% 0 0;
+        margin: 5px;
         padding: 10px;
         width: 19%;
         background: #fff;
@@ -1100 +1100 @@
         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 }
 
-.wp-filter-group-wide {
+.wp-filter-group-1-5 {
+        width: 19%;
+        width: -webkit-calc(20% - 10px);
+        width: calc(20% - 10px);
+}
+
+.wp-filter-group-2-5 {
         width: 38%;
+        width: -webkit-calc(40% - 10px);
+        width: calc(40% - 10px);
 }
 
+.wp-filter-group-3-5 {
+        width: 57%;
+        width: -webkit-calc(60% - 10px);
+        width: calc(60% - 10px);
+}
+
+.wp-filter-group-4-5 {
+        width: 76%;
+        width: -webkit-calc(80% - 10px);
+        width: calc(80% - 10px);
+}
+
 .wp-filter-group-title {
         position: relative;
         margin: 0;
@@ -1125 +1145 @@
 }
 
 .wp-filter-drawer-buttons {
-        margin-bottom: 20px;
+        margin: 5px 5px 15px;
 }
 
 .wp-filter .wp-filter-drawer-buttons .button span {
@@ -1137 +1157 @@
 
 .wp-filter .button.clear-filters {
         display: none;
-        margin: 0 0 20px 10px;
+        margin-left: 10px;
 }
 
 .wp-filter-by {
         display: none;
-        margin: 0;
+        margin: 5px;
 }
 
 .wp-filter-by > span {
@@ -1168 +1188 @@
 }
 
 body.filters-applied .wp-filter-group,
-body.filters-applied .wp-filter-drawer a.button,
+body.filters-applied .wp-filter-drawer-buttons,
 body.filters-applied .wp-filter-drawer br {
         display: none !important;
 }
@@ -1213 +1233 @@
         }
 
         .wp-filter-group {
-                margin-bottom: 0;
-                margin-top: 5px;
-                width: 100%;
+                width: 98%;
+                width: calc(100% - 10px);
         }
 
         .wp-filter-group li {
@@ -1224 +1243 @@
 }
 
 @media only screen and (max-width: 782px) {
-        .wp-filter-group,
+        .wp-filter-group {
+                width: 98%;
+                width: calc(100% - 10px);
+        }
+        
         .wp-filter-group li {
                 width: 100%;
         }

src/wp-admin/theme-install.php

@@ -156 +156 @@
                 $feature_list = get_theme_feature_list();
                 foreach ( $feature_list as $feature_name => $features ) {
                         if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack
-                                echo '<div class="wp-filter-group wp-filter-group-wide">';
+                                echo '<div class="wp-filter-group wp-filter-group-2-5">';
                         } else {
-                                echo '<div class="wp-filter-group">';
+                                echo '<div class="wp-filter-group wp-filter-group-1-5">';
                         }
                         $feature_name = esc_html( $feature_name );
                         echo '<h4 class="wp-filter-group-title">' . $feature_name . '</h4>';