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

Improve plugin grid layout with responsive design

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 05:20:10 +00:00
parent b30a693d77
commit 2af72db5bb
1 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
admin/css/wp-allstars-plugins.css
View File

@ -20,10 +20,29 @@
box-sizing: border-box;
}
/* Plugin Cards */
/* Plugin Container */
#the-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 16px;
}
@media screen and (min-width: 600px) {
#the-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1200px) {
#the-list {
grid-template-columns: repeat(3, 1fr);
}
}
/* Plugin Cards */
.plugin-card {
width: calc(50% - 16px);
margin: 8px;
background-color: #fff;
border: 1px solid #dcdcde;
box-sizing: border-box;
@ -31,6 +50,9 @@
display: flex;
flex-direction: column;
border-radius: 3px;
width: 100%;
margin: 0;
height: 100%; /* Ensure all cards have equal height */
}
.plugin-card:hover {
@ -95,14 +117,18 @@
background-color: #f6f7f7;
overflow: hidden;
border-top: 1px solid #dcdcde;
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: auto; /* Push to bottom of card */
}
.plugin-card-bottom > div {
margin-bottom: 0;
flex: 1 0 auto;
padding-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.column-rating {