From 5f9c6ef4ae6e54b39123d4c6f5eed0054c1ffcb8 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Fri, 11 Nov 2016 09:46:47 +0000
Subject: [PATCH] Customize: Remove left-margin guard from edit shortcuts and
 adjust for small screen sizes.

Removes the `.customize-partial-edit-shortcut-left-margin` class which was not effective on some themes, created a worse experience for other themes, and which did not recalculate when the preview was reflowed or resized. Now some small-width media queries are added to handle common cases while more dramatic issues can be handled by the theme. Also renames `Partial.positionEditShortcut()`to `Partial.addEditShortcutToPlacement()` which is a more accurate description of its function.

Props sirbrillig, sstoqnov.
See #38651, #27403.


git-svn-id: https://develop.svn.wordpress.org/trunk@39202 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/css/customize-preview.css     | 31 ++++++++++++++-----
 .../js/customize-selective-refresh.js         | 12 +++----
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/wp-includes/css/customize-preview.css b/src/wp-includes/css/customize-preview.css
index c245d25248..c72675eeba 100644
--- a/src/wp-includes/css/customize-preview.css
+++ b/src/wp-includes/css/customize-preview.css
@@ -35,11 +35,16 @@
 	border: 1px solid #0085ba;
 }
 
-/* Styles for the actual shortcut */
+/**
+ * Styles for the actual shortcut
+ *
+ * Note that some properties are overly verbose to prevent theme interference.
+ */
 .widget .customize-partial-edit-shortcut button,
 .customize-partial-edit-shortcut button {
 	position: absolute;
-	left: -36px;
+	left: -30px;
+	top: 2px;
 	color: #fff;
 	width: 30px;
 	height: 30px;
@@ -101,10 +106,6 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut bu
 	visibility: hidden;
 }
 
-.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
-	left: 0;
-}
-
 @-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
 	from, 20%, 40%, 60%, 80%, to {
 		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@@ -242,7 +243,23 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut bu
 }
 
 @media screen and (max-width:800px) {
+	.widget .customize-partial-edit-shortcut button,
 	.customize-partial-edit-shortcut button {
-		left: -18px; /* Assume there will be less of a margin available on smaller screens */
+		left: -32px;
+	}
+}
+
+@media screen and (max-width:320px) {
+	.site-title {
+		padding-left: 10px;
+	}
+
+	.widget-area .widget {
+		padding-left: 10px;
+	}
+
+	.widget .customize-partial-edit-shortcut button,
+	.customize-partial-edit-shortcut button {
+		left: -30px;
 	}
 }
diff --git a/src/wp-includes/js/customize-selective-refresh.js b/src/wp-includes/js/customize-selective-refresh.js
index 70e2b96cc0..e97b1cf0a1 100644
--- a/src/wp-includes/js/customize-selective-refresh.js
+++ b/src/wp-includes/js/customize-selective-refresh.js
@@ -118,7 +118,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
 				return;
 			}
 			$shortcut = partial.createEditShortcut();
-			partial.positionEditShortcut( placement, $shortcut );
+			partial.addEditShortcutToPlacement( placement, $shortcut );
 			$shortcut.on( 'click', function( event ) {
 				event.preventDefault();
 				event.stopPropagation();
@@ -127,9 +127,7 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
 		},
 
 		/**
-		 * Position an edit shortcut for the placement container.
-		 *
-		 * The shortcut must already be created and added to the page.
+		 * Add an edit shortcut to the placement container.
 		 *
 		 * @since 4.7
 		 *
@@ -137,14 +135,12 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
 		 * @param {jQuery} $editShortcut The shortcut element as a jQuery object.
 		 * @returns {void}
 		 */
-		positionEditShortcut: function( placement, $editShortcut ) {
-			var $placementContainer = $( placement.container ), $editButton;
+		addEditShortcutToPlacement: function( placement, $editShortcut ) {
+			var $placementContainer = $( placement.container );
 			$placementContainer.prepend( $editShortcut );
 			if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
 				$editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
 			}
-			$editButton = $editShortcut.find( 'button' );
-			$editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editButton.offset().left < 2 );
 		},
 
 		/**