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

Remove responsive breakpoints for consistent plugin layout across all viewports

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-17 04:38:32 +00:00
parent fa1744b892
commit 7a971ca5e3
1 changed files with 164 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,16 +63,14 @@
margin-left: 0; margin-left: 0;
} }
/* Maintain consistent center gutter at all widths */ /* Consistent styling for all widths */
@media screen and (min-width: 1600px) { /* Force equal spacing between all cards */
/* Force equal spacing between all cards */ .plugin-card:nth-child(odd) {
.plugin-card:nth-child(odd) {
margin-right: 8px; margin-right: 8px;
} }
.plugin-card:nth-child(even) { .plugin-card:nth-child(even) {
margin-left: 8px; margin-left: 8px;
}
} }
/* Global plugin icon positioning that applies to all viewport sizes */ /* Global plugin icon positioning that applies to all viewport sizes */
@ -91,30 +89,27 @@ body.wp-admin .plugin-card .plugin-icon {
visibility: visible !important; visibility: visible !important;
} }
/* Responsive behavior is now handled in the mobile styles section below */ /* All responsive behavior has been removed in favor of consistent desktop styling */
/* Desktop specific adjustments for plugin name width and action buttons position */ /* Global adjustments for plugin name width and action buttons position */
@media screen and (min-width: 1200px) { body.wp-admin .plugin-card .name.column-name {
body.wp-admin .plugin-card .name.column-name {
width: calc(95% - 120px) !important; width: calc(95% - 120px) !important;
} }
/* Position action buttons at the bottom of the card top section */ /* Position action buttons at the bottom of the card top section */
body.wp-admin .plugin-card .action-links { body.wp-admin .plugin-card .action-links {
top: auto !important; top: auto !important;
bottom: 20px !important; bottom: 20px !important;
right: 20px !important; right: 20px !important;
}
/* Make description text stay below the name with proper margin */
body.wp-admin .plugin-card .desc.column-description {
margin-top: 10px !important;
}
} }
/* Desktop styles (above 782px) */ /* Make description text stay below the name with proper margin */
@media screen and (min-width: 783px) { body.wp-admin .plugin-card .desc.column-description {
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card { margin-top: 10px !important;
}
/* Global styles for all viewport sizes - no breakpoints */
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;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
@ -124,24 +119,24 @@ body.wp-admin .plugin-card .plugin-icon {
box-sizing: border-box !important; box-sizing: border-box !important;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
overflow: hidden !important; overflow: hidden !important;
} }
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card:hover { body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card:hover {
border-color: #2271b1 !important; border-color: #2271b1 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
} }
/* Card top section with proper positioning */ /* Card top section with proper positioning */
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .plugin-card-top { body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .plugin-card-top {
display: block !important; display: block !important;
min-height: 100px !important; min-height: 100px !important;
position: relative !important; position: relative !important;
padding: 20px !important; padding: 20px !important;
overflow: hidden !important; overflow: hidden !important;
} }
/* ADDING SUPER SPECIFIC MOBILE STYLING FOR ICONS - exact same as above 780px */ /* Consistent icon styling for all viewport sizes */
body.wp-admin .plugin-card .plugin-icon { body.wp-admin .plugin-card .plugin-icon {
position: relative !important; position: relative !important;
float: left !important; float: left !important;
top: auto !important; top: auto !important;
@ -151,12 +146,10 @@ body.wp-admin .plugin-card .plugin-icon {
width: 64px !important; width: 64px !important;
height: 64px !important; height: 64px !important;
z-index: 1 !important; z-index: 1 !important;
} }
/* Removed duplicate plugin icon styling */ /* Position name next to the icon with wider width for better text wrap */
body.wp-admin .plugin-card .name.column-name {
/* Position name next to the icon with wider width for better text wrap */
body.wp-admin .plugin-card .name.column-name {
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
@ -167,16 +160,16 @@ body.wp-admin .plugin-card .plugin-icon {
max-width: none !important; max-width: none !important;
vertical-align: top !important; vertical-align: top !important;
padding-left: 0 !important; padding-left: 0 !important;
} }
body.wp-admin .plugin-card .name.column-name h3 { body.wp-admin .plugin-card .name.column-name h3 {
margin-bottom: 5px !important; margin-bottom: 5px !important;
word-wrap: break-word !important; word-wrap: break-word !important;
width: 100% !important; width: 100% !important;
} }
/* Position action buttons to the right of plugin name */ /* Position action buttons to the right of plugin name */
body.wp-admin .plugin-card .action-links { body.wp-admin .plugin-card .action-links {
position: absolute !important; position: absolute !important;
top: 20px !important; top: 20px !important;
right: 20px !important; right: 20px !important;
@ -185,19 +178,19 @@ body.wp-admin .plugin-card .plugin-icon {
flex-direction: column !important; flex-direction: column !important;
align-items: flex-end !important; align-items: flex-end !important;
min-width: 120px !important; min-width: 120px !important;
} }
body.wp-admin .plugin-card .action-links .plugin-action-buttons { body.wp-admin .plugin-card .action-links .plugin-action-buttons {
margin-bottom: 8px !important; margin-bottom: 8px !important;
} }
body.wp-admin .plugin-card .action-links .plugin-action-buttons li { body.wp-admin .plugin-card .action-links .plugin-action-buttons li {
display: block !important; display: block !important;
margin-bottom: 5px !important; margin-bottom: 5px !important;
} }
/* Fix description spacing */ /* Fix description spacing */
body.wp-admin .plugin-card-bottom { body.wp-admin .plugin-card-bottom {
padding: 15px 20px !important; padding: 15px 20px !important;
margin-top: 0 !important; margin-top: 0 !important;
text-align: left !important; text-align: left !important;
@ -209,20 +202,20 @@ body.wp-admin .plugin-card .plugin-icon {
box-sizing: border-box !important; box-sizing: border-box !important;
border-bottom-left-radius: 8px !important; border-bottom-left-radius: 8px !important;
border-bottom-right-radius: 8px !important; border-bottom-right-radius: 8px !important;
} }
/* Remove excessive spacing between elements */ /* Remove excessive spacing between elements */
body.wp-admin .plugin-card p, body.wp-admin .plugin-card p,
body.wp-admin .plugin-card .desc.column-description { body.wp-admin .plugin-card .desc.column-description {
margin-top: 0 !important; margin-top: 0 !important;
margin-bottom: 8px !important; margin-bottom: 8px !important;
text-align: left !important; text-align: left !important;
margin-left: 0 !important; margin-left: 0 !important;
} }
/* Fix compatibility check positioning and height */ /* Fix compatibility check positioning and height */
body.wp-admin .plugin-card .compatibility-compatible, body.wp-admin .plugin-card .compatibility-compatible,
body.wp-admin .plugin-card .compatibility-untested { body.wp-admin .plugin-card .compatibility-untested {
margin-top: 0 !important; margin-top: 0 !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
padding: 0 20px !important; padding: 0 20px !important;
@ -235,127 +228,29 @@ body.wp-admin .plugin-card .plugin-icon {
justify-content: flex-end !important; justify-content: flex-end !important;
height: 0px !important; height: 0px !important;
line-height: 13px !important; line-height: 13px !important;
} }
/* Force direct checkmark alignment for all viewport sizes */ /* Force direct checkmark alignment for all viewport sizes */
body.wp-admin .plugin-card .compatibility-compatible::before, body.wp-admin .plugin-card .compatibility-compatible::before,
body.wp-admin .plugin-card .compatibility-untested::before { body.wp-admin .plugin-card .compatibility-untested::before {
vertical-align: middle !important; vertical-align: middle !important;
display: inline-block !important; display: inline-block !important;
position: relative !important; position: relative !important;
top: 0px !important; /* Adjusted from -3px to 0px */ top: 0px !important; /* Adjusted from -3px to 0px */
margin-right: 2px !important; margin-right: 2px !important;
} }
/* Note: Text color moved outside media query to apply globally */ /* Ensure compatibility text container has full width */
body.wp-admin .plugin-card-bottom p,
/* Ensure compatibility text container has full width */ body.wp-admin .plugin-card-bottom div {
body.wp-admin .plugin-card-bottom p,
body.wp-admin .plugin-card-bottom div {
width: 100% !important; width: 100% !important;
max-width: none !important; max-width: none !important;
box-sizing: border-box !important; box-sizing: border-box !important;
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
}
} }
/* Small screen styles with single column layout but desktop styling */ /* All styling applies consistently across all screen sizes with no breakpoints */
@media screen and (max-width: 782px) {
/* Apply single column layout for mobile */
body.wp-admin .wp-list-table.plugin-install #the-list {
display: flex !important;
flex-wrap: wrap !important;
padding: 0 !important;
margin: 0 !important;
}
/* Keep the same card styling but with full width for single column */
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card {
border: 1px solid #dcdcde !important;
border-radius: 8px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
width: 100% !important; /* Single column layout */
margin: 0 0 16px 0 !important; /* No horizontal margins needed */
padding: 0 !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
overflow: hidden !important;
}
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card:hover {
border-color: #2271b1 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
/* Card top section - exact copy from desktop */
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .plugin-card-top {
display: block !important;
min-height: 100px !important;
position: relative !important;
padding: 20px !important;
overflow: hidden !important;
}
/* Plugin icon - exact copy from desktop */
body.wp-admin .plugin-card .plugin-icon {
position: relative !important;
float: left !important;
top: auto !important;
right: auto !important;
left: 0 !important;
margin: 0 20px 0 0 !important;
width: 64px !important;
height: 64px !important;
z-index: 1 !important;
}
/* Plugin name - exact copy from desktop */
body.wp-admin .plugin-card .name.column-name {
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 10px !important;
margin-top: 0 !important;
text-align: left !important;
display: inline-block !important;
width: calc(95% - 155px) !important;
max-width: none !important;
vertical-align: top !important;
padding-left: 0 !important;
}
body.wp-admin .plugin-card .name.column-name h3 {
margin-bottom: 5px !important;
word-wrap: break-word !important;
width: 100% !important;
}
/* Action buttons - exact copy from desktop */
body.wp-admin .plugin-card .action-links {
position: absolute !important;
top: 20px !important;
right: 20px !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
min-width: 120px !important;
}
body.wp-admin .plugin-card .action-links .plugin-action-buttons {
margin-bottom: 8px !important;
}
body.wp-admin .plugin-card .action-links .plugin-action-buttons li {
display: block !important;
margin-bottom: 5px !important;
}
/* Card bottom - exact copy from desktop */
body.wp-admin .plugin-card-bottom {
padding: 15px 20px !important;
}
}
/* Center More Details under all buttons */ /* Center More Details under all buttons */
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .action-links a.thickbox, body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .action-links a.thickbox,