Changeset 29632

Timestamp:

08/26/2014 09:49:39 PM (11 years ago)

Author:

helen

Message:

Media modals: Better responsive views, especially the header.

• Only show the "dropdown" when there is a menu. Note that this uses a :not() selector, but it is supported in browsers that support media queries so it is safe to use here.
• Make the header shorter when on particularly narrow screens, which also tend to be shorter.
• Don't restrict the height of images in the attachment details modal, to take advantage of all available space.

fixes #29339.

Location:

trunk/src

Files:

• wp-admin/css/media.css (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (3 diffs)

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

@@ -1146 +1146 @@
 
 @media only screen and (max-width: 480px) {
+    .edit-attachment-frame .media-frame-title {
+        right: 110px;
+    }
+
+    .upload-php .media-modal-close,
+    .edit-attachment-frame .edit-media-header .left,
+    .edit-attachment-frame .edit-media-header .right {
+        width: 40px;
+        height: 40px;
+    }
+
+    .upload-php .media-modal-close .media-modal-icon {
+        margin: 9px 10px;
+    }
+
+    .edit-attachment-frame .edit-media-header .right:before,
+    .edit-attachment-frame .edit-media-header .left:before {
+        line-height: 40px !important;
+    }
+
+    .edit-attachment-frame .edit-media-header .left {
+        right: 82px;
+    }
+
+    .edit-attachment-frame .edit-media-header .right {
+        right: 41px;
+    }
+
+    .edit-attachment-frame .media-frame-content {
+        top: 40px;
+    }
+
     .edit-attachment-frame .attachment-media-view {
         float: none;
-        max-height: 70%;
         height: auto;
         width: 100%;
-    }
-
-    .edit-attachment-frame .attachment-media-view.portrait {
-        height: 70%;
     }
 

trunk/src/wp-includes/css/media-views.css

@@ -2148 +2148 @@
 
     /* Drop-down menu */
-    .media-frame .media-frame-title,
-    .media-frame .media-frame-router,
-    .media-frame .media-frame-content,
-    .media-frame .media-frame-toolbar {
+    .media-frame:not(.hide-menu) .media-frame-title,
+    .media-frame:not(.hide-menu) .media-frame-router,
+    .media-frame:not(.hide-menu) .media-frame-content,
+    .media-frame:not(.hide-menu) .media-frame-toolbar {
         left: 0;
     }
 
-    .media-frame .media-frame-menu {
+    .media-frame:not(.hide-menu) .media-frame-menu {
         position: static;
         width: 0;
     }
 
-    .media-frame .media-menu {
+    .media-frame:not(.hide-menu) .media-menu {
         width: auto;
         max-width: 80%;
@@ -2173 +2173 @@
     }
 
-    .media-frame .media-menu.visible {
+    .media-frame:not(.hide-menu) .media-menu.visible {
         left: 0;
     }
 
-    .media-frame .media-menu > a {
+    .media-frame:not(.hide-menu) .media-menu > a {
         padding: 12px 16px;
         font-size: 16px;
     }
 
-    .media-frame .media-menu > a.active {
+    .media-frame:not(.hide-menu) .media-menu > a.active {
         display: none;
     }
 
-    .media-frame .media-menu .separator {
+    .media-frame:not(.hide-menu) .media-menu .separator {
         margin: 5px 10px;
     }
 
-    .media-frame .media-frame-title {
+    .media-frame:not(.hide-menu) .media-frame-title {
         left: 0;
         color: #21759b;
     }
 
-    .media-frame .media-frame-title .dashicons {
+    .media-frame:not(.hide-menu) .media-frame-title .dashicons {
         display: inline-block;
         line-height: 50px;
     }
 
-    .media-frame .media-frame-title h1 {
+    .media-frame:not(.hide-menu) .media-frame-title h1 {
         line-height: 3;
         font-size: 18px;
@@ -2459 +2459 @@
         max-width: 90px;
     }
+
+    .media-modal-close {
+        top: 5px;
+        right: 5px;
+    }
+
+    .media-modal .media-frame-title {
+        height: 40px;
+    }
+
+    .media-modal .media-frame-title h1,
+    .media-frame:not(.hide-menu) .media-frame-title h1 {
+        font-size: 18px;
+        line-height: 40px;
+    }
+
+    .media-frame:not(.hide-menu) .media-frame-title .dashicons {
+        line-height: 40px;
+    }
+
+    .media-frame-router,
+    .media-frame:not(.hide-menu) .media-menu {
+        top: 40px;
+    }
+
+    .media-frame-content {
+        top: 74px;
+    }
+
+    .media-frame.hide-router .media-frame-content {
+        top: 40px;
+    }
 }