From 3a323a26b12e6df4f79805d026c7e8c6bb4225c1 Mon Sep 17 00:00:00 2001
From: Matt Thomas <iammattthomas@git.wordpress.org>
Date: Mon, 18 Nov 2013 20:06:47 +0000
Subject: [PATCH] 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.



git-svn-id: https://develop.svn.wordpress.org/trunk@26250 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/css/media-views.css | 125 +++++++++++++++++++---------
 1 file changed, 84 insertions(+), 41 deletions(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 5cd4c37786..28b7484541 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -1625,7 +1625,10 @@
 	}
 }
 
-@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;
 	}
@@ -1652,7 +1655,36 @@
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}
+
+	.media-frame-title {
+		display: none;
+	}
 	
+	.media-frame-toolbar {
+		position: absolute;
+		bottom: 0px;
+		left: 0;
+		right: 0;
+		background: #FFF;
+		border-top: 1px solid #DEDEDE;
+	}
+
+	.media-toolbar {
+		position: relative;
+	}
+
+	.media-frame {
+		overflow: hidden;
+	}
+
+	.attachments-browser .attachments {
+		top: 42px;
+	}
+
+	.attachment-details h3 {
+		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 {
@@ -1716,17 +1748,8 @@
 		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) {
+	/* Full-bleed modal */
 	.media-modal {
 		position: fixed;
 		top: 0;
@@ -1757,36 +1780,6 @@
 		width: 25px;
 	}
 
-	/* Don't bother with title for phone-size */
-	.media-frame-title {
-		display: none;
-	}
-	
-	.media-frame-toolbar {
-		position: absolute;
-		bottom: 0px;
-		left: 0;
-		right: 0;
-		background: #FFF;
-		border-top: 1px solid #DEDEDE;
-	}
-
-	.media-toolbar {
-		position: relative;
-	}
-
-	.media-frame {
-		overflow: hidden;
-	}
-
-	.attachments-browser .attachments {
-		top: 42px;
-	}
-
-	.attachment-details h3 {
-		margin-top: 45px;
-	}
-
 	/* Image From Link */
 	.embed-link-settings,
 	.embed-image-settings {
@@ -1802,6 +1795,56 @@
 	.gallery-settings h3 {
 		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;
+	}
 }
 
 /**