Media Grid, in the Edit Attachment modal:

* Label the fields under the attachment a la the Edit Media page
* Move the audio and video previews above the info
* Remove the audio / video icon display. Unnecessary.
* Ensure that `width` and `max-width` are set for `.mejs-container`

See #24716.

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


git-svn-id: http://core.svn.wordpress.org/trunk@28874 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2014-07-11 06:15:15 +00:00
parent c22c49a1ba
commit dfd3c19cec
9 changed files with 57 additions and 36 deletions

View File

@ -697,6 +697,7 @@ audio, video {
.mejs-container {
width: 100%;
max-width: 100%;
}
/* =Media Queries

View File

@ -697,6 +697,7 @@ audio, video {
.mejs-container {
width: 100%;
max-width: 100%;
}
/* =Media Queries

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1577,6 +1577,11 @@ video#inline-media-node {
word-wrap: break-word;
}
.edit-attachment-frame .attachment-info .filename {
font-weight: normal;
color: #666;
}
.attachment-info .thumbnail {
position: relative;
float: right;
@ -1587,6 +1592,10 @@ video#inline-media-node {
margin-bottom: 5px;
}
.edit-attachment-frame .attachment-info .thumbnail {
margin-bottom: 12px;
}
.uploading .attachment-info .thumbnail {
width: 120px;
height: 80px;
@ -2766,7 +2775,7 @@ video#inline-media-node {
}
.edit-attachment-frame .wp-media-wrapper {
margin-top: 20px;
margin-bottom: 12px;
}
.edit-attachment-frame .attachment-fields {

File diff suppressed because one or more lines are too long

View File

@ -1577,6 +1577,11 @@ video#inline-media-node {
word-wrap: break-word;
}
.edit-attachment-frame .attachment-info .filename {
font-weight: normal;
color: #666;
}
.attachment-info .thumbnail {
position: relative;
float: left;
@ -1587,6 +1592,10 @@ video#inline-media-node {
margin-bottom: 5px;
}
.edit-attachment-frame .attachment-info .thumbnail {
margin-bottom: 12px;
}
.uploading .attachment-info .thumbnail {
width: 120px;
height: 80px;
@ -2766,7 +2775,7 @@ video#inline-media-node {
}
.edit-attachment-frame .wp-media-wrapper {
margin-top: 20px;
margin-bottom: 12px;
}
.edit-attachment-frame .attachment-fields {

File diff suppressed because one or more lines are too long

View File

@ -277,39 +277,10 @@ function wp_print_media_templates() {
<div class="media-progress-bar"><div></div></div>
<# } else if ( 'image' === data.type ) { #>
<img src="{{ data.sizes.full.url }}" draggable="false" />
<# } else { #>
<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
<img src="{{ data.icon }}" class="icon" draggable="false" />
<# } #>
</div>
<div class="details">
<div class="filename">{{ data.filename }}</div>
<div class="uploaded">{{ data.dateFormatted }}</div>
<div class="file-size">{{ data.filesizeHumanReadable }}</div>
<# if ( 'image' === data.type && ! data.uploading ) { #>
<# if ( data.width && data.height ) { #>
<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
<# } #>
<# } #>
<# if ( data.fileLength ) { #>
<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
<# } #>
<# if ( ! data.uploading && data.can.remove ) { #>
<?php if ( MEDIA_TRASH ): ?>
<a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
<?php else: ?>
<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
<?php endif; ?>
<# } #>
<div class="compat-meta">
<# if ( data.compat && data.compat.meta ) { #>
{{{ data.compat.meta }}}
<# } #>
</div>
</div>
<# if ( 'audio' === data.type ) { #>
<div class="wp-media-wrapper">
<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
@ -325,6 +296,36 @@ function wp_print_media_templates() {
</video>
</div>
<# } #>
<div class="details">
<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
<# if ( 'image' === data.type && ! data.uploading ) { #>
<# if ( data.width && data.height ) { #>
<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
<# } #>
<# } #>
<# if ( data.fileLength ) { #>
<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
<# } #>
<# if ( ! data.uploading && data.can.remove ) { #>
<?php if ( MEDIA_TRASH ): ?>
<a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
<?php else: ?>
<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
<?php endif; ?>
<# } #>
<div class="compat-meta">
<# if ( data.compat && data.compat.meta ) { #>
{{{ data.compat.meta }}}
<# } #>
</div>
</div>
</div>
<div class="attachment-fields">
<label class="setting" data-setting="url">