Customize: Improve theme browsing UI on small screens.

Props Mahvash-Fatima, melchoyce, celloexpressions.
See #37661.
Fixes #42215.

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


git-svn-id: http://core.svn.wordpress.org/trunk@41727 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-10-18 04:06:47 +00:00
parent 41bb2125b0
commit 43b4a2577d
11 changed files with 143 additions and 63 deletions

View File

@ -2020,10 +2020,6 @@ p.customize-section-description {
display: none; /* Hide "installed" notice on installed themes tab. */
}
.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
margin: 0 8px 0 0;
}
.customize-control-theme .theme {
width: 100%;
margin: 0;
@ -2094,6 +2090,21 @@ p.customize-section-description {
font-size: 15px;
}
.theme-id-container {
position: relative;
}
.theme-browser .theme.active .theme-actions,
.wp-customizer .theme-browser .theme .theme-actions {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
padding: 10px 15px;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
}
#customize-controls .theme-overlay .theme-name {
font-size: 32px;
}
@ -2118,13 +2129,15 @@ p.customize-section-description {
.themes-filter-bar .wp-filter-search {
line-height: 25px;
padding: 3px 5px;
padding: 6px 30px 6px 10px;
max-width: 100%;
width: 40%;
min-width: 300px;
position: absolute;
top: 6px;
right: 25px;
height: 32px;
margin: 1px 0;
}
/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
@ -2233,7 +2246,7 @@ p.customize-section-description {
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
right: 0;
top: 0;
height: 42px;
height: 46px;
width: 26px;
display: block;
line-height: 46px;
@ -2253,6 +2266,10 @@ p.customize-section-description {
.showing-themes #customize-header-actions {
display: none;
}
#customize-controls {
width: 100%;
}
}
/* Details View */
@ -2363,6 +2380,10 @@ p.customize-section-description {
top: 0;
bottom: 0;
}
.wp-customizer .theme-browser .themes {
padding-left: 25px;
}
}
/* Handle cheaters. */
@ -2677,7 +2698,7 @@ body.adding-widget .add-new-widget:before,
}
#available-menu-items-search .search-icon:after,
#available-widgets-filter .search-icon:after {
.themes-filter-bar .search-icon:after {
content: "\f179";
font: normal 20px/1 dashicons;
vertical-align: middle;
@ -2685,6 +2706,18 @@ body.adding-widget .add-new-widget:before,
-moz-osx-font-smoothing: grayscale;
}
.themes-filter-bar .search-icon {
position: absolute;
top: 7px;
right: 26px;
z-index: 1;
color: #72777c;
height: 30px;
width: 30px;
line-height: 2;
text-align: center;
}
.no-widgets-found-message {
display: none;
margin: 0;
@ -2797,6 +2830,10 @@ body.adding-widget .add-new-widget:before,
.media-widget-control .media-widget-buttons .button.select-media {
margin-top: 12px;
}
.wp-core-ui .themes-filter-bar .feature-filter-toggle {
margin: 3px 25px 3px 0;
}
}
@media screen and ( max-width: 1200px ) {
@ -2808,9 +2845,6 @@ body.adding-widget .add-new-widget:before,
}
@media screen and ( max-width: 640px ) {
#customize-controls {
width: 100%;
}
.wp-full-overlay.expanded,
.outer-section-open .wp-full-overlay.expanded {
@ -2846,7 +2880,7 @@ body.adding-widget .add-new-widget:before,
}
#customize-footer-actions,
#customize-preview,
/*#customize-preview,*/
.customize-controls-preview-toggle .controls,
.preview-only .wp-full-overlay-sidebar-content,
.preview-only .customize-controls-preview-toggle .preview {
@ -2879,10 +2913,8 @@ body.adding-widget .add-new-widget:before,
display: block;
}
#customize-preview {
top: 45px;
bottom: 0;
height: auto;
.wp-full-overlay.expanded {
margin-right: 300px;
}
.wp-core-ui.wp-customizer .button {
@ -2891,8 +2923,6 @@ body.adding-widget .add-new-widget:before,
font-size: 14px;
vertical-align: middle;
height: auto;
margin-bottom: 4px;
margin-top: 12px;
}
#publish-settings {
@ -2974,4 +3004,14 @@ body.adding-widget .add-new-widget:before,
.reordering .reorder-done {
padding: 8px;
}
.wp-core-ui .themes-filter-bar .feature-filter-toggle {
margin: 0;
}
.theme-browser .theme.active .theme-actions,
.wp-customizer .theme-browser .theme .theme-actions {
padding: 9px 15px;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
}
}

File diff suppressed because one or more lines are too long

View File

@ -2020,10 +2020,6 @@ p.customize-section-description {
display: none; /* Hide "installed" notice on installed themes tab. */
}
.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
margin: 0 0 0 8px;
}
.customize-control-theme .theme {
width: 100%;
margin: 0;
@ -2094,6 +2090,21 @@ p.customize-section-description {
font-size: 15px;
}
.theme-id-container {
position: relative;
}
.theme-browser .theme.active .theme-actions,
.wp-customizer .theme-browser .theme .theme-actions {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
padding: 10px 15px;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
}
#customize-controls .theme-overlay .theme-name {
font-size: 32px;
}
@ -2118,13 +2129,15 @@ p.customize-section-description {
.themes-filter-bar .wp-filter-search {
line-height: 25px;
padding: 3px 5px;
padding: 6px 10px 6px 30px;
max-width: 100%;
width: 40%;
min-width: 300px;
position: absolute;
top: 6px;
left: 25px;
height: 32px;
margin: 1px 0;
}
/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
@ -2233,7 +2246,7 @@ p.customize-section-description {
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
left: 0;
top: 0;
height: 42px;
height: 46px;
width: 26px;
display: block;
line-height: 46px;
@ -2253,6 +2266,10 @@ p.customize-section-description {
.showing-themes #customize-header-actions {
display: none;
}
#customize-controls {
width: 100%;
}
}
/* Details View */
@ -2363,6 +2380,10 @@ p.customize-section-description {
top: 0;
bottom: 0;
}
.wp-customizer .theme-browser .themes {
padding-right: 25px;
}
}
/* Handle cheaters. */
@ -2677,7 +2698,7 @@ body.adding-widget .add-new-widget:before,
}
#available-menu-items-search .search-icon:after,
#available-widgets-filter .search-icon:after {
.themes-filter-bar .search-icon:after {
content: "\f179";
font: normal 20px/1 dashicons;
vertical-align: middle;
@ -2685,6 +2706,18 @@ body.adding-widget .add-new-widget:before,
-moz-osx-font-smoothing: grayscale;
}
.themes-filter-bar .search-icon {
position: absolute;
top: 7px;
left: 26px;
z-index: 1;
color: #72777c;
height: 30px;
width: 30px;
line-height: 2;
text-align: center;
}
.no-widgets-found-message {
display: none;
margin: 0;
@ -2797,6 +2830,10 @@ body.adding-widget .add-new-widget:before,
.media-widget-control .media-widget-buttons .button.select-media {
margin-top: 12px;
}
.wp-core-ui .themes-filter-bar .feature-filter-toggle {
margin: 3px 0 3px 25px;
}
}
@media screen and ( max-width: 1200px ) {
@ -2808,9 +2845,6 @@ body.adding-widget .add-new-widget:before,
}
@media screen and ( max-width: 640px ) {
#customize-controls {
width: 100%;
}
.wp-full-overlay.expanded,
.outer-section-open .wp-full-overlay.expanded {
@ -2846,7 +2880,7 @@ body.adding-widget .add-new-widget:before,
}
#customize-footer-actions,
#customize-preview,
/*#customize-preview,*/
.customize-controls-preview-toggle .controls,
.preview-only .wp-full-overlay-sidebar-content,
.preview-only .customize-controls-preview-toggle .preview {
@ -2879,10 +2913,8 @@ body.adding-widget .add-new-widget:before,
display: block;
}
#customize-preview {
top: 45px;
bottom: 0;
height: auto;
.wp-full-overlay.expanded {
margin-left: 300px;
}
.wp-core-ui.wp-customizer .button {
@ -2891,8 +2923,6 @@ body.adding-widget .add-new-widget:before,
font-size: 14px;
vertical-align: middle;
height: auto;
margin-bottom: 4px;
margin-top: 12px;
}
#publish-settings {
@ -2974,4 +3004,14 @@ body.adding-widget .add-new-widget:before,
.reordering .reorder-done {
padding: 8px;
}
.wp-core-ui .themes-filter-bar .feature-filter-toggle {
margin: 0;
}
.theme-browser .theme.active .theme-actions,
.wp-customizer .theme-browser .theme .theme-actions {
padding: 9px 15px;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
}
}

File diff suppressed because one or more lines are too long

View File

@ -97,11 +97,7 @@ body.js .theme-browser.search-loading {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
transition: opacity 0.1s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
height: 38px;
padding: 9px 10px 0 10px;
height: auto;
background: rgba(244, 244, 244, 0.7);
border-right: 1px solid rgba(0,0,0,0.05);
}

File diff suppressed because one or more lines are too long

View File

@ -97,11 +97,7 @@ body.js .theme-browser.search-loading {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
transition: opacity 0.1s ease-in-out;
position: absolute;
bottom: 0;
right: 0;
height: 38px;
padding: 9px 10px 0 10px;
height: auto;
background: rgba(244, 244, 244, 0.7);
border-left: 1px solid rgba(0,0,0,0.05);
}

File diff suppressed because one or more lines are too long

View File

@ -99,26 +99,32 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
<# } #>
<# if ( data.theme.active ) { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
<?php
/* translators: %s: theme name */
printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
?>
</h3>
<div class="theme-actions">
<button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
<div class="theme-id-container">
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
<?php
/* translators: %s: theme name */
printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
?>
</h3>
<div class="theme-actions">
<button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
</div>
</div>
<div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
<# } else if ( 'installed' === data.theme.type ) { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
<div class="theme-id-container">
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
</div>
</div>
<div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
<# } else { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
<div class="theme-id-container">
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
</div>
</div>
<# } #>
</div>

View File

@ -114,6 +114,7 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
<div class="search-form">
<label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
<input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
<div class="search-icon" aria-hidden="true"></div>
<span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
</div>
<button type="button" class="button feature-filter-toggle">
@ -144,6 +145,7 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
<div class="themes-filter-container">
<label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
<input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
<div class="search-icon" aria-hidden="true"></div>
<span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
</div>
<# } #>

View File

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