From 2a3859acedc00916382bfe5c49488e3cfb636b5e Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <dkoopersmith@gmail.com>
Date: Wed, 10 Oct 2012 09:40:22 +0000
Subject: [PATCH] Media JS: Improve markup and CSS of the modal view's title.

Also improves the accuracy of closing the modal when the backdrop is clicked (which became error-prone around the title bar in [22144]).

see #21390.


git-svn-id: http://core.svn.wordpress.org/trunk@22158 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/css/media-views.css | 34 ++++++++++++++++-----------------
 wp-includes/media.php           |  6 ++----
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css
index 1545452796..ec5447f5d0 100644
--- a/wp-includes/css/media-views.css
+++ b/wp-includes/css/media-views.css
@@ -3,7 +3,7 @@
  */
 .media-modal {
 	position: fixed;
-	top: 40px;
+	top: 80px;
 	left: 60px;
 	right: 60px;
 	bottom: 60px;
@@ -21,30 +21,28 @@
 	z-index: 120000;
 }
 
-.media-modal-header {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 28px;
-}
-
-.media-modal-header h3 {
-	float: left;
-	padding: 0;
-	margin: 0;
-	font-size: 1.4em;
-}
-
-.media-modal-header h3,
+.media-modal-title,
 .media-modal-close {
+	position: absolute;
+	top: -40px;
+	height: 40px;
+
 	line-height: 40px;
 	color: #fff;
 	font-weight: 200;
 	text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 );
 }
 
+.media-modal-title {
+	left: 0;
+	float: left;
+	padding: 0;
+	margin: 0;
+	font-size: 1.4em;
+}
+
 .media-modal-close {
+	right: 0;
 	float: right;
 	text-decoration: none;
 	font-size: 1.8em;
@@ -58,7 +56,7 @@
 
 .media-modal-content {
 	position: absolute;
-	top: 40px;
+	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
diff --git a/wp-includes/media.php b/wp-includes/media.php
index a03c09f023..52dc6583e3 100644
--- a/wp-includes/media.php
+++ b/wp-includes/media.php
@@ -1296,10 +1296,8 @@ function wp_print_media_templates( $attachment ) {
 	?>
 	<script type="text/html" id="tmpl-media-modal">
 		<div class="media-modal">
-			<div class="media-modal-header">
-				<h3><%- title %></h3>
-				<a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
-			</div>
+			<h3 class="media-modal-title"><%- title %></h3>
+			<a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
 			<div class="media-modal-content"></div>
 		</div>
 		<div class="media-modal-backdrop"></div>