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. Built from https://develop.svn.wordpress.org/trunk@29219 git-svn-id: http://core.svn.wordpress.org/trunk@29003 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí
parent
02e3a7cbe3
commit
a034c2076b
|
|
@ -1211,6 +1211,10 @@ tr.active + tr.plugin-update-tr .plugin-update .update-message {
|
|||
margin: 2.5em 0 8px;
|
||||
}
|
||||
|
||||
.plugin-install-php .wp-filter {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Plugin card table view */
|
||||
.plugin-card {
|
||||
float: right;
|
||||
|
|
@ -1225,6 +1229,41 @@ tr.active + tr.plugin-update-tr .plugin-update .update-message {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plugin-card:nth-child(odd) {
|
||||
clear: both;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.plugin-card:nth-child(even) {
|
||||
margin-left: 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-right: 8px;
|
||||
}
|
||||
|
||||
.plugin-card:nth-child(even) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.plugin-card:nth-child(3n+1) {
|
||||
clear: both;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.plugin-card:nth-child(3n) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 782px ) {
|
||||
.plugin-card {
|
||||
margin-right: 0;
|
||||
|
|
@ -1233,17 +1272,9 @@ tr.active + tr.plugin-update-tr .plugin-update .update-message {
|
|||
}
|
||||
}
|
||||
|
||||
.plugin-card:nth-child(odd) {
|
||||
clear: both;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.plugin-card:nth-child(even) {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.plugin-card-top {
|
||||
padding: 20px 20px 10px;
|
||||
min-height: 115px; /* 2 lines for the description + author */
|
||||
}
|
||||
|
||||
div.action-links,
|
||||
|
|
|
|||
|
|
@ -1211,6 +1211,10 @@ tr.active + tr.plugin-update-tr .plugin-update .update-message {
|
|||
margin: 2.5em 0 8px;
|
||||
}
|
||||
|
||||
.plugin-install-php .wp-filter {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Plugin card table view */
|
||||
.plugin-card {
|
||||
float: left;
|
||||
|
|
@ -1225,6 +1229,41 @@ tr.active + tr.plugin-update-tr .plugin-update .update-message {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-left: 0;
|
||||
|
|
@ -1233,17 +1272,9 @@ tr.active + tr.plugin-update-tr .plugin-update .update-message {
|
|||
}
|
||||
}
|
||||
|
||||
.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 */
|
||||
}
|
||||
|
||||
div.action-links,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -306,7 +306,7 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
|
|||
$details_link = self_admin_url( 'plugin-install.php?tab=plugin-information&plugin=' . $plugin['slug'] .
|
||||
'&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>';
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -322,7 +322,7 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
|
|||
<div class="plugin-card">
|
||||
<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
|
||||
if ( ! empty( $action_links ) ) {
|
||||
|
|
@ -332,11 +332,8 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
|
|||
</div>
|
||||
</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>
|
||||
<div class="plugin-card-bottom">
|
||||
|
|
@ -344,10 +341,16 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
|
|||
<?php wp_star_rating( array( 'rating' => $plugin['rating'], 'type' => 'percent', 'number' => $plugin['num_ratings'] ) ); ?>
|
||||
<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 ');
|
||||
} elseif ( ! empty( $plugin['requires'] ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $plugin['requires'] ) ), $plugin['requires'], '<' ) ) {
|
||||
|
|
@ -355,7 +358,7 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
|
|||
} else {
|
||||
echo __( '<strong>Compatible</strong> with your install ');
|
||||
}
|
||||
?>
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue