Customize: Improve theme browsing UI on small screens.
Props Mahvash-Fatima, melchoyce, celloexpressions. See #37661. Fixes #42215. git-svn-id: https://develop.svn.wordpress.org/trunk@41893 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
parent
92f9610907
commit
18057a93a2
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 & 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 & Preview' ); ?></button>
|
||||
</div>
|
||||
</div>
|
||||
<# } #>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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…' ); ?></label>
|
||||
<input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes…' ); ?>" 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…' ); ?></label>
|
||||
<input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes…' ); ?>" 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>
|
||||
<# } #>
|
||||
|
|
|
|||
Loading…
Reference in New Issue