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
This commit is contained in:
Helen Hou-Sandí 2014-12-04 22:23:25 +00:00
parent 543f408098
commit f5efcf295b
14 changed files with 94 additions and 48 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -145,11 +145,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
<?php <?php
$feature_list = get_theme_feature_list(); $feature_list = get_theme_feature_list();
foreach ( $feature_list as $feature_name => $features ) { 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 ); $feature_name = esc_html( $feature_name );
echo '<h4>' . $feature_name . '</h4>'; echo '<h4>' . $feature_name . '</h4>';
echo '<ol class="feature-group">'; echo '<ol class="feature-group">';

View File

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

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.