Changeset 29679

Timestamp:

09/02/2014 07:46:19 PM (11 years ago)

Author:

helen

Message:

Plugin install: Better styling to accommodate plugin icons.

fixes #29466.

Location:

trunk/src/wp-admin

Files:

• css/list-tables.css (modified) (5 diffs)
• includes/class-wp-plugin-install-list-table.php (modified) (2 diffs)

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

@@ -1307 +1307 @@
 
 .plugin-card-top {
+    position: relative;
     padding: 20px 20px 10px;
-    min-height: 115px; /* 2 lines for the description + author */
+    min-height: 135px;
 }
 
@@ -1319 +1320 @@
     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;
 }
 
@@ -1385 +1400 @@
     color: #444;
 }
+
 .plugin-card .compatibility-incompatible:before {
     content: '\f158';
@@ -1398 +1414 @@
 
 .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;
 }
 
@@ -1431 +1454 @@
 -------------------------------------------------------------- */
 
-/**
- * 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 */

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

@@ -436 +436 @@
         <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
@@ -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">