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

Improve UI: Update version to 0.1 (Beta) and fix responsive layout for free plugins grid at 768px-1200px view width

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-17 02:49:30 +00:00
parent d860f8f24f
commit c15ccc1233
1 changed files with 11 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,13 @@
/* Plugin Browser Styles */ /* Plugin Browser Styles */
.wp-allstars-plugin-browser { .wp-allstars-wrap .wp-allstars-plugin-browser {
margin: 0 -8px; margin: 0 -8px !important;
padding: 0 8px; padding: 0 8px !important;
width: 100% !important;
max-width: 100% !important;
} }
/* Plugin List Container */ /* Plugin List Container */
#wpa-plugin-list { .wp-allstars-wrap #wpa-plugin-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0; margin: 0;
@ -13,7 +15,7 @@
} }
/* Filter Bar */ /* Filter Bar */
#wpa-plugin-filters.wp-filter { .wp-allstars-wrap #wpa-plugin-filters.wp-filter {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
width: 100%; width: 100%;
@ -21,13 +23,13 @@
} }
/* Standard WordPress Plugin Grid Layout - exactly matching core */ /* Standard WordPress Plugin Grid Layout - exactly matching core */
.wp-list-table.plugin-install { .wp-allstars-wrap .wp-list-table.plugin-install {
margin-top: 20px; margin-top: 20px;
clear: both; clear: both;
padding: 0; padding: 0;
} }
#the-list { .wp-allstars-wrap #the-list {
margin: 0; margin: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -73,24 +75,10 @@
} }
} }
/* Responsive behavior */ /* Responsive behavior is now handled in the mobile styles section below */
@media screen and (max-width: 1200px) {
.plugin-card {
width: 100%;
margin: 0 0 16px 0;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.plugin-card:hover {
border-color: #2271b1 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
}
/* Mobile styles - now working with correct positioning */ /* Mobile styles - now working with correct positioning */
@media screen and (max-width: 782px) { @media screen and (max-width: 1200px) {
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card { body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card {
border: 1px solid #dcdcde !important; border: 1px solid #dcdcde !important;
border-radius: 8px !important; border-radius: 8px !important;