Changeset 31384

Timestamp:

02/09/2015 12:35:38 PM (11 years ago)

Author:

ocean90

Message:

Improve the Customize experience on mobile.

Before: ​https://make.wordpress.org/flow/2015/02/02/a-peek-at-the-customizer-on-an-iphone-6/
After: ​https://make.wordpress.org/flow/2015/02/03/vizrec-for-28784-improve-the-customize-experience-on-mobile-iphone-6-28784-diff-4-2-alpha-31325/

props celloexpressions.
see #28784.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (3 diffs)
• css/customize-widgets.css (modified) (2 diffs)
• customize.php (modified) (1 diff)
• js/customize-controls.js (modified) (1 diff)

trunk/src/wp-admin/css/customize-controls.css

@@ -236 +236 @@
 .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;
@@ -310 +312 @@
 
 #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;
@@ -849 +851 @@
         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;
+        }
+}

trunk/src/wp-admin/css/customize-widgets.css

@@ -345 +345 @@
         margin: 0;
         z-index: 1;
-        background: #fff;
+        background: #fff !important;
         -webkit-transition: all 0.2s;
         transition: all 0.2s;
@@ -608 +608 @@
         }
 }
+
+@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;
+        }
+}

trunk/src/wp-admin/customize.php

@@ -127 +127 @@
                         ?>
                         <span class="spinner"></span>
+                        <a class="customize-controls-preview-toggle" href="#">
+                                <span class="controls"><?php _e( 'Customize' ); ?></span>
+                                <span class="preview"><?php _e( 'Preview' ); ?></span>
+                        </a>
                         <a class="customize-controls-close" href="<?php echo esc_url( $return ); ?>">
                                 <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>

trunk/src/wp-admin/js/customize-controls.js

@@ -2240 +2240 @@
                 });
 
+                $( '.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 ) {