Filter bar: Better field display on smaller screens.

props TacoVerdo, jesin.
fixes #29556 and #29495.

Built from https://develop.svn.wordpress.org/trunk@30740


git-svn-id: http://core.svn.wordpress.org/trunk@30730 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -988,14 +988,17 @@ th.action-links {
 }
 
 .wp-filter .search-form {
-	float: left;
+	margin: 10px;
-	margin-top: 9px;
+	position: absolute;
+	left: 0;
+	top: 0;
 }
 
 .wp-filter .search-form input[type="search"] {
 	margin: 0;
 	padding: 3px 5px;
-	width: 280px;
+	max-width: 280px;
+	width: 100%;
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 1.5;
@@ -1054,6 +1057,7 @@ th.action-links {
 .show-filters .filter-drawer {
 	display: block;
 	overflow: hidden;
+	width: 100%;
 }
 
 .show-filters .wp-filter .drawer-toggle:hover,
@@ -1084,17 +1088,13 @@ th.action-links {
 	float: right;
 	margin: 0 0 0 1%;
 	padding: 10px;
-	width: 19%;
+	width: 24%;
 	background: #fff;
 	border: 1px solid #e5e5e5;
 	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 	box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 }
 
-.filter-group.wide {
-	width: 38%;
-}
-
 .filter-group h4 {
 	position: relative;
 	margin: 0;
@@ -1190,11 +1190,6 @@ th.action-links {
 }
 
 @media only screen and (max-width: 1120px) {
-	.wp-filter .search-form {
-		float: none;
-		margin: 20px 0;
-	}
-
 	.filter-drawer {
 		border-bottom: 1px solid #eee;
 	}
@@ -1210,12 +1205,34 @@ th.action-links {
 	}
 }
 
+@media only screen and (max-width: 910px) {
+	.wp-filter .search-form {
+		float: none; /* Remove float from media-views.css */
+		position: relative;
+		margin: 20px 0;
+	}
+}
+
 @media only screen and (max-width: 782px) {
-	.filter-group,
 	.filter-group li {
-		width: 100%;
+		padding: 0;
+		width: 50%;
+	}
+}
+
+@media only screen and (max-width: 320px) {
+	.filter-count {
+		display: none;
 	}
 
+	.wp-filter .drawer-toggle {
+		margin: 10px 0;
+	}
+
+	.filter-group li,
+	.wp-filter .search-form input[type="search"] {
+		width: 100%;
+	}
 }
 
 /*------------------------------------------------------------------------------

wp-admin/css/common.css

@@ -988,14 +988,17 @@ th.action-links {
 }
 
 .wp-filter .search-form {
-	float: right;
+	margin: 10px;
-	margin-top: 9px;
+	position: absolute;
+	right: 0;
+	top: 0;
 }
 
 .wp-filter .search-form input[type="search"] {
 	margin: 0;
 	padding: 3px 5px;
-	width: 280px;
+	max-width: 280px;
+	width: 100%;
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 1.5;
@@ -1054,6 +1057,7 @@ th.action-links {
 .show-filters .filter-drawer {
 	display: block;
 	overflow: hidden;
+	width: 100%;
 }
 
 .show-filters .wp-filter .drawer-toggle:hover,
@@ -1084,17 +1088,13 @@ th.action-links {
 	float: left;
 	margin: 0 1% 0 0;
 	padding: 10px;
-	width: 19%;
+	width: 24%;
 	background: #fff;
 	border: 1px solid #e5e5e5;
 	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 	box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 }
 
-.filter-group.wide {
-	width: 38%;
-}
-
 .filter-group h4 {
 	position: relative;
 	margin: 0;
@@ -1190,11 +1190,6 @@ th.action-links {
 }
 
 @media only screen and (max-width: 1120px) {
-	.wp-filter .search-form {
-		float: none;
-		margin: 20px 0;
-	}
-
 	.filter-drawer {
 		border-bottom: 1px solid #eee;
 	}
@@ -1210,12 +1205,34 @@ th.action-links {
 	}
 }
 
+@media only screen and (max-width: 910px) {
+	.wp-filter .search-form {
+		float: none; /* Remove float from media-views.css */
+		position: relative;
+		margin: 20px 0;
+	}
+}
+
 @media only screen and (max-width: 782px) {
-	.filter-group,
 	.filter-group li {
-		width: 100%;
+		padding: 0;
+		width: 50%;
+	}
+}
+
+@media only screen and (max-width: 320px) {
+	.filter-count {
+		display: none;
 	}
 
+	.wp-filter .drawer-toggle {
+		margin: 10px 0;
+	}
+
+	.filter-group li,
+	.wp-filter .search-form input[type="search"] {
+		width: 100%;
+	}
 }
 
 /*------------------------------------------------------------------------------

wp-admin/css/media-rtl.css

@@ -1129,6 +1129,11 @@ audio, video {
 	.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
 		float: none;
 	}
+
+	/* override for media-views.css */
+	#wp-media-grid .wp-filter .attachment-filters {
+		max-width: 100%;
+	}
 }
 
 @media only screen and ( max-width: 782px ) {

wp-admin/css/media.css

@@ -1129,6 +1129,11 @@ audio, video {
 	.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
 		float: none;
 	}
+
+	/* override for media-views.css */
+	#wp-media-grid .wp-filter .attachment-filters {
+		max-width: 100%;
+	}
 }
 
 @media only screen and ( max-width: 782px ) {

wp-admin/css/themes-rtl.css

@@ -31,7 +31,8 @@
 	top: -2px;
 	right: 20px;
 	margin: 0;
-	width: 280px;
+	max-width: 280px;
+	width: 100%;
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 1.5;
@@ -1720,6 +1721,10 @@ body.full-overlay-active {
 	.theme-install-overlay .wp-full-overlay-main {
 		background-image: url(../images/spinner-2x.gif);
 	}
+
+	.theme-install-overlay .wp-full-overlay-header .theme-install {
+		margin-top: 2px;
+	}
 }
 
 @media screen and ( max-width: 782px ) {

wp-admin/css/themes.css

@@ -31,7 +31,8 @@
 	top: -2px;
 	left: 20px;
 	margin: 0;
-	width: 280px;
+	max-width: 280px;
+	width: 100%;
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 1.5;
@@ -1720,6 +1721,10 @@ body.full-overlay-active {
 	.theme-install-overlay .wp-full-overlay-main {
 		background-image: url(../images/spinner-2x.gif);
 	}
+
+	.theme-install-overlay .wp-full-overlay-header .theme-install {
+		margin-top: 2px;
+	}
 }
 
 @media screen and ( max-width: 782px ) {

wp-admin/theme-install.php

@@ -145,11 +145,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 		<?php
 		$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="filter-group">';
-				echo '<div class="filter-group wide">';
-			} else {
-				echo '<div class="filter-group">';
-			}
 			$feature_name = esc_html( $feature_name );
 			echo '<h4>' . $feature_name . '</h4>';
 			echo '<ol class="feature-group">';

wp-includes/css/media-views-rtl.css

@@ -2148,7 +2148,6 @@
 }
 
 @media only screen and (max-width: 940px) {
-	.media-frame-content .media-toolbar-primary .search,
 	.media-frame-content .media-toolbar-secondary .attachment-filters {
 		max-width: 134px;
 	}
@@ -2467,7 +2466,6 @@
 }
 
 @media only screen and (max-width: 480px) {
-	.media-frame-content .media-toolbar .search,
 	.media-frame-content .media-toolbar .attachment-filters {
 		max-width: 90px;
 	}

wp-includes/css/media-views.css

@@ -2148,7 +2148,6 @@
 }
 
 @media only screen and (max-width: 940px) {
-	.media-frame-content .media-toolbar-primary .search,
 	.media-frame-content .media-toolbar-secondary .attachment-filters {
 		max-width: 134px;
 	}
@@ -2467,7 +2466,6 @@
 }
 
 @media only screen and (max-width: 480px) {
-	.media-frame-content .media-toolbar .search,
 	.media-frame-content .media-toolbar .attachment-filters {
 		max-width: 90px;
 	}

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.1-beta2-30739';
+$wp_version = '4.1-beta2-30740';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.