From 2cb48c103979c830b5a17f9d2b329d3e63d50277 Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Tue, 2 Sep 2014 19:46:19 +0000
Subject: [PATCH] Plugin install: Better styling to accommodate plugin icons.

fixes #29466.


git-svn-id: https://develop.svn.wordpress.org/trunk@29679 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/list-tables.css              | 62 +++++++++++++++++--
 .../class-wp-plugin-install-list-table.php    |  8 +--
 2 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 45beb636de..88b658164e 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -1306,8 +1306,9 @@ tr.active + tr.plugin-update-tr .plugin-update .update-message {
 }
 
 .plugin-card-top {
+	position: relative;
 	padding: 20px 20px 10px;
-	min-height: 115px; /* 2 lines for the description + author */
+	min-height: 135px;
 }
 
 div.action-links,
@@ -1318,6 +1319,20 @@ div.action-links,
 .plugin-card h4 {
 	margin: 0 0 12px;
 	font-size: 18px;
+	line-height: 1.3;
+}
+
+.plugin-card .name,
+.plugin-card .desc {
+	margin-left: 148px; /* icon + margin */
+	margin-right: 120px; /* action links */
+}
+
+.plugin-card .action-links {
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	width: 120px;
 }
 
 .plugin-action-buttons {
@@ -1384,6 +1399,7 @@ div.action-links,
 	text-decoration: none !important;
 	color: #444;
 }
+
 .plugin-card .compatibility-incompatible:before {
 	content: '\f158';
 }
@@ -1397,12 +1413,19 @@ div.action-links,
 }
 
 .plugin-icon {
+	position: absolute;
+	top: 20px;
+	left: 20px;
 	width: 128px;
 	height: 128px;
-	float: left;
 	margin: 0 20px 20px 0;
 }
 
+.plugin-icon img {
+	width: 128px;
+	height: 128px;
+}
+
 .no-plugin-results {
 	color: #999;
 	font-size: 18px;
@@ -1430,9 +1453,38 @@ div.action-links,
 /* =Media Queries
 -------------------------------------------------------------- */
 
-/**
- * HiDPI Displays
- */
+@media screen and ( max-width: 1100px ) and ( min-width: 782px ), ( max-width: 480px ) {
+	.plugin-card .action-links {
+		position: static;
+		margin-left: 148px;
+		width: auto;
+	}
+
+	.plugin-action-buttons {
+		float: none;
+		margin: 1em 0 0;
+		text-align: left;
+	}
+
+	.plugin-action-buttons li {
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.plugin-action-buttons li .button {
+		margin-right: 20px;
+	}
+
+	.plugin-card .name,
+	.plugin-card .desc {
+		margin-right: 0;
+	}
+
+	.plugin-card .desc p:first-of-type {
+		margin-top: 0;
+	}
+}
+
 @media screen and ( max-width: 782px ) {
 	/* WP List Table Options & Filters */
 	.tablenav {
diff --git a/src/wp-admin/includes/class-wp-plugin-install-list-table.php b/src/wp-admin/includes/class-wp-plugin-install-list-table.php
index e87bf3f793..1252227ed8 100644
--- a/src/wp-admin/includes/class-wp-plugin-install-list-table.php
+++ b/src/wp-admin/includes/class-wp-plugin-install-list-table.php
@@ -435,7 +435,10 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
 		?>
 		<div class="plugin-card">
 			<div class="plugin-card-top">
-				<a href="<?php echo esc_url( $details_link ); ?>" class="thickbox"><img src="<?php echo esc_attr( $plugin_icon_url ) ?>" class="plugin-icon" /></a>
+				<a href="<?php echo esc_url( $details_link ); ?>" class="thickbox plugin-icon"><img src="<?php echo esc_attr( $plugin_icon_url ) ?>" /></a>
+				<div class="name column-name">
+					<h4><a href="<?php echo esc_url( $details_link ); ?>" class="thickbox"><?php echo $title; ?></a></h4>
+				</div>
 				<div class="action-links">
 					<?php
 						if ( $action_links ) {
@@ -443,9 +446,6 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
 						}
 					?>
 				</div>
-				<div class="name column-name">
-					<h4><a href="<?php echo esc_url( $details_link ); ?>" class="thickbox"><?php echo $title; ?></a></h4>
-				</div>
 				<div class="desc column-description">
 					<p><?php echo $description; ?></p>
 					<p class="authors"><?php echo $author; ?></p>