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

Precision UI fixes: Properly align plugin icons at small screens, adjust text wrapping widths, align compatibility checkmarks, position action buttons

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-17 03:14:30 +00:00
parent 140b028499
commit 2694d9d9d6
1 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,23 +77,40 @@
/* Responsive behavior is now handled in the mobile styles section below */ /* Responsive behavior is now handled in the mobile styles section below */
/* Desktop specific adjustments for plugin name width */ /* Desktop specific adjustments for plugin name width and action buttons position */
@media screen and (min-width: 1201px) { @media screen and (min-width: 1201px) {
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 to align with description */
body.wp-admin .plugin-card .action-links {
top: 65px !important;
}
} }
/* Specific adjustments for very small screens */ /* Specific adjustments for very small screens */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
/* Force icon position for small screens */
body.wp-admin .plugin-card .plugin-icon { body.wp-admin .plugin-card .plugin-icon {
left: 35px !important; position: absolute !important;
float: none !important;
left: 20px !important;
top: 20px !important;
margin: 0 !important;
} }
/* Adjust the name column for proper wrapping */
body.wp-admin .plugin-card .name.column-name { body.wp-admin .plugin-card .name.column-name {
margin-left: -35px !important; margin-left: 75px !important;
padding-left: 35px !important; padding-left: 0 !important;
width: calc(90% - 155px) !important; width: calc(75% - 155px) !important;
}
/* Make images 100% important on small screens to override any other rules */
body.wp-admin .plugin-card img.plugin-icon {
position: absolute !important;
left: 20px !important;
} }
} }
@ -125,7 +142,7 @@
overflow: hidden !important; overflow: hidden !important;
} }
/* Place plugin icon on the left of the plugin name without the extra offset */ /* Place plugin icon on the left side in a consistent position */
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;
@ -220,13 +237,14 @@
line-height: 13px !important; line-height: 13px !important;
} }
/* Fix checkmark and text alignment at small screen sizes */ /* Force direct checkmark alignment for all viewport sizes */
@media screen and (max-width: 768px) { 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;
position: relative !important; display: inline-block !important;
top: -5px !important; position: relative !important;
} top: -3px !important;
margin-right: 2px !important;
} }
/* Note: Text color moved outside media query to apply globally */ /* Note: Text color moved outside media query to apply globally */