Changeset 33268

Timestamp:

07/14/2015 05:23:42 PM (9 years ago)

Author:

obenland

Message:

Media: Reduce link noise between icons and titles in list view.

Props afercia.
Fixes #32254.

Location:

trunk/src/wp-admin

Files:

• css/common.css (modified) (3 diffs)
• css/list-tables.css (modified) (3 diffs)
• includes/class-wp-media-list-table.php (modified) (1 diff)

trunk/src/wp-admin/css/common.css

@@ -265 +265 @@
 }
 
-a:focus {
+a:focus,
+a:focus .media-icon img {
     color: #124964;
     -webkit-box-shadow:
@@ -529 +530 @@
 .widefat tbody th.check-column {
     padding: 9px 0 22px;
-}
-
-.widefat.media .check-column {
-    padding-top: 8px;
 }
 
@@ -2030 +2027 @@
 /* - Only used once or twice in all of WP - deprecate for global style
 ------------------------------------------------------------------------------*/
-td.media-icon {
+.media-icon {
+    width: 62px; /* icon + border */
     text-align: center;
-    width: 80px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-}
-
-td.media-icon a {
-    display: inline-block;
-}
-
-td.media-icon img {
-    display: block;
-    max-width: 80px;
-    max-height: 60px;
-    width: auto;
-    height: auto;
+}
+
+.media-icon img {
     border: 1px solid #e7e7e7;
     border: 1px solid rgba(0, 0, 0, 0.07);

trunk/src/wp-admin/css/list-tables.css

@@ -340 +340 @@
 }
 
-
 td.column-title strong,
 td.plugin-title strong {
@@ -354 +353 @@
 
 /* Media file column */
-table.media .column-title {
-    position: relative;
-}
-
 table.media .column-title .media-icon {
-    position: absolute;
-    top: 8px; /* match cell padding */
-    left: 10px; /* match cell padding */
+    float: left;
+    min-height: 60px;
+    margin: 0 9px 0 0;
 }
 
@@ -367 +362 @@
     max-width: 60px;
     height: auto;
-}
-
-table.media .column-title .media-info,
+    vertical-align: top; /* Remove descender white-space. */
+}
+
 table.media .column-title .row-actions {
     margin-left: 70px; /* 60px image + margin */
 }
 
-table.media .column-title .media-info p {
+table.media .column-title .filename {
     margin-bottom: 0.2em;
 }

trunk/src/wp-admin/includes/class-wp-media-list-table.php

@@ -339 +339 @@
         list( $mime ) = explode( '/', $post->post_mime_type );
 
-        $user_can_edit = current_user_can( 'edit_post', $post->ID );
-        $att_title = _draft_or_post_title();
+        $title = _draft_or_post_title();
+        $thumb = wp_get_attachment_image( $post->ID, array( 60, 60 ), true, array( 'alt' => '' ) );
+        $link_start = $link_end = '';
+
+        if ( current_user_can( 'edit_post', $post->ID ) && ! $this->is_trash ) {
+            $link_start = '<a href="' . get_edit_post_link( $post->ID ) . '">';
+            $link_end = '</a>';
+        }
+
         ?>
-        <div class="media-icon <?php echo $mime ?>-icon">
-        <?php
-
-        $thumb = wp_get_attachment_image( $post->ID, array( 60, 60 ), true );
-        if ( $thumb ) {
-            if ( $this->is_trash || ! $user_can_edit ) {
-                echo $thumb;
-            } else { ?>
-            <a href="<?php echo get_edit_post_link( $post->ID ); ?>" title="<?php
-                echo esc_attr( sprintf( __( 'Edit &#8220;%s&#8221;' ), $att_title ) );
-            ?>"><?php echo $thumb; ?></a><?php
-            }
-        }
-
-        ?>
-        </div>
-        <div class="media-info">
-            <strong>
-            <?php
-                if ( $this->is_trash || ! $user_can_edit ) {
-                    echo $att_title;
-                } else { ?>
-                    <a href="<?php echo get_edit_post_link( $post->ID ); ?>" title="<?php
-                        echo esc_attr( sprintf( __( 'Edit &#8220;%s&#8221;' ), $att_title ) );
-                    ?>"><?php echo $att_title; ?></a><?php
-                }
-                _media_states( $post );
-            ?>
-            </strong>
-            <p class="filename"><?php echo wp_basename( $post->guid ); ?></p>
-        </div>
+        <strong>
+            <?php echo $link_start; ?>
+                <?php if ( $thumb ) : ?>
+                <span class="media-icon <?php echo sanitize_html_class( $mime . '-icon' ); ?>"><?php echo $thumb; ?></span>
+                <?php endif; ?>
+
+                <span aria-hidden="true"><?php echo $title; ?></span>
+                <span class="screen-reader-text"><?php printf( __( 'Edit &#8220;%s&#8221;' ), $title ); ?></span>
+            <?php echo $link_end; ?>
+            <?php _media_states( $post ); ?>
+        </strong>
+        <p class="filename"><span class="screen-reader-text"><?php _e( 'File name:' ); ?> </span><?php echo wp_basename( $post->guid ); ?></p>
         <?php
     }