mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-22 17:18:32 +01:00
Customize: Unstick filter pane in Theme selector
Prevents the filter pane from blocking the view of theme search results when it's open. Users are now able to just scroll to view results. Props rclations. Fixes #42212. Built from https://develop.svn.wordpress.org/trunk@41903 git-svn-id: http://core.svn.wordpress.org/trunk@41737 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Konstantin Obenland
parent
ac5096d8bd
commit
d8f98b3649
@ -1761,6 +1761,14 @@ p.customize-section-description {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1670px) {
|
||||
.control-panel-themes .customize-themes-full-container {
|
||||
width: 82%;
|
||||
left: 0;
|
||||
right: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-open .control-panel-themes .customize-themes-full-container {
|
||||
overflow-y: visible;
|
||||
}
|
||||
@ -1835,7 +1843,7 @@ p.customize-section-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.themes-filter-bar .filter-drawer {
|
||||
.filter-drawer {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
@ -1848,7 +1856,7 @@ p.customize-section-description {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.themes-filter-bar .filter-group {
|
||||
.filter-drawer .filter-group {
|
||||
margin: 0 0 0 25px;
|
||||
width: calc( (100% - 75px) / 3);
|
||||
min-width: 200px;
|
||||
@ -2122,6 +2130,14 @@ p.customize-section-description {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1670px) {
|
||||
.customize-preview-header.themes-filter-bar {
|
||||
width: 82%;
|
||||
left: 0;
|
||||
right: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.themes-filter-bar .themes-filter-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -2149,6 +2165,9 @@ p.customize-section-description {
|
||||
width: 100%;
|
||||
margin: 0 0 25px 0;
|
||||
}
|
||||
.filter-drawer {
|
||||
top: 46px;
|
||||
}
|
||||
.wp-customizer .theme-browser .themes {
|
||||
padding: 0 25px 25px 0;
|
||||
overflow: hidden;
|
||||
@ -2163,7 +2182,7 @@ p.customize-section-description {
|
||||
}
|
||||
|
||||
@media screen and (max-width:1018px) {
|
||||
.themes-filter-bar .filter-group {
|
||||
.filter-drawer .filter-group {
|
||||
width: calc( (100% - 50px) / 2);
|
||||
}
|
||||
}
|
||||
@ -2180,7 +2199,7 @@ p.customize-section-description {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.themes-filter-bar .filter-drawer {
|
||||
.filter-drawer {
|
||||
top: 86px;
|
||||
}
|
||||
|
||||
@ -2190,7 +2209,7 @@ p.customize-section-description {
|
||||
}
|
||||
|
||||
@media screen and (max-width:792px) {
|
||||
.themes-filter-bar .filter-group {
|
||||
.filter-drawer .filter-group {
|
||||
width: calc( 100% - 25px);
|
||||
}
|
||||
}
|
||||
@ -2202,6 +2221,10 @@ p.customize-section-description {
|
||||
/* Mobile - toggle between themes and filters */
|
||||
@media screen and (max-width:600px) {
|
||||
|
||||
.filter-drawer {
|
||||
top: 132px;
|
||||
}
|
||||
|
||||
.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
2
wp-admin/css/customize-controls-rtl.min.css
vendored
2
wp-admin/css/customize-controls-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1761,6 +1761,14 @@ p.customize-section-description {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1670px) {
|
||||
.control-panel-themes .customize-themes-full-container {
|
||||
width: 82%;
|
||||
right: 0;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-open .control-panel-themes .customize-themes-full-container {
|
||||
overflow-y: visible;
|
||||
}
|
||||
@ -1835,7 +1843,7 @@ p.customize-section-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.themes-filter-bar .filter-drawer {
|
||||
.filter-drawer {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
@ -1848,7 +1856,7 @@ p.customize-section-description {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.themes-filter-bar .filter-group {
|
||||
.filter-drawer .filter-group {
|
||||
margin: 0 25px 0 0;
|
||||
width: calc( (100% - 75px) / 3);
|
||||
min-width: 200px;
|
||||
@ -2122,6 +2130,14 @@ p.customize-section-description {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1670px) {
|
||||
.customize-preview-header.themes-filter-bar {
|
||||
width: 82%;
|
||||
right: 0;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.themes-filter-bar .themes-filter-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -2149,6 +2165,9 @@ p.customize-section-description {
|
||||
width: 100%;
|
||||
margin: 0 0 25px 0;
|
||||
}
|
||||
.filter-drawer {
|
||||
top: 46px;
|
||||
}
|
||||
.wp-customizer .theme-browser .themes {
|
||||
padding: 0 0 25px 25px;
|
||||
overflow: hidden;
|
||||
@ -2163,7 +2182,7 @@ p.customize-section-description {
|
||||
}
|
||||
|
||||
@media screen and (max-width:1018px) {
|
||||
.themes-filter-bar .filter-group {
|
||||
.filter-drawer .filter-group {
|
||||
width: calc( (100% - 50px) / 2);
|
||||
}
|
||||
}
|
||||
@ -2180,7 +2199,7 @@ p.customize-section-description {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.themes-filter-bar .filter-drawer {
|
||||
.filter-drawer {
|
||||
top: 86px;
|
||||
}
|
||||
|
||||
@ -2190,7 +2209,7 @@ p.customize-section-description {
|
||||
}
|
||||
|
||||
@media screen and (max-width:792px) {
|
||||
.themes-filter-bar .filter-group {
|
||||
.filter-drawer .filter-group {
|
||||
width: calc( 100% - 25px);
|
||||
}
|
||||
}
|
||||
@ -2202,6 +2221,10 @@ p.customize-section-description {
|
||||
/* Mobile - toggle between themes and filters */
|
||||
@media screen and (max-width:600px) {
|
||||
|
||||
.filter-drawer {
|
||||
top: 132px;
|
||||
}
|
||||
|
||||
.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
|
||||
display: block;
|
||||
float: right;
|
||||
|
||||
2
wp-admin/css/customize-controls.min.css
vendored
2
wp-admin/css/customize-controls.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1799,21 +1799,29 @@
|
||||
|
||||
// Toggle feature filters.
|
||||
section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
|
||||
$( e.currentTarget )
|
||||
var $themeContainer = $( '.customize-themes-full-container' ),
|
||||
$filterToggle = $( e.currentTarget );
|
||||
section.filtersHeight = $filterToggle.parent().next( '.filter-drawer' ).height();
|
||||
|
||||
if ( 0 < $themeContainer.scrollTop() ) {
|
||||
$themeContainer.animate( { scrollTop: 0 }, 400 );
|
||||
|
||||
if ( $filterToggle.hasClass( 'open' ) ) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
$filterToggle
|
||||
.toggleClass( 'open' )
|
||||
.attr( 'aria-expanded', function( i, attr ) {
|
||||
return 'true' === attr ? 'false' : 'true';
|
||||
})
|
||||
.next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
|
||||
if ( 0 === section.filtersHeight ) {
|
||||
section.filtersHeight = $( this ).height();
|
||||
.parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' );
|
||||
|
||||
// First time, so it's opened.
|
||||
section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
|
||||
}
|
||||
});
|
||||
if ( $( e.currentTarget ).hasClass( 'open' ) ) {
|
||||
section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
|
||||
if ( $filterToggle.hasClass( 'open' ) ) {
|
||||
var marginOffset = 1018 < window.innerWidth ? 50 : 76;
|
||||
|
||||
section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + marginOffset );
|
||||
} else {
|
||||
section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
|
||||
}
|
||||
|
||||
2
wp-admin/js/customize-controls.min.js
vendored
2
wp-admin/js/customize-controls.min.js
vendored
File diff suppressed because one or more lines are too long
@ -80,6 +80,9 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
|
||||
<div class="customize-preview-header themes-filter-bar">
|
||||
<?php $this->filter_bar_content_template(); ?>
|
||||
</div>
|
||||
<# if ( 'wporg' === data.action ) { #>
|
||||
<?php $this->filter_drawer_content_template(); ?>
|
||||
<# } #>
|
||||
<div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server’s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
|
||||
<ul class="themes">
|
||||
</ul>
|
||||
@ -125,22 +128,6 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
|
||||
?>
|
||||
</span>
|
||||
</button>
|
||||
<div class="filter-drawer filter-details">
|
||||
<?php
|
||||
$feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
|
||||
foreach ( $feature_list as $feature_name => $features ) {
|
||||
echo '<fieldset class="filter-group">';
|
||||
echo '<legend>' . esc_html( $feature_name ) . '</legend>';
|
||||
echo '<div class="filter-group-feature">';
|
||||
foreach ( $features as $feature => $feature_name ) {
|
||||
echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
|
||||
echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
|
||||
}
|
||||
echo '</div>';
|
||||
echo '</fieldset>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<# } else { #>
|
||||
<div class="themes-filter-container">
|
||||
<label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes…' ); ?></label>
|
||||
@ -159,4 +146,31 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the filter drawer portion of a themes section as a JS template.
|
||||
*
|
||||
* The template is only rendered by PHP once, so all actions are prepared at once on the server side.
|
||||
* The filter bar container is rendered by @see `render_template()`.
|
||||
*
|
||||
* @since 4.9.0
|
||||
*/
|
||||
protected function filter_drawer_content_template() {
|
||||
$feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
|
||||
?>
|
||||
<div class="filter-drawer filter-details">
|
||||
<?php foreach ( $feature_list as $feature_name => $features ) : ?>
|
||||
<fieldset class="filter-group">
|
||||
<legend><?php echo esc_html( $feature_name ); ?></legend>
|
||||
<div class="filter-group-feature">
|
||||
<?php foreach ( $features as $feature => $feature_name ) : ?>
|
||||
<input type="checkbox" id="filter-id-<?php echo esc_attr( $feature ); ?>" value="<?php echo esc_attr( $feature ); ?>" />
|
||||
<label for="filter-id-<?php echo esc_attr( $feature ); ?>"><?php echo esc_html( $feature_name ); ?></label><br>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</fieldset>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.9-beta2-41902';
|
||||
$wp_version = '4.9-beta2-41903';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user