Customize: Fix positioning of outer section (e.g. publish settings) on large screen sizes.

westonruter · westonruter · commit ba07b22cb5ba · 2017-10-02T18:39:10.000Z
Also fix preview link CSS for desktop and mobile. Props sayedwp, bduclos. See #39896. Fixes #42051. git-svn-id: https://develop.svn.wordpress.org/trunk@41677 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
@@ -42,7 +42,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	border-radius: 3px 0 0 3px;
 }
 
-#customize-outer-theme-controls-wrapper {
+#customize-sidebar-outer-content {
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -56,10 +56,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	background: #eee;
 	transition: left .18s;
 	border-right: 1px solid #ddd;
-}
-
-.outer-section-open .wp-full-overlay.expanded {
-	margin-left: 300px;
+	height: 100%;
 }
 
 #customize-theme-controls .control-section-outer {
@@ -74,7 +71,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	display: block;
 }
 
-.outer-section-open .wp-full-overlay.expanded #customize-outer-theme-controls-wrapper {
+.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
 	visibility: visible;
 	left: 0;
 	transition: left .18s;
@@ -85,11 +82,8 @@ body:not(.ready) #customize-save-button-wrapper .save {
 }
 
 .outer-section-open .wp-full-overlay.expanded #customize-preview {
-	opacity: 0.4;
-}
-
-body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
 	left: 300px;
+	opacity: 0.4;
 }
 
 #customize-outer-theme-controls li.notice {
@@ -199,12 +193,17 @@ body.trashing #publish-settings {
 	display: block;
 }
 
-.customize-copy-preview-link {
+.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
+	margin: 0;
 	position: absolute;
 	bottom: 9px;
 	right: 0;
 }
 
+.preview-link-wrapper {
+	position: relative;
+}
+
 .customize-copy-preview-link:before,
 .customize-copy-preview-link:after {
 	content: "";
@@ -245,7 +244,7 @@ body.trashing #publish-settings {
 	position: absolute;
 	white-space: nowrap;
 	overflow: hidden;
-	width: 217px;
+	width: 90%;
 	bottom: 14px;
 	font-size: 14px;
 	text-decoration: none;
@@ -318,7 +317,7 @@ body.trashing #publish-settings {
 }
 
 #customize-control-changeset_preview_link {
-	margin-top: 20px;
+	margin-top: 6px;
 }
 
 #customize-control-changeset_status {
@@ -330,7 +329,7 @@ body.trashing #publish-settings {
 	box-sizing: content-box;
 	width: 100%;
 	margin-left: -12px;
-	padding: 12px 12px 18px;
+	padding: 12px 12px 10px;
 	background: #ffffff;
 	border-bottom: 1px solid #ddd;
 	margin-bottom: 0;
@@ -2711,6 +2710,14 @@ body.adding-widget .add-new-widget:before,
 		line-height: 3.2;
 	}
 
+	#customize-control-changeset_preview_link a {
+		bottom: 16px;
+	}
+
+	.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
+		bottom: 10px;
+	}
+
 	.wp-core-ui.wp-customizer .button {
 		margin-top: 12px;
 	}
@@ -2810,7 +2817,7 @@ body.adding-widget .add-new-widget:before,
 
 	body.adding-widget div#available-widgets,
 	body.adding-menu-items div#available-menu-items,
-	body.outer-section-open div#customize-outer-theme-controls-wrapper {
+	body.outer-section-open div#customize-sidebar-outer-content {
 		top: 46px;
 		left: 0;
 		z-index: 10;
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
@@ -218,10 +218,8 @@
 	</form>
 	<div id="customize-preview" class="wp-full-overlay-main"></div>
 	<div id="customize-sidebar-outer-content">
-		<div id="customize-outer-theme-controls-wrapper">
-			<div id="customize-outer-theme-controls">
-				<ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
-			</div>
+		<div id="customize-outer-theme-controls">
+			<ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
 		</div>
 	</div>
 	<?php
