Plugin install: Better styling to accommodate plugin icons.

fixes #29466.

Built from https://develop.svn.wordpress.org/trunk@29679


git-svn-id: http://core.svn.wordpress.org/trunk@29454 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2014-09-02 19:47:16 +00:00
parent e496cc6e4b
commit 433210a907
5 changed files with 120 additions and 16 deletions

View File

@ -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-right: 148px; /* icon + margin */
margin-left: 120px; /* action links */
}
.plugin-card .action-links {
position: absolute;
top: 20px;
left: 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;
right: 20px;
width: 128px;
height: 128px;
float: right;
margin: 0 0 20px 20px;
}
.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-right: 148px;
width: auto;
}
.plugin-action-buttons {
float: none;
margin: 1em 0 0;
text-align: right;
}
.plugin-action-buttons li {
display: inline-block;
vertical-align: middle;
}
.plugin-action-buttons li .button {
margin-left: 20px;
}
.plugin-card .name,
.plugin-card .desc {
margin-left: 0;
}
.plugin-card .desc p:first-of-type {
margin-top: 0;
}
}
@media screen and ( max-width: 782px ) {
/* WP List Table Options & Filters */
.tablenav {

View File

@ -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 {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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>