From e27c43d3868ae1bbfc8712398194d1f2812839a4 Mon Sep 17 00:00:00 2001 From: Konstantin Obenland Date: Wed, 18 Oct 2017 15:10:19 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@41903 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/customize-controls.css | 33 +++++++++++-- src/wp-admin/js/customize-controls.js | 28 +++++++---- .../class-wp-customize-themes-section.php | 46 ++++++++++++------- 3 files changed, 76 insertions(+), 31 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index a7197c4591..fe62d8dd20 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -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; diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index c2a63b068f..c5cdfe9334 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -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 ); } diff --git a/src/wp-includes/customize/class-wp-customize-themes-section.php b/src/wp-includes/customize/class-wp-customize-themes-section.php index 947f5eb179..b89e6b55ea 100644 --- a/src/wp-includes/customize/class-wp-customize-themes-section.php +++ b/src/wp-includes/customize/class-wp-customize-themes-section.php @@ -80,6 +80,9 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
filter_bar_content_template(); ?>
+ <# if ( 'wporg' === data.action ) { #> + filter_drawer_content_template(); ?> + <# } #> @@ -125,22 +128,6 @@ class WP_Customize_Themes_Section extends WP_Customize_Section { ?> -
- $features ) { - echo '
'; - echo '' . esc_html( $feature_name ) . ''; - echo '
'; - foreach ( $features as $feature => $feature_name ) { - echo ' '; - echo '
'; - } - echo '
'; - echo '
'; - } - ?> -
<# } else { #>
@@ -159,4 +146,31 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
+
+ $features ) : ?> +
+ +
+ $feature_name ) : ?> + +
+ +
+
+ +
+