From da09ac082bce8734fe5085fef41dff372ea82109 Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Mon, 9 Feb 2015 12:35:38 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@31384 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css | 79 ++++++++++++++++++++++++-
 src/wp-admin/css/customize-widgets.css  | 16 ++++-
 src/wp-admin/customize.php              |  4 ++
 src/wp-admin/js/customize-controls.js   |  9 +++
 4 files changed, 105 insertions(+), 3 deletions(-)

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 );
 			?>
 			<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>
 			</a>
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() {