WordPress.org

Make WordPress Core

Changeset 51195


Ignore:
Timestamp:
06/22/2021 04:25:16 AM (3 months ago)
Author:
antpb
Message:

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.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/async-upload.php

    r51030 r51195  
    5050        case 3:
    5151            ?>
    52             <div class="attachment-details">
    53                 <?php
    54                 $thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true );
    55                 if ( $thumb_url ) {
    56                     echo '<img class="pinkynail" src="' . esc_url( $thumb_url[0] ) . '" alt="" />';
    57                 }
     52            <div class="media-item-wrapper">
     53                <div class="attachment-details">
     54                    <?php
     55                    $thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true );
     56                    if ( $thumb_url ) {
     57                        echo '<img class="pinkynail" src="' . esc_url( $thumb_url[0] ) . '" alt="" />';
     58                    }
    5859
    59                 // Title shouldn't ever be empty, but use filename just in case.
    60                 $file     = get_attached_file( $post->ID );
    61                 $file_url = wp_get_attachment_url( $post->ID );
    62                 $title    = $post->post_title ? $post->post_title : wp_basename( $file );
    63                 ?>
    64                 <div class="filename new">
    65                     <span class="media-list-title"><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span>
    66                     <span class="media-list-subtitle"><?php echo wp_basename( $file ); ?></span>
     60                    // Title shouldn't ever be empty, but use filename just in case.
     61                    $file     = get_attached_file( $post->ID );
     62                    $file_url = wp_get_attachment_url( $post->ID );
     63                    $title    = $post->post_title ? $post->post_title : wp_basename( $file );
     64                    ?>
     65                    <div class="filename new">
     66                        <span class="media-list-title"><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span>
     67                        <span class="media-list-subtitle"><?php echo wp_basename( $file ); ?></span>
     68                    </div>
    6769                </div>
    68             </div>
    69             <div class="attachment-tools">
    70                 <span class="media-item-copy-container copy-to-clipboard-container edit-attachment">
    71                     <button type="button" class="button button-small copy-attachment-url" data-clipboard-text="<?php echo $file_url; ?>"><?php _e( 'Copy URL to clipboard' ); ?></button>
    72                     <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
    73                 </span>
    74                 <?php
    75                 if ( current_user_can( 'edit_post', $id ) ) {
    76                     echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '" target="_blank">' . _x( 'Edit', 'media item' ) . '</a>';
    77                 } else {
    78                     echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
    79                 }
    80                 ?>
     70                <div class="attachment-tools">
     71                    <span class="media-item-copy-container copy-to-clipboard-container edit-attachment">
     72                        <button type="button" class="button button-small copy-attachment-url" data-clipboard-text="<?php echo $file_url; ?>"><?php _e( 'Copy URL to clipboard' ); ?></button>
     73                        <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
     74                    </span>
     75                    <?php
     76                    if ( current_user_can( 'edit_post', $id ) ) {
     77                        echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '" target="_blank">' . _x( 'Edit', 'media item' ) . '</a>';
     78                    } else {
     79                        echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
     80                    }
     81                    ?>
     82                </div>
    8183            </div>
    8284            <?php

  • trunk/src/wp-admin/css/media.css

    r51030 r51195  
    113113}
    114114
    115 .media-item {
     115.media-item-wrapper {
    116116    display: grid;
    117     grid-template-columns: repeat( 2, 1fr );
     117    grid-template-columns: 1fr 1fr;
    118118}
    119119
    … …  
    254254.media-upload-form .media-item .error {
    255255    padding: 10px 0 10px 14px;
     256    min-height: 50px;
    256257}
    257258
    … …  
    12881289}
    12891290
     1291@media only screen and (max-width: 600px) {
     1292    .media-item-wrapper {
     1293        grid-template-columns: 1fr;
     1294    }
     1295}
     1296
    12901297/**
    12911298 * Media queries for media grid.
Note: See TracChangeset for help on using the changeset viewer.