Changeset 22158

Timestamp:

10/10/2012 09:40:22 AM (14 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>