Changeset 26250

Timestamp:

11/18/2013 08:06:47 PM (12 years ago)

Author:

iammattthomas

Message:

Improvements to the modal media uploader on mobile in landscape orientation.

• Merge the 782 and 500 width queries into a single 640px query
• At this breakpoint, remove the drop shadow and margin from the uploader modal
• For only landscape views, tabs are shown in a single line.
• Add padding to tab links to account for untappable 20px area at top of landscape viewport in iOS
• Add overflow: visible to .embed-link-settings at responsive sizes to prevent unnecessary framed scrolling

See #25977, props joen.

File:

• trunk/src/wp-includes/css/media-views.css (modified) (4 diffs)

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

@@ -1626 +1626 @@
 }
 
-@media only screen and (max-width: 782px) {
+/* Responsive on portrait and landscape */
+@media only screen and (max-width: 640px), screen and (max-height: 400px) {
+
+    /* Media tabs on the top */
     .media-frame-content .media-toolbar .instructions {
         display: none;
@@ -1653 +1656 @@
         overflow: hidden;
     }
-    
-    /* Shorten right-side links so they don't overlap the close button */
-    .media-menu a:nth-child(2),
-    .media-menu a:last-child {
-        width: 40%;
-    }
-
-    .media-menu .separator {
-        display: none;
-    }
-
-    .media-frame-title {
-        top: 72px;
-        left: auto;
-        height: auto;
-    }
-
-    .media-frame-title h1 {
-        line-height: 3;
-        font-size: 18px;
-    }
-
-    .media-frame-router {
-        top: 84px;
-        left: 0;
-    }
-    
-    .media-frame-content {
-        left: 0;
-        top: 118px;
-    }
-
-    .media-frame .attachments-browser {
-        padding-bottom: 300px;
-    }
-    
-    .media-sidebar {
-        border-bottom: 1px solid #dddddd;
-    }
-    
-    .media-modal {
-        width: auto;
-    }
-
-    .media-toolbar-primary, .media-toolbar-secondary {
-        height: auto;
-    }
-
-    .uploader-inline h3 {
-        margin: 0 0 .8em 0;
-    }
-
-    .uploader-inline-content {
-        top: auto;
-    }
-
-    .uploader-inline-content .upload-ui {
-        margin: 0;
-    }
-
-    .attachments-browser .attachments, .attachments-browser .uploader-inline {
-        position: relative;
-        margin-right: 180px;
-    }
-}
-
-@media only screen and (max-width: 680px) {
-    .media-frame-content .media-toolbar .search,
-    .media-frame-content .media-toolbar .attachment-filters {
-        max-width: 85px;
-    }
-}
-
-/* Tiny screens [ = smaller than 500 wide] */
-@media screen and (max-width: 500px) {
-    .media-modal {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
-
-    .media-modal-backdrop {
-        position: fixed;
-    }
-
-    .attachments-browser .attachment,
-    .attachments-browser .attachment-preview {
-        max-width: 100%;
-    }
-
-    .attachments-browser .media-toolbar-primary input.search {
-        max-width: 150px;
-    }
-
-    .uploader-inline-content {
-        position: relative;
-    }
-
-    .media-sidebar .setting input[type="checkbox"],
-    .media-sidebar .field input[type="checkbox"] {
-        width: 25px;
-    }
-
-    /* Don't bother with title for phone-size */
+
     .media-frame-title {
         display: none;
@@ -1787 +1685 @@
         margin-top: 45px;
     }
+        
+    /* Shorten right-side links so they don't overlap the close button */
+    .media-menu a:nth-child(2),
+    .media-menu a:last-child {
+        width: 40%;
+    }
+
+    .media-menu .separator {
+        display: none;
+    }
+
+    .media-frame-title {
+        top: 72px;
+        left: auto;
+        height: auto;
+    }
+
+    .media-frame-title h1 {
+        line-height: 3;
+        font-size: 18px;
+    }
+
+    .media-frame-router {
+        top: 84px;
+        left: 0;
+    }
+    
+    .media-frame-content {
+        left: 0;
+        top: 118px;
+    }
+
+    .media-frame .attachments-browser {
+        padding-bottom: 300px;
+    }
+    
+    .media-sidebar {
+        border-bottom: 1px solid #dddddd;
+    }
+    
+    .media-modal {
+        width: auto;
+    }
+
+    .media-toolbar-primary, .media-toolbar-secondary {
+        height: auto;
+    }
+
+    .uploader-inline h3 {
+        margin: 0 0 .8em 0;
+    }
+
+    .uploader-inline-content {
+        top: auto;
+    }
+
+    .uploader-inline-content .upload-ui {
+        margin: 0;
+    }
+
+    .attachments-browser .attachments, .attachments-browser .uploader-inline {
+        position: relative;
+        margin-right: 180px;
+    }
+
+    /* Full-bleed modal */
+    .media-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .media-modal-backdrop {
+        position: fixed;
+    }
+
+    .attachments-browser .attachment,
+    .attachments-browser .attachment-preview {
+        max-width: 100%;
+    }
+
+    .attachments-browser .media-toolbar-primary input.search {
+        max-width: 150px;
+    }
+
+    .uploader-inline-content {
+        position: relative;
+    }
+
+    .media-sidebar .setting input[type="checkbox"],
+    .media-sidebar .field input[type="checkbox"] {
+        width: 25px;
+    }
 
     /* Image From Link */
@@ -1803 +1796 @@
         margin-top: 45px;
     }
+
+}
+
+/* Landscape specific header override */
+@media screen and (max-height: 400px) {
+    .media-menu {
+        padding: 0 0 0 10px;
+    }
+
+    .media-menu a {
+        float: left;
+        width: 21%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 10px inherit;
+    }
+
+    .media-menu a:nth-child(2),
+    .media-menu a:last-child {
+        width: 21%;
+    }
+
+    .media-modal-close {
+        top: 2px;
+    }
+
+    .media-frame-router {
+        top: 44px;
+    }
+
+    .media-frame-content {
+        top: 78px;
+    }
+    
+    .attachments-browser .attachments {
+        top: 2px;
+    }
+
+    /* Prevent unnecessary scrolling on title input */
+    .embed-link-settings {
+        overflow: visible;
+    }
+}
+
+@media only screen and (max-width: 680px) {
+    .media-frame-content .media-toolbar .search,
+    .media-frame-content .media-toolbar .attachment-filters {
+        max-width: 85px;
+    }
 }