Changeset 47419

Timestamp:

03/03/2020 05:23:19 PM (5 years ago)

Author:

SergeyBiryukov

Message:

Media: Improve the appearance of image editor on small and medium screens.

This prevents the main area of Edit Media screen from being pushed down too far.

Props sabernhardt, afercia, fierevere, sathyapulse, mikeschroder, johnbillion.
Merges [47418] to the 5.3 branch.
Fixes #48780. See #47136.

Location:

branches/5.3

Files:

• . (modified) (1 prop)
• src/wp-admin/css/edit.css (modified) (1 diff)
• src/wp-admin/css/media.css (modified) (2 diffs)

branches/5.3/src/wp-admin/css/edit.css

@@ -1388 +1388 @@
 }
 
+/* one column on the attachment editor screen */
+@media only screen and (max-width: 1200px) {
+    .post-type-attachment #poststuff {
+        min-width: 0;
+    }
+
+    .post-type-attachment #wpbody-content #poststuff #post-body {
+        margin: 0;
+    }
+
+    .post-type-attachment #wpbody-content #post-body.columns-2 #postbox-container-1 {
+        margin-right: 0;
+        width: 100%;
+    }
+
+    .post-type-attachment #poststuff #postbox-container-1 .empty-container,
+    .post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty {
+        border: 0 none;
+        height: 0;
+        min-height: 0;
+    }
+
+    .post-type-attachment #poststuff #post-body.columns-2 #side-sortables {
+        min-height: 0;
+        width: auto;
+    }
+
+    /* hide the radio buttons for column prefs */
+    .post-type-attachment .screen-layout,
+    .post-type-attachment .columns-prefs {
+        display: none;
+    }
+}
+
 /* one column on the post write/edit screen */
 @media only screen and (max-width: 850px) {

branches/5.3/src/wp-admin/css/media.css

@@ -853 +853 @@
     float: left;
     padding: 3px 16px 0 0;
+    min-width: 400px;
+    max-width: calc( 100% - 266px );
 }
 
@@ -1208 +1210 @@
         float: none;
         width: auto;
+        max-width: none;
     }
 }