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.

Built from https://develop.svn.wordpress.org/trunk@29632


git-svn-id: http://core.svn.wordpress.org/trunk@29406 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/media-rtl.css

@@ -1145,15 +1145,42 @@ audio, video {
 }
 
 @media only screen and (max-width: 480px) {
-	.edit-attachment-frame .attachment-media-view {
+	.edit-attachment-frame .media-frame-title {
-		float: none;
+		left: 110px;
-		max-height: 70%;
-		height: auto;
-		width: 100%;
 	}
 
-	.edit-attachment-frame .attachment-media-view.portrait {
+	.upload-php .media-modal-close,
-		height: 70%;
+	.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 {
+		left: 82px;
+	}
+
+	.edit-attachment-frame .edit-media-header .right {
+		left: 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 {

wp-admin/css/media.css

@@ -1145,15 +1145,42 @@ audio, video {
 }
 
 @media only screen and (max-width: 480px) {
-	.edit-attachment-frame .attachment-media-view {
+	.edit-attachment-frame .media-frame-title {
-		float: none;
+		right: 110px;
-		max-height: 70%;
-		height: auto;
-		width: 100%;
 	}
 
-	.edit-attachment-frame .attachment-media-view.portrait {
+	.upload-php .media-modal-close,
-		height: 70%;
+	.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 {

wp-includes/css/media-views-rtl.css

@@ -2147,19 +2147,19 @@
 @media only screen and (max-width: 900px) {
 
 	/* Drop-down menu */
-	.media-frame .media-frame-title,
+	.media-frame:not(.hide-menu) .media-frame-title,
-	.media-frame .media-frame-router,
+	.media-frame:not(.hide-menu) .media-frame-router,
-	.media-frame .media-frame-content,
+	.media-frame:not(.hide-menu) .media-frame-content,
-	.media-frame .media-frame-toolbar {
+	.media-frame:not(.hide-menu) .media-frame-toolbar {
 		right: 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 {
 		right: 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 {
 		right: 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: right;
@@ -2458,6 +2458,38 @@
 	.media-frame-content .media-toolbar .attachment-filters {
 		max-width: 90px;
 	}
+
+	.media-modal-close {
+		top: 5px;
+		left: 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;
+	}
 }
 
 /**

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:not(.hide-menu) .media-frame-title,
-	.media-frame .media-frame-router,
+	.media-frame:not(.hide-menu) .media-frame-router,
-	.media-frame .media-frame-content,
+	.media-frame:not(.hide-menu) .media-frame-content,
-	.media-frame .media-frame-toolbar {
+	.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;
+	}
 }
 
 /**