Changeset 41677

Timestamp:

10/02/2017 06:39:10 PM (7 years ago)

Author:

westonruter

Message:

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

Also fix preview link CSS for desktop and mobile.

Props sayedwp, bduclos.
See #39896.
Fixes #42051.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (10 diffs)
• customize.php (modified) (1 diff)

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

@@ -43 +43 @@
 }
 
-#customize-outer-theme-controls-wrapper {
+#customize-sidebar-outer-content {
     position: absolute;
     top: 0;
@@ -57 +57 @@
     transition: left .18s;
     border-right: 1px solid #ddd;
-}
-
-.outer-section-open .wp-full-overlay.expanded {
-    margin-left: 300px;
+    height: 100%;
 }
 
@@ -75 +72 @@
 }
 
-.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;
@@ -86 +83 @@
 
 .outer-section-open .wp-full-overlay.expanded #customize-preview {
+    left: 300px;
     opacity: 0.4;
-}
-
-body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
-    left: 300px;
 }
 
@@ -200 +194 @@
 }
 
-.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;
 }
 
@@ -246 +245 @@
     white-space: nowrap;
     overflow: hidden;
-    width: 217px;
+    width: 90%;
     bottom: 14px;
     font-size: 14px;
@@ -319 +318 @@
 
 #customize-control-changeset_preview_link {
-    margin-top: 20px;
+    margin-top: 6px;
 }
 
@@ -331 +330 @@
     width: 100%;
     margin-left: -12px;
-    padding: 12px 12px 18px;
+    padding: 12px 12px 10px;
     background: #ffffff;
     border-bottom: 1px solid #ddd;
@@ -2712 +2711 @@
     }
 
+    #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;
@@ -2811 +2818 @@
     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;

trunk/src/wp-admin/customize.php

@@ -219 +219 @@
     <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>