From 6c600557400481f84b3190eaaef100b1d6a28a42 Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Wed, 3 Jun 2015 15:12:19 +0000
Subject: [PATCH] Media: move the thumbnail into the title column in list view.

This gives us more space for the title and row actions, and will make a responsive list table enhancement significantly easier.

props bradt for the initial patch.
fixes #29993 and #32255. see #32509 and #32395.


git-svn-id: https://develop.svn.wordpress.org/trunk@32687 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/list-tables.css              | 22 +++++++++++++++++--
 .../includes/class-wp-media-list-table.php    | 10 ++++-----
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 46ff16001c..8ee9c01afd 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -296,8 +296,20 @@ table.fixed {
 	float: left;
 }
 
-.fixed .column-icon {
-	width: 80px;
+/* 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 */
+}
+
+table.media .column-title .media-info,
+table.media .column-title .row-actions {
+	margin-left: 70px; /* 60px image + margin */
 }
 
 /* @todo: pick a consistent list table selector */
@@ -1622,6 +1634,7 @@ div.action-links,
 	.column-tags,
 	.tags .column-description,
 	.media .column-parent,
+	.media .column-comments,
 	.users .column-email,
 	.users .column-name,
 	.sites .column-registered,
@@ -1650,6 +1663,11 @@ div.action-links,
 		word-wrap: normal;
 	}
 
+	/* Media */
+	.media .column-title {
+		width: auto;
+	}
+
 	/* Quick Edit and Bulk Edit */
 	#wpbody-content .quick-edit-row-post .inline-edit-col-left,
 	#wpbody-content .quick-edit-row-post .inline-edit-col-right,
diff --git a/src/wp-admin/includes/class-wp-media-list-table.php b/src/wp-admin/includes/class-wp-media-list-table.php
index 2f3c1392e4..7f26e390e0 100644
--- a/src/wp-admin/includes/class-wp-media-list-table.php
+++ b/src/wp-admin/includes/class-wp-media-list-table.php
@@ -247,7 +247,6 @@ class WP_Media_List_Table extends WP_List_Table {
 	public function get_columns() {
 		$posts_columns = array();
 		$posts_columns['cb'] = '<input type="checkbox" />';
-		$posts_columns['icon'] = '';
 		/* translators: column name */
 		$posts_columns['title'] = _x( 'File', 'column name' );
 		$posts_columns['author'] = __( 'Author' );
@@ -361,9 +360,10 @@ foreach ( $columns as $column_name => $column_display_name ) {
 		echo "<td $attributes>";
 
 		switch ( $column_name ) {
-			case 'icon':
+			case 'title':
 				list( $mime ) = explode( '/', $post->post_mime_type );
-				$attributes = 'class="column-icon media-icon ' . $mime . '-icon"' . $style;
+
+				echo "<div class='media-icon {$mime}-icon'>";
 
 				if ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) {
 					if ( $this->is_trash || ! $user_can_edit ) {
@@ -374,9 +374,8 @@ foreach ( $columns as $column_name => $column_display_name ) {
 					</a><?php
 					}
 				}
-				break;
 
-			case 'title':
+				echo '</div><div class="media-info">';
 ?>
 					<strong>
 					<?php if ( $this->is_trash || ! $user_can_edit ) {
@@ -388,6 +387,7 @@ foreach ( $columns as $column_name => $column_display_name ) {
 					<?php }
 					_media_states( $post ); ?></strong>
 					<p class="filename"><?php echo wp_basename( $post->guid ); ?></p>
+				</div>
 <?php
 				break;