Theme Installer: Better responsive styles for feature filters.

props matveb.
fixes #27661.

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


git-svn-id: http://core.svn.wordpress.org/trunk@27789 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin 2014-04-05 20:04:14 +00:00
parent e36c1cbf9e
commit c5127a9232
5 changed files with 41 additions and 19 deletions

View File

@ -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-left: 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 10px 0 0;
margin: 0 10px 20px 0;
}
.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: right;
.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 {

View File

@ -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 {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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>