Changeset 29219

Timestamp:

07/18/2014 06:07:21 AM (10 years ago)

Author:

helen

Message:

Plugin install cards:

• Move author attribution to its own line.
• Use esc_url() where appropriate.
• Better i18n.
• min-height for cards for a more even appearance.
• Show more cards on wide screens.
• Tighten up spacing below the filter bar.

props ocean90, helen. see #28785.

Location:

trunk/src/wp-admin

Files:

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

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

@@ -1212 +1212 @@
 }
 
+.plugin-install-php .wp-filter {
+    margin-bottom: 0;
+}
+
 /* Plugin card table view */
 .plugin-card {
@@ -1226 +1230 @@
 }
 
+.plugin-card:nth-child(odd) {
+    clear: both;
+    margin-left: 0;
+}
+
+.plugin-card:nth-child(even) {
+    margin-right: 0;
+}
+
+@media screen and ( min-width: 1600px ) {
+    .plugin-card {
+        width: 30%;
+        width: -webkit-calc( 33.1% - 8px );
+        width: calc( 33.1% - 8px );
+    }
+
+    .plugin-card:nth-child(odd) {
+        clear: none;
+        margin-left: 8px;
+    }
+
+    .plugin-card:nth-child(even) {
+        margin-right: 8px;
+    }
+
+    .plugin-card:nth-child(3n+1) {
+        clear: both;
+        margin-left: 0;
+    }
+
+    .plugin-card:nth-child(3n) {
+        margin-right: 0;
+    }
+}
+
 @media screen and ( max-width: 782px ) {
     .plugin-card {
@@ -1234 +1273 @@
 }
 
-.plugin-card:nth-child(odd) {
-    clear: both;
-    margin-left: 0;
-}
-
-.plugin-card:nth-child(even) {
-    margin-right: 0
-}
-
 .plugin-card-top {
     padding: 20px 20px 10px;
+    min-height: 115px; /* 2 lines for the description + author */
 }
 

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

@@ -307 +307 @@
                                 '&TB_iframe=true&width=600&height=550' );
 
-            $action_links[] = '<a href="' . esc_attr( $details_link ) . '" class="thickbox" aria-labelledby="' . $plugin['slug'] . '" data-title="' . esc_attr( $name ) . '">' . __( 'More Details' ) . '</a>';
+            $action_links[] = '<a href="' . esc_url( $details_link ) . '" class="thickbox" aria-labelledby="' . $plugin['slug'] . '" data-title="' . esc_attr( $name ) . '">' . __( 'More Details' ) . '</a>';
 
 
@@ -323 +323 @@
             <div class="plugin-card-top">
                 <div class="name column-name"<?php echo $style['name']; ?>>
-                    <h4><a href="<?php echo esc_attr( $details_link ) ?>" class="thickbox"><?php echo $title; ?></a></h4>
+                    <h4><a href="<?php echo esc_url( $details_link ) ?>" class="thickbox"><?php echo $title; ?></a></h4>
                     <div class="action-links">
                         <?php
@@ -333 +333 @@
                 </div>
                 <div class="desc column-description"<?php echo $style['description']; ?>>
-                    <p><?php echo $description ?>
-                    <span class="authors">
-                        <?php echo $author; ?>
-                    </span>
-                    </p>
+                    <p><?php echo $description ?></p>
+                    <p class="authors"><?php echo $author; ?></p>
                 </div>
             </div>
@@ -345 +342 @@
                     <span class="num-ratings">(<?php echo number_format_i18n( $plugin['num_ratings'] ); ?>)</span>
                 </div>
-                <div class="column-updated"><?php echo __( '<strong>Last updated:</strong>' ) . ' '. sprintf( '%s ago', human_time_diff( strtotime($plugin['last_updated']) ) ); ?></div>
-                <div class="column-downloaded"><?php echo sprintf( __('%s downloads'), number_format_i18n( $plugin['downloaded'] ) ); ?></div>
+                <div class="column-updated">
+                    <strong><?php _e( 'Last Updated:' ); ?></strong> <span title="<?php echo esc_attr( $plugin['last_updated'] ); ?>">
+                        <?php printf( __( '%s ago' ), human_time_diff( strtotime( $plugin['last_updated'] ) ) ); ?>
+                    </span>
+                </div>
+                <div class="column-downloaded">
+                    <?php echo sprintf( _n( '%s download', '%s downloads', $plugin['downloaded'] ), number_format_i18n( $plugin['downloaded'] ) ); ?>
+                </div>
                 <div class="column-compatibility">
-                <?php
+                    <?php
                     if ( ! empty( $plugin['tested'] ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $plugin['tested'] ) ), $plugin['tested'], '>' ) ) {
                         echo  __( '<strong>Untested</strong> with your install ');
@@ -356 +359 @@
                         echo __( '<strong>Compatible</strong> with your install ');
                     }
-                ?>
+                    ?>
                 </div>
             </div>