From 6528d8e79ad6efb15a0b4c70a220c5132ba413b4 Mon Sep 17 00:00:00 2001 From: Marcus Quinn Date: Tue, 25 Mar 2025 00:45:29 +0000 Subject: [PATCH] Make plugin layout consistent for all screen widths based on 768px layout --- admin/css/wp-allstars-admin.css | 75 ++++++-------------------- admin/css/wp-allstars-plugins.css | 87 +++++++++---------------------- 2 files changed, 42 insertions(+), 120 deletions(-) diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index c079669..222f67f 100644 --- a/admin/css/wp-allstars-admin.css +++ b/admin/css/wp-allstars-admin.css @@ -1033,6 +1033,7 @@ body.wp-admin .button.pricing-button:hover, text-align: center; } +/* Use consistent layout similar to 768px width for all screen sizes */ #recommended .plugin-card { width: 100%; margin: 0 0 24px 0; @@ -1058,7 +1059,6 @@ body.wp-admin .button.pricing-button:hover, #recommended .plugin-card-top { padding: 0; - margin-bottom: 20px; min-height: auto; flex-grow: 1; } @@ -1068,13 +1068,13 @@ body.wp-admin .button.pricing-button:hover, float: left; width: 64px; height: 64px; - margin: 0 20px 0 0; + margin: 0 20px 15px 0; } #recommended .plugin-card .name, #recommended .plugin-card .desc { margin-left: 84px; - margin-right: 150px; /* Increase right margin to prevent text going behind buttons */ + margin-right: 0; /* Full width content */ } #recommended .plugin-card .name h3 { @@ -1083,6 +1083,7 @@ body.wp-admin .button.pricing-button:hover, font-weight: 600; color: #1d2327; line-height: 1.4; + word-wrap: break-word; } #recommended .plugin-card .desc { @@ -1090,28 +1091,31 @@ body.wp-admin .button.pricing-button:hover, color: #50575e; font-size: 14px; line-height: 1.6; + margin-bottom: 20px; } +/* Position action links below content, not absolute */ #recommended .plugin-card .action-links { - position: absolute; - top: 24px; - right: 0; - width: 140px; /* Slightly increase width for buttons */ + position: relative; + width: 100%; display: flex; - flex-direction: column; - align-items: flex-end; + flex-direction: row; + align-items: center; + justify-content: flex-end; gap: 8px; - padding-right: 20px; /* Keep padding to give text more space */ + padding: 0; + margin-top: 10px; } #recommended .plugin-card .plugin-action-buttons { margin: 0; float: none; - width: 100%; + width: auto; } #recommended .plugin-card .plugin-action-buttons .button { - width: 100%; + width: auto; + min-width: 120px; text-align: center; } @@ -1138,44 +1142,7 @@ body.wp-admin .button.pricing-button:hover, justify-content: center; } -/* Responsive adjustments - improve mobile layout */ -@media screen and (max-width: 782px) { - #recommended .wpa-plugin-container { - padding: 16px; - } - - #recommended .plugin-card { - padding: 16px; - position: relative; - } - - #recommended .plugin-card .name, - #recommended .plugin-card .desc { - margin-right: 0; /* Allow full width on mobile */ - } - - #recommended .plugin-card .action-links { - position: relative; - width: 100%; - top: auto; - right: auto; - padding-right: 0; - margin-top: 16px; - flex-direction: row; - justify-content: flex-end; - } - - #recommended .plugin-card .plugin-action-buttons { - width: auto; - } - - #recommended .plugin-card .plugin-action-buttons .button { - width: auto; - min-width: 120px; - } -} - -/* Extra small screens */ +/* Extra small screens only */ @media screen and (max-width: 480px) { #recommended .plugin-card { padding-top: 80px; /* Add space for icon */ @@ -1372,12 +1339,4 @@ body.wp-admin .button.pricing-button:hover, padding-left: 25px !important; margin-left: 0 !important; list-style-type: disc !important; -} - -@media screen and (min-width: 1100px) { - /* Ensure text doesn't overlap buttons on wide screens */ - #recommended .plugin-card .name, - #recommended .plugin-card .desc { - margin-right: 160px; - } } \ No newline at end of file diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css index 094ed53..65f70a0 100644 --- a/admin/css/wp-allstars-plugins.css +++ b/admin/css/wp-allstars-plugins.css @@ -38,7 +38,7 @@ display: inline-block; } -/* Plugin Cards */ +/* Plugin Cards - Use consistent layout similar to 768px width for all screens */ .plugin-card { margin: 0 0 24px 0 !important; width: 100% !important; @@ -75,13 +75,13 @@ float: left !important; width: 64px !important; height: 64px !important; - margin: 0 20px 0 0 !important; + margin: 0 20px 15px 0 !important; } -/* Name and description positioning - improved text wrapping */ +/* Name and description positioning - 768px style */ .name.column-name { margin: 0 0 12px 84px !important; - margin-right: 150px !important; /* Increased to prevent text going behind buttons */ + margin-right: 0 !important; /* Full width content */ } .name.column-name h3 { @@ -90,38 +90,39 @@ line-height: 1.4 !important; margin: 0 0 12px !important; color: #1d2327 !important; - word-wrap: break-word !important; /* Ensure text wrapping */ + word-wrap: break-word !important; } .desc.column-description { - margin: 0 0 16px 84px !important; - margin-right: 150px !important; /* Increased to prevent text going behind buttons */ + margin: 0 0 20px 84px !important; + margin-right: 0 !important; /* Full width content */ font-size: 14px !important; line-height: 1.6 !important; color: #50575e !important; } -/* Action Links */ +/* Action Links - Position below content */ .action-links { - position: absolute !important; - top: 24px !important; - right: 0 !important; - width: 140px !important; /* Increased width for buttons */ + position: relative !important; + width: 100% !important; display: flex !important; - flex-direction: column !important; - align-items: flex-end !important; + flex-direction: row !important; + align-items: center !important; + justify-content: flex-end !important; gap: 8px !important; - padding-right: 20px !important; /* Keep padding to give text more space */ + padding: 0 !important; + margin-top: 10px !important; } .plugin-action-buttons { margin: 0 !important; float: none !important; - width: 100% !important; + width: auto !important; } .plugin-action-buttons .button { - width: 100% !important; + width: auto !important; + min-width: 120px !important; text-align: center !important; } @@ -149,43 +150,7 @@ z-index: 100; } -/* Responsive Adjustments - improved mobile layout */ -@media screen and (max-width: 782px) { - .wp-allstars-wrap #wpa-plugin-list { - padding: 16px; - } - - .plugin-card-top { - padding: 16px !important; - } - - .name.column-name, - .desc.column-description { - margin-right: 0 !important; /* Allow full width on mobile */ - } - - .action-links { - position: relative !important; - width: 100% !important; - top: auto !important; - right: auto !important; - padding-right: 0 !important; - margin-top: 16px !important; - flex-direction: row !important; - justify-content: flex-end !important; - } - - .plugin-action-buttons { - width: auto !important; - } - - .plugin-action-buttons .button { - width: auto !important; - min-width: 120px !important; - } -} - -/* Extra small screens */ +/* Extra small screens only */ @media screen and (max-width: 480px) { .plugin-card { padding-top: 80px !important; /* Space for icon at top */ @@ -922,11 +887,9 @@ body.wp-admin .plugin-card-bottom .compatibility-untested *, margin-right: 0; } -/* Additional rule for wider screens */ -@media screen and (min-width: 1100px) { - /* Ensure text doesn't overlap buttons on wide screens */ - .name.column-name, - .desc.column-description { - margin-right: 160px !important; - } -} \ No newline at end of file +/* Theme browser proper layout */ +.theme-browser .theme:nth-child(2n) { + margin-right: 0; +} + +/* Remove media query for wider screens since we're using consistent layout */ \ No newline at end of file