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

Convert Pro Plugins, Hosting, and Tools tabs to single column layout

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-25 01:34:19 +00:00
parent a374f26e34
commit 89009dca92
1 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -770,13 +770,13 @@ input:checked + .wp-toggle-slider:before {
z-index: 1;
}
/* Panel styles for Pro Plugins, Hosting, and Tools tabs */
/* Panel styles for Pro Plugins, Hosting, and Tools tabs - Single Column Layout */
.wpa-pro-plugins {
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
gap: 24px;
max-width: 1920px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 700px; /* Match Free Plugins max-width */
margin: 0 auto;
}
@ -789,6 +789,13 @@ input:checked + .wp-toggle-slider:before {
flex-direction: column;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
width: 100%; /* Full width of container */
margin-bottom: 24px; /* Match Free Plugins spacing */
max-width: 100%; /* Ensure it doesn't exceed container */
}
.wpa-pro-plugin:last-child {
margin-bottom: 0;
}
.wpa-pro-plugin:hover {
@ -816,6 +823,7 @@ input:checked + .wp-toggle-slider:before {
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
justify-content: flex-end; /* Right-align buttons like Free Plugins */
}
.wpa-pro-plugin .button {
@ -856,10 +864,16 @@ input:checked + .wp-toggle-slider:before {
color: #fff;
}
/* Adjust spacing between pro plugins content and tabs navigation */
#pro .wpa-pro-plugins,
#hosting .wpa-pro-plugins,
#tools .wpa-pro-plugins {
padding-top: 15px; /* Match Free Plugins padding */
}
/* Simplify media queries since we're using single column at all widths */
@media screen and (max-width: 960px) {
.wpa-pro-plugins {
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
padding: 16px;
}
.wpa-pro-plugin {
@ -869,16 +883,11 @@ input:checked + .wp-toggle-slider:before {
@media screen and (max-width: 782px) {
.wpa-pro-plugins {
grid-template-columns: 1fr;
gap: 16px;
padding: 12px;
}
.wpa-pro-plugin {
padding: 16px;
}
.wpa-pro-plugin .button {
width: 100%;
}
}
/* Markdown Content Styles for About Tab */