WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Daryl Koopersmith 2012-10-10 09:40:22 +00:00
parent b2c3153b90
commit 2a3859aced
2 changed files with 18 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
wp-includes/css/media-views.css
View File

@ -3,7 +3,7 @@
*/ */
.media-modal { .media-modal {
position: fixed; position: fixed;
top: 40px; top: 80px;
left: 60px; left: 60px;
right: 60px; right: 60px;
bottom: 60px; bottom: 60px;
@ -21,30 +21,28 @@
z-index: 120000; z-index: 120000;
} }
.media-modal-header { .media-modal-title,
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-close { .media-modal-close {
position: absolute;
top: -40px;
height: 40px;
line-height: 40px; line-height: 40px;
color: #fff; color: #fff;
font-weight: 200; font-weight: 200;
text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 ); 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 { .media-modal-close {
right: 0;
float: right; float: right;
text-decoration: none; text-decoration: none;
font-size: 1.8em; font-size: 1.8em;
@ -58,7 +56,7 @@
.media-modal-content { .media-modal-content {
position: absolute; position: absolute;
top: 40px; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;

6
wp-includes/media.php
View File

@ -1296,10 +1296,8 @@ function wp_print_media_templates( $attachment ) {
?> ?>
<script type="text/html" id="tmpl-media-modal"> <script type="text/html" id="tmpl-media-modal">
<div class="media-modal"> <div class="media-modal">
<div class="media-modal-header"> <h3 class="media-modal-title"><%- title %></h3>
<h3><%- title %></h3> <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
<a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
</div>
<div class="media-modal-content"></div> <div class="media-modal-content"></div>
</div> </div>
<div class="media-modal-backdrop"></div> <div class="media-modal-backdrop"></div>