diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 599fdac310..2a5014c893 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -235,7 +235,9 @@ body { .customize-controls-close:focus, .customize-controls-close:hover, .control-panel-back:focus, -.control-panel-back:hover { +.control-panel-back:hover, +.customize-controls-preview-toggle:focus, +.customize-controls-preview-toggle:hover { background: #ddd; border-color: #ccc; color: #000; @@ -309,7 +311,7 @@ body { } #customize-theme-controls .control-section.current-panel > h3.accordion-section-title { - left: -300px; + left: -354px; -webkit-transition: left ease-in-out .18s; transition: left ease-in-out .18s; } @@ -848,3 +850,76 @@ body.cheatin p { line-height: 1.5; margin: 25px 0 20px; } + +/* Responsive */ +.customize-controls-preview-toggle { + display: none; +} + +@media screen and ( max-width: 640px ) { + #customize-controls { + width: 100%; + } + + .wp-full-overlay.expanded { + margin-left: 0; + } + + .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content { + bottom: 0; + } + + .customize-controls-preview-toggle { + display: block; + position: absolute; + top: 0; + left: 48px; + line-height: 45px; + font-size: 14px; + padding: 0 12px 0 12px; + margin: 0; + height: 45px; + background: #eee; + border-right: 1px solid #ddd; + color: #444; + cursor: pointer; + -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; + transition: color .1s ease-in-out, background .1s ease-in-out; + } + + #customize-footer-actions, + #customize-preview, + .customize-controls-preview-toggle .controls, + .preview-only .wp-full-overlay-sidebar-content, + .preview-only .customize-controls-preview-toggle .preview { + display: none; + } + + .customize-controls-preview-toggle .preview:before, + .customize-controls-preview-toggle .controls:before { + font: normal 20px/1 dashicons; + content: "\f177"; + position: relative; + top: 4px; + margin-right: 6px; + } + + .customize-controls-preview-toggle .controls:before { + content: "\f100"; + } + + .preview-only #customize-controls { + height: 45px; + } + + .preview-only #customize-preview, + .preview-only .customize-controls-preview-toggle .controls { + display: block; + } + + #customize-preview { + top: 45px; + bottom: 0; + height: auto; + } +} diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css index 14b09cf814..f60bb29329 100644 --- a/src/wp-admin/css/customize-widgets.css +++ b/src/wp-admin/css/customize-widgets.css @@ -344,7 +344,7 @@ body.adding-widget .add-new-widget:before { width: 300px; margin: 0; z-index: 1; - background: #fff; + background: #fff !important; -webkit-transition: all 0.2s; transition: all 0.2s; border-right: 1px solid #dddddd; @@ -607,3 +607,17 @@ body.adding-widget #customize-preview { top: 8px; } } + +@media screen and ( max-width: 640px ) { + body.adding-widget div#available-widgets { + left: 0; + z-index: 10; + width: 100%; + } + + #available-widgets-filter { + position: static; + width: 100%; + height: auto; + } +} diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php index 178db28243..195e754178 100644 --- a/src/wp-admin/customize.php +++ b/src/wp-admin/customize.php @@ -126,6 +126,10 @@ do_action( 'customize_controls_print_scripts' ); submit_button( $save_text, 'primary save', 'save', false ); ?> + + + + diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 7c4a631ca9..fefdef03c7 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -2239,6 +2239,15 @@ event.preventDefault(); }); + $( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + + overlay.toggleClass( 'preview-only' ); + event.preventDefault(); + }); + // Bind site title display to the corresponding field. if ( title.length ) { $( '#customize-control-blogname input' ).on( 'input', function() {