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

Media: Improve upload page media item layout on smaller screens. 

This allows smaller screens to wrap error messages and other uploader media item elements in a more readable way.

Props joedolson sabernhardt, Presskopp.
See #51754.


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


git-svn-id: http://core.svn.wordpress.org/trunk@50804 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
antpb 2021-06-22 04:26:58 +00:00
parent 84ee1c9de5
commit b2c449b1ec
6 changed files with 50 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
wp-admin/async-upload.php
View File

@ -49,35 +49,37 @@ if ( isset( $_REQUEST['attachment_id'] ) && (int) $_REQUEST['attachment_id'] &&
switch ( $_REQUEST['fetch'] ) { switch ( $_REQUEST['fetch'] ) {
case 3: case 3:
?> ?>
<div class="attachment-details"> <div class="media-item-wrapper">
<?php <div class="attachment-details">
$thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true ); <?php
if ( $thumb_url ) { $thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true );
echo '<img class="pinkynail" src="' . esc_url( $thumb_url[0] ) . '" alt="" />'; if ( $thumb_url ) {
} echo '<img class="pinkynail" src="' . esc_url( $thumb_url[0] ) . '" alt="" />';
}
// Title shouldn't ever be empty, but use filename just in case. // Title shouldn't ever be empty, but use filename just in case.
$file = get_attached_file( $post->ID ); $file = get_attached_file( $post->ID );
$file_url = wp_get_attachment_url( $post->ID ); $file_url = wp_get_attachment_url( $post->ID );
$title = $post->post_title ? $post->post_title : wp_basename( $file ); $title = $post->post_title ? $post->post_title : wp_basename( $file );
?> ?>
<div class="filename new"> <div class="filename new">
<span class="media-list-title"><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span> <span class="media-list-title"><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span>
<span class="media-list-subtitle"><?php echo wp_basename( $file ); ?></span> <span class="media-list-subtitle"><?php echo wp_basename( $file ); ?></span>
</div>
</div>
<div class="attachment-tools">
<span class="media-item-copy-container copy-to-clipboard-container edit-attachment">
<button type="button" class="button button-small copy-attachment-url" data-clipboard-text="<?php echo $file_url; ?>"><?php _e( 'Copy URL to clipboard' ); ?></button>
<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
</span>
<?php
if ( current_user_can( 'edit_post', $id ) ) {
echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '" target="_blank">' . _x( 'Edit', 'media item' ) . '</a>';
} else {
echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
}
?>
</div> </div>
</div>
<div class="attachment-tools">
<span class="media-item-copy-container copy-to-clipboard-container edit-attachment">
<button type="button" class="button button-small copy-attachment-url" data-clipboard-text="<?php echo $file_url; ?>"><?php _e( 'Copy URL to clipboard' ); ?></button>
<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
</span>
<?php
if ( current_user_can( 'edit_post', $id ) ) {
echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '" target="_blank">' . _x( 'Edit', 'media item' ) . '</a>';
} else {
echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
}
?>
</div> </div>
<?php <?php
break; break;

11
wp-admin/css/media-rtl.css
View File

@ -113,9 +113,9 @@
margin-left: 10px; margin-left: 10px;
} }
.media-item { .media-item-wrapper {
display: grid; display: grid;
grid-template-columns: repeat( 2, 1fr ); grid-template-columns: 1fr 1fr;
} }
.media-item .attachment-tools { .media-item .attachment-tools {
@ -254,6 +254,7 @@
.media-upload-form .media-item .error { .media-upload-form .media-item .error {
padding: 10px 14px 10px 0; padding: 10px 14px 10px 0;
min-height: 50px;
} }
.media-item .error-div button.dismiss { .media-item .error-div button.dismiss {
@ -1288,6 +1289,12 @@ audio, video {
} }
} }
@media only screen and (max-width: 600px) {
.media-item-wrapper {
grid-template-columns: 1fr;
}
}
/** /**
* Media queries for media grid. * Media queries for media grid.
*/ */

2
wp-admin/css/media-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

11
wp-admin/css/media.css
View File

@ -112,9 +112,9 @@
margin-right: 10px; margin-right: 10px;
} }
.media-item { .media-item-wrapper {
display: grid; display: grid;
grid-template-columns: repeat( 2, 1fr ); grid-template-columns: 1fr 1fr;
} }
.media-item .attachment-tools { .media-item .attachment-tools {
@ -253,6 +253,7 @@
.media-upload-form .media-item .error { .media-upload-form .media-item .error {
padding: 10px 0 10px 14px; padding: 10px 0 10px 14px;
min-height: 50px;
} }
.media-item .error-div button.dismiss { .media-item .error-div button.dismiss {
@ -1287,6 +1288,12 @@ audio, video {
} }
} }
@media only screen and (max-width: 600px) {
.media-item-wrapper {
grid-template-columns: 1fr;
}
}
/** /**
* Media queries for media grid. * Media queries for media grid.
*/ */

2
wp-admin/css/media.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.8-beta2-51194'; $wp_version = '5.8-beta2-51195';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.