Changeset 41677

Timestamp:

10/02/2017 06:39:10 PM (9 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>