From 302d50e62c86d668664623cca2917c5768ab42c8 Mon Sep 17 00:00:00 2001
From: Anthony Burchell <antpb@git.wordpress.org>
Date: Tue, 22 Jun 2021 04:25:16 +0000
Subject: [PATCH] Media: Improve upload page media item layout on smaller
 screens.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.



git-svn-id: https://develop.svn.wordpress.org/trunk@51195 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/async-upload.php | 56 ++++++++++++++++++-----------------
 src/wp-admin/css/media.css    | 11 +++++--
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/wp-admin/async-upload.php b/src/wp-admin/async-upload.php
index 6e04e0a19a..d152673f69 100644
--- a/src/wp-admin/async-upload.php
+++ b/src/wp-admin/async-upload.php
@@ -49,35 +49,37 @@ if ( isset( $_REQUEST['attachment_id'] ) && (int) $_REQUEST['attachment_id'] &&
 	switch ( $_REQUEST['fetch'] ) {
 		case 3:
 			?>
-			<div class="attachment-details">
-				<?php
-				$thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true );
-				if ( $thumb_url ) {
-					echo '<img class="pinkynail" src="' . esc_url( $thumb_url[0] ) . '" alt="" />';
-				}
+			<div class="media-item-wrapper">
+				<div class="attachment-details">
+					<?php
+					$thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true );
+					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.
-				$file     = get_attached_file( $post->ID );
-				$file_url = wp_get_attachment_url( $post->ID );
-				$title    = $post->post_title ? $post->post_title : wp_basename( $file );
-				?>
-				<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-subtitle"><?php echo wp_basename( $file ); ?></span>
+					// Title shouldn't ever be empty, but use filename just in case.
+					$file     = get_attached_file( $post->ID );
+					$file_url = wp_get_attachment_url( $post->ID );
+					$title    = $post->post_title ? $post->post_title : wp_basename( $file );
+					?>
+					<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-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 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>
 			<?php
 			break;
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index f534a5335a..1e2959748d 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -112,9 +112,9 @@
 	margin-right: 10px;
 }
 
-.media-item {
+.media-item-wrapper {
 	display: grid;
-	grid-template-columns: repeat( 2, 1fr );
+	grid-template-columns: 1fr 1fr;
 }
 
 .media-item .attachment-tools {
@@ -253,6 +253,7 @@
 
 .media-upload-form .media-item .error {
 	padding: 10px 0 10px 14px;
+	min-height: 50px;
 }
 
 .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.
  */