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

Refine single column plugin layout: full-width nav, fix descriptions, right-align compatibility text, transparent loading spinner

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-25 00:36:08 +00:00
parent d389f92bd6
commit c3d1aff49f
2 changed files with 144 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1023,6 +1023,16 @@ body.wp-admin .button.pricing-button:hover,
margin: 0 auto;
}
/* Filter navigation - full width */
#recommended .nav-tab-wrapper,
#recommended .subsubsub {
max-width: 100%;
width: 100%;
box-sizing: border-box;
margin: 0 0 20px 0;
text-align: center;
}
#recommended .plugin-card {
width: 100%;
margin: 0 0 24px 0;
@ -1064,7 +1074,7 @@ body.wp-admin .button.pricing-button:hover,
#recommended .plugin-card .name,
#recommended .plugin-card .desc {
margin-left: 84px;
margin-right: 0;
margin-right: 120px; /* Ensure description doesn't overlap buttons */
}
#recommended .plugin-card .name h3 {
@ -1083,28 +1093,50 @@ body.wp-admin .button.pricing-button:hover,
}
#recommended .plugin-card .action-links {
position: static;
margin-top: 16px;
width: auto;
position: absolute;
top: 0;
right: 0;
width: 120px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-end;
gap: 8px;
justify-content: flex-end;
}
#recommended .plugin-card .plugin-action-buttons {
margin: 0;
float: none;
width: 100%;
}
#recommended .plugin-card .plugin-action-buttons .button {
width: 100%;
text-align: center;
}
/* Plugin card bottom with right-aligned compatibility text */
#recommended .plugin-card .plugin-card-bottom {
background: #f6f7f7;
padding: 15px;
padding: 15px 20px;
border-top: 1px solid #ddd;
text-align: center;
text-align: right;
margin-top: auto;
}
/* Loading spinner without background */
.wpa-loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive adjustments - maintain single column but adjust padding */
@media screen and (max-width: 782px) {
#recommended .wpa-plugin-container {
@ -1115,11 +1147,43 @@ body.wp-admin .button.pricing-button:hover,
padding: 16px;
}
#recommended .plugin-card .action-links .button {
#recommended .plugin-card .name,
#recommended .plugin-card .desc {
margin-right: 0; /* Allow full width on mobile */
margin-bottom: 60px; /* Space for action buttons below */
}
#recommended .plugin-card .action-links {
position: absolute;
top: auto;
bottom: 15px;
left: 16px;
right: 16px;
width: auto;
flex-direction: row;
}
#recommended .plugin-card .plugin-action-buttons {
width: 100%;
}
}
/* Extra small screens */
@media screen and (max-width: 480px) {
#recommended .plugin-card .name,
#recommended .plugin-card .desc {
margin-left: 0;
margin-top: 80px; /* Space for icon above */
}
#recommended .plugin-card .plugin-icon {
position: absolute;
top: 16px;
left: 16px;
float: none;
}
}
/* Style compatibility message */
#recommended .plugin-card .column-compatibility {
text-align: center;