Changeset 31384

Timestamp:

02/09/2015 12:35:38 PM (10 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 ) {