From 5863d7874d617a4805b59a1cbaae4f7c54b1640f Mon Sep 17 00:00:00 2001
From: Andrew Nacin <nacin@git.wordpress.org>
Date: Sat, 5 Apr 2014 20:03:41 +0000
Subject: [PATCH] Theme Installer: Better responsive styles for feature
 filters.

props matveb.
fixes #27661.


git-svn-id: https://develop.svn.wordpress.org/trunk@27959 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/themes.css    | 25 ++++++++++++++++++-------
 src/wp-admin/theme-install.php |  6 +++---
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 95e0fa036c..648edea045 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1216,13 +1216,14 @@ body.more-filters-opened .more-filters:focus:before {
 }
 .more-filters-container {
 	display: none;
-	padding: 30px;
+	padding: 20px;
 	border-top: 1px solid #eee;
 	margin: 0 -20px;
 	background: #fafafa;
 }
 body.more-filters-opened .more-filters-container {
 	display: block;
+	overflow: hidden;
 }
 body.more-filters-opened .theme-section.current {
 	border-bottom: none;
@@ -1254,15 +1255,22 @@ body.more-filters-opened.filters-applied .theme-browser {
 .more-filters-container ol {
 	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 {
 	display: inline-block;
@@ -1345,10 +1353,10 @@ body.show-upload-theme p.no-themes {
 	.more-filters-container .filters-group {
 		margin-bottom: 0;
 		margin-top: 5px;
-		width: 49%;
+		width: 100%;
 	}
-	.more-filters-container .filters-group:nth-child(3n) {
-		clear: left;
+	.more-filters-container .filters-group li {
+		margin: 10px 0;
 	}
 }
 
@@ -1356,6 +1364,9 @@ body.show-upload-theme p.no-themes {
 	.more-filters-container .filters-group {
 		width: 100%;
 	}
+	.more-filters-container .filters-group li {
+		width: 100%;
+	}
 }
 
 .rating {
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index f4cd3d3d6d..73c5fc6611 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -123,6 +123,9 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 			<a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
 		</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();
 		foreach ( $feature_list as $feature_name => $features ) {
@@ -139,9 +142,6 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 			echo '</div>';
 		}
 		?>
-			<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>
 				<div class="tags"></div>