Changeset 40511

Timestamp:

04/21/2017 05:24:52 AM (7 years ago)

Author:

westonruter

Message:

Customize: Increase width of controls pane on large monitors to give more room.

Props celloexpressions, timmydcrawford.
Fixes #32296.

Location:

trunk/src/wp-admin/css

Files:

• customize-controls.css (modified) (2 diffs)
• themes.css (modified) (3 diffs)

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

@@ -1190 +1190 @@
     margin-left: -12px;
     width: 299px;
+    width: -webkit-calc( 100% + 24px );
+    width: calc( 100% + 24px );
     margin-bottom: -12px;
 }
@@ -1195 +1197 @@
 @media screen and ( max-width: 640px ) {
     .customize-section-description-container + #customize-control-custom_css:last-child {
-        margin-left: 0;
         margin-right: 0;
-        width: 100%;
     }
     .customize-section-description-container + #customize-control-custom_css:last-child textarea {
         height: -webkit-calc( 100vh - 140px );
         height: calc( 100vh - 140px );
-        width: 100%;
-        border: solid 1px #ddd;
     }
 }

trunk/src/wp-admin/css/themes.css

@@ -1333 +1333 @@
     box-sizing: border-box;
     position: fixed;
-    width: 300px;
+    min-width: 300px;
+    max-width: 600px;
+    width: 18%;
     height: 100%;
     top: 0;
@@ -1360 +1362 @@
 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
     margin-left: -300px;
+}
+
+@media screen and (min-width: 1667px) {
+    .wp-full-overlay.expanded {
+        margin-left: 18%;
+    }
+
+    .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
+        margin-left: -18%;
+    }
+}
+
+@media screen and (min-width: 3333px) {
+    .wp-full-overlay.expanded {
+        margin-left: 600px;
+    }
+
+    .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
+        margin-left: -600px;
+    }
 }
 
@@ -1616 +1638 @@
     bottom: 0;
     left: 0;
-    width: 299px;
+    min-width: 299px;
+    max-width: 599px;
+    width: 18%;
     height: 45px;
     border-top: 1px solid #ddd;