Changeset 22158

Timestamp:

10/10/2012 09:40:22 AM (12 years ago)

Author:

koopersmith

Message:

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.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (4 diffs)
• media.php (modified) (1 diff)

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

@@ -4 +4 @@
 .media-modal {
     position: fixed;
-    top: 40px;
+    top: 80px;
     left: 60px;
     right: 60px;
@@ -22 +22 @@
 }
 
-.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;
@@ -45 +34 @@
 }
 
+.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;
@@ -59 +57 @@
 .media-modal-content {
     position: absolute;
-    top: 40px;
+    top: 0;
     left: 0;
     right: 0;

trunk/wp-includes/media.php

@@ -1297 +1297 @@
     <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>