Ticket #29466: 29466.diff

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

@@ -1302 +1302 @@
 }
 
 .plugin-card-top {
+        position: relative;
         padding: 20px 20px 10px;
-        min-height: 115px; /* 2 lines for the description + author */
+        min-height: 135px;
 }
 
 div.action-links,
@@ -1316 +1317 @@
         font-size: 18px;
 }
 
+.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 {
         clear: right;
         float: right;
@@ -1380 +1394 @@
         text-decoration: none !important;
         color: #444;
 }
+
 .plugin-card .compatibility-incompatible:before {
         content: '\f158';
 }
@@ -1393 +1408 @@
 }
 
 .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;
@@ -1426 +1448 @@
 /* =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 {

src/wp-admin/includes/class-wp-plugin-install-list-table.php

@@ -435 +435 @@
                 ?>
                 <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 +446 @@
                                                 }
                                         ?>
                                 </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>