From 07ba5160c30b32958eb20254f53b1c30c08ba772 Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Tue, 26 Aug 2014 21:49:39 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@29632 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/media.css          | 41 ++++++++++++++++----
 src/wp-includes/css/media-views.css | 58 ++++++++++++++++++++++-------
 2 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index 30f0bae5c6..97493a9e75 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -1145,15 +1145,42 @@ audio, video {
 }
 
 @media only screen and (max-width: 480px) {
-	.edit-attachment-frame .attachment-media-view {
-		float: none;
-		max-height: 70%;
-		height: auto;
-		width: 100%;
+	.edit-attachment-frame .media-frame-title {
+		right: 110px;
 	}
 
-	.edit-attachment-frame .attachment-media-view.portrait {
-		height: 70%;
+	.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;
+		height: auto;
+		width: 100%;
 	}
 
 	.edit-attachment-frame .attachment-info {
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 2c604326c2..d1c34293c1 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -2147,19 +2147,19 @@
 @media only screen and (max-width: 900px) {
 
 	/* 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%;
 		overflow: auto;
@@ -2172,34 +2172,34 @@
 		border: 1px solid #ccc;
 	}
 
-	.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;
 		float: left;
@@ -2458,6 +2458,38 @@
 	.media-frame-content .media-toolbar .attachment-filters {
 		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;
+	}
 }
 
 /**