marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update plugin grid to match WordPress native plugin card layout

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-15 05:06:41 +00:00
parent 2066fa34bb
commit a36378a18b
1 changed files with 108 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
admin/css/wp-allstars-admin.css
View File

@ -340,53 +340,81 @@ input:checked + .wp-toggle-slider:before {
min-height: 400px; min-height: 400px;
} }
/* Plugin Grid Layout */
.wp-list-table {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 0;
padding: 0;
}
/* Plugin Cards */ /* Plugin Cards */
.plugin-card { .plugin-card {
width: 100%; float: left;
margin: 0; margin: 0 8px 16px;
padding: 0;
width: calc(50% - 16px);
border: 1px solid #ddd; border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0,0,0,0.02); box-shadow: 0 1px 1px rgba(0,0,0,.04);
transition: all 0.2s ease; background-color: #fff;
display: flex; box-sizing: border-box;
flex-direction: column; position: relative;
} }
.plugin-card:hover { .plugin-card:nth-child(2n+1) {
border-color: #2271b1; clear: both;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-left: 0;
} }
.plugin-card .plugin-card-top { .plugin-card:nth-child(2n) {
padding: 20px; margin-right: 0;
min-height: 150px;
flex-grow: 1;
display: flex;
gap: 20px;
} }
.plugin-card .plugin-icon { .plugin-card-top {
border-radius: 4px; position: relative;
width: 128px; padding: 20px 20px 10px;
height: 128px; min-height: 135px;
flex-shrink: 0; }
.plugin-card .name,
.plugin-card .desc {
margin-left: 148px;
margin-right: 120px;
}
.plugin-card .name h3 {
margin: 0 0 12px;
font-size: 18px;
line-height: 1.3;
}
.plugin-card .desc {
margin-top: 0;
margin-bottom: 12px;
font-size: 13px;
line-height: 1.5;
color: #50575e;
} }
.plugin-card .plugin-card-bottom { .plugin-card .plugin-card-bottom {
background: #f6f7f7; clear: both;
border-top: 1px solid #ddd;
padding: 12px 20px; padding: 12px 20px;
display: flex; background-color: #f6f7f7;
align-items: center; border-top: 1px solid #ddd;
justify-content: space-between; overflow: hidden;
}
.plugin-card .plugin-icon {
position: absolute;
top: 20px;
left: 20px;
width: 128px;
height: 128px;
margin: 0 20px 20px 0;
}
.plugin-action-buttons {
clear: right;
float: right;
margin-left: 2em;
margin-bottom: 1em;
text-align: right;
}
.plugin-action-buttons div {
margin-top: 10px;
} }
.plugin-card .column-rating, .plugin-card .column-rating,
@ -395,6 +423,47 @@ input:checked + .wp-toggle-slider:before {
display: none; display: none;
} }
.plugin-card .action-links {
position: absolute;
top: 20px;
right: 20px;
width: 120px;
}
.plugin-card .action-links .button {
display: block;
text-align: center;
margin-bottom: 5px;
}
.plugin-card .action-links .button.button-primary {
background: #2271b1;
border-color: #2271b1;
color: #fff;
}
.plugin-card .action-links .button.button-primary:hover {
background: #135e96;
border-color: #135e96;
}
.plugin-card .name a,
.plugin-card .action-links a {
text-decoration: none;
}
.plugin-card .desc,
.plugin-card .author {
margin: 0 0 12px;
color: #646970;
}
.plugin-card .author {
color: #646970;
font-size: 13px;
margin-left: 148px;
}
/* Theme Container */ /* Theme Container */
#wpa-theme-list { #wpa-theme-list {
margin-top: 20px; margin-top: 20px;
@ -498,8 +567,11 @@ input:checked + .wp-toggle-slider:before {
padding: 0 10px; padding: 0 10px;
} }
.wp-list-table { .plugin-card {
grid-template-columns: 1fr; margin-left: 0;
margin-right: 0;
width: 100%;
clear: both;
} }
} }