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

Fix: Improve targeting for General/Advanced tabs, add 75% breakpoint, add gutters to Free Plugin tiles

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-24 23:01:01 +00:00
parent 03d9511f4b
commit 1b548a59e2
1 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1006,12 +1006,12 @@ body.wp-admin .button.pricing-button:hover,
}
/* Target the specific setting rows to limit their width */
#general .wp-setting-row,
#general .wp-allstars-toggle,
#advanced .wp-setting-row,
#advanced .wp-allstars-toggle,
#workflow .wp-setting-row,
#workflow .wp-allstars-toggle,
.wp-allstars-settings-content#general .wp-setting-row,
.wp-allstars-settings-content#general .wp-allstars-toggle,
.wp-allstars-settings-content#advanced .wp-setting-row,
.wp-allstars-settings-content#advanced .wp-allstars-toggle,
.wp-allstars-settings-content#workflow .wp-setting-row,
.wp-allstars-settings-content#workflow .wp-allstars-toggle,
#readme .wpa-pro-plugin {
max-width: 50%;
margin: 0 auto;
@ -1023,9 +1023,19 @@ body.wp-admin .button.pricing-button:hover,
max-width: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px; /* Add vertical spacing between cards */
padding: 0 10px; /* Add horizontal gutter */
box-sizing: border-box;
}
/* Add gutters between Free Plugin tiles */
#recommended .wpa-plugin-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 10px;
}
/* Prevent text from overlapping dropdown chevron icon */
.wp-allstars-toggle-header {
position: relative;
@ -1047,14 +1057,30 @@ body.wp-admin .button.pricing-button:hover,
max-width: calc(100% - 40px); /* Ensure space for the chevron */
}
/* Increase breakpoint for responsive behavior */
/* First breakpoint - 75% width */
@media screen and (max-width: 1400px) {
#general .wp-setting-row,
#general .wp-allstars-toggle,
#advanced .wp-setting-row,
#advanced .wp-allstars-toggle,
#workflow .wp-setting-row,
#workflow .wp-allstars-toggle,
.wp-allstars-settings-content#general .wp-setting-row,
.wp-allstars-settings-content#general .wp-allstars-toggle,
.wp-allstars-settings-content#advanced .wp-setting-row,
.wp-allstars-settings-content#advanced .wp-allstars-toggle,
.wp-allstars-settings-content#workflow .wp-setting-row,
.wp-allstars-settings-content#workflow .wp-allstars-toggle,
#recommended .plugin-card,
#readme .wpa-pro-plugin {
max-width: 75%;
margin: 0 auto;
padding: 0;
}
}
/* Second breakpoint - 100% width */
@media screen and (max-width: 1100px) {
.wp-allstars-settings-content#general .wp-setting-row,
.wp-allstars-settings-content#general .wp-allstars-toggle,
.wp-allstars-settings-content#advanced .wp-setting-row,
.wp-allstars-settings-content#advanced .wp-allstars-toggle,
.wp-allstars-settings-content#workflow .wp-setting-row,
.wp-allstars-settings-content#workflow .wp-allstars-toggle,
#recommended .plugin-card,
#readme .wpa-pro-plugin {
max-width: calc(100% - 40px);