From 23c5d0adce4b11532996f0716c38145473860275 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Tue, 25 Mar 2025 00:15:09 +0000
Subject: [PATCH] Improve free plugins tile layout: Implement consistent grid
 layout matching pro plugins section, add responsive design with breakpoints,
 improve spacing and alignment, standardize styling, fix mobile layout, add
 hover effects

---
 admin/css/wp-allstars-admin.css   | 149 +++++++++++++++++++-----------
 admin/css/wp-allstars-plugins.css | 138 ++++++++++++++++++---------
 2 files changed, 190 insertions(+), 97 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index 4f98c92..ccbe34f 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -1008,69 +1008,122 @@ body.wp-admin .button.pricing-button:hover,
 .wp-allstars-tab-content .wp-allstars-toggle,
 #readme .wpa-pro-plugin {
     max-width: 50%;
-    margin: 0 auto 20px auto; /* Added bottom margin for spacing */
+    margin: 0 auto 20px auto;
     box-sizing: border-box;
-    padding: 0; /* Remove padding here, add it to inner elements */
+    padding: 0;
 }
 
-/* Free Plugins - Simple centered tile layout */
-#recommended .plugin-card {
-    width: 800px;
-    max-width: 100%;
-    margin: 0 auto 20px;
+/* Free Plugins - Grid Layout matching Pro Plugins */
+#recommended .wpa-plugin-container {
     padding: 20px;
-    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: 24px;
+    max-width: 1920px;
+    margin: 0 auto;
+}
+
+#recommended .plugin-card {
+    width: 100%;
+    margin: 0;
+    padding: 24px;
     border: 1px solid #ddd;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
-    position: relative;
-    padding-bottom: 60px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     background: #fff;
-    justify-self: center;
+    transition: all 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    position: relative;
 }
 
-/* Fix compatibility row alignment to bottom of card */
-#recommended .plugin-card .plugin-card-bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 15px;
-    border-top: 1px solid #eee;
-    text-align: center;
-    background: #f9f9f9;
-    height: 30px;
+#recommended .plugin-card:hover {
+    border-color: #2271b1;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
 
-/* Basic plugin card elements */
 #recommended .plugin-card-top {
+    padding: 0;
     margin-bottom: 20px;
-    text-align: left;
-}
-
-#recommended .plugin-card .name h3 {
-    margin: 0 0 15px;
-    font-size: 16px;
-}
-
-#recommended .plugin-card .desc {
-    margin: 15px 0;
-    font-size: 13px;
-    line-height: 1.5;
-    clear: none;
-    text-align: left;
-    margin-left: 115px;
+    min-height: auto;
+    flex-grow: 1;
 }
 
 #recommended .plugin-card .plugin-icon {
+    position: relative;
     float: left;
-    margin: 0 15px 15px 0;
-    width: 100px;
-    height: 100px;
+    width: 64px;
+    height: 64px;
+    margin: 0 20px 0 0;
+}
+
+#recommended .plugin-card .name,
+#recommended .plugin-card .desc {
+    margin-left: 84px;
+    margin-right: 0;
+}
+
+#recommended .plugin-card .name h3 {
+    margin: 0 0 12px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1d2327;
+    line-height: 1.4;
+}
+
+#recommended .plugin-card .desc {
+    margin-top: 0;
+    color: #50575e;
+    font-size: 14px;
+    line-height: 1.6;
 }
 
 #recommended .plugin-card .action-links {
-    margin: 15px 0 25px;
-    text-align: right;
+    position: static;
+    margin-top: 16px;
+    width: auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+#recommended .plugin-card .plugin-action-buttons {
+    margin: 0;
+    float: none;
+}
+
+#recommended .plugin-card .plugin-card-bottom {
+    background: #f6f7f7;
+    padding: 15px;
+    border-top: 1px solid #ddd;
+    text-align: center;
+    margin-top: auto;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 960px) {
+    #recommended .wpa-plugin-container {
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+        gap: 20px;
+        padding: 16px;
+    }
+    #recommended .plugin-card {
+        padding: 20px;
+    }
+}
+
+@media screen and (max-width: 782px) {
+    #recommended .wpa-plugin-container {
+        grid-template-columns: 1fr;
+        gap: 16px;
+        padding: 12px;
+    }
+    #recommended .plugin-card {
+        padding: 16px;
+    }
+    #recommended .plugin-card .action-links .button {
+        width: 100%;
+    }
 }
 
 /* Style compatibility message */
@@ -1089,14 +1142,6 @@ body.wp-admin .button.pricing-button:hover,
     width: 100%;
 }
 
-#recommended .wpa-plugin-container {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 15px;
-    text-align: center;
-}
-
 /* Explicitly target readme content */
 #readme .wp-allstars-markdown-content {
     padding: 20px;
diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index 7a7b2ea..eb4287d 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -1,34 +1,28 @@
 /* Plugin Browser Styles */
 .wp-allstars-wrap .wp-allstars-plugin-browser {
-    margin: 0 -8px !important;
-    padding: 0 8px !important;
+    margin: 0 !important;
+    padding: 0 !important;
     width: 100% !important;
     max-width: 100% !important;
 }
 
 /* Plugin List Container */
 .wp-allstars-wrap #wpa-plugin-list {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: 24px;
     margin: 0;
-    width: 100%;
+    padding: 20px;
+    max-width: 1920px;
+    margin: 0 auto;
 }
 
 /* Filter Bar */
 .wp-allstars-wrap #wpa-plugin-filters.wp-filter {
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 22px !important; /* Enforce exact 22px spacing */
+    margin: 0 0 22px 0 !important;
     width: 100%;
     box-sizing: border-box;
-    text-align: center; /* Center align filter bar content */
-}
-
-/* Standard WordPress Plugin Grid Layout - exactly matching core */
-.wp-allstars-wrap .wp-list-table.plugin-install {
-    margin-top: 0; /* Removed to prevent double spacing with container */
-    clear: both;
-    padding: 0;
+    text-align: center;
 }
 
 /* Center filter links */
@@ -43,17 +37,10 @@
     display: inline-block;
 }
 
-.wp-allstars-wrap #the-list {
-    margin: 0;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0;
-}
-
-/* Plugin Cards - essential layout only */
+/* Plugin Cards */
 .plugin-card {
-    margin: 0 8px 16px;
-    width: calc(50% - 16px);
+    margin: 0 !important;
+    width: 100% !important;
     background-color: #fff;
     border: 1px solid #dcdcde;
     border-radius: 8px;
@@ -61,6 +48,8 @@
     box-sizing: border-box;
     transition: all 0.2s ease;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
 .plugin-card:hover {
@@ -68,23 +57,90 @@
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
-/* Ensure the right edge aligns with the navigation above */
-.plugin-card:nth-child(even) {
-    margin-right: 0;
+/* Card Content */
+.plugin-card-top {
+    padding: 24px !important;
+    position: relative;
+    flex-grow: 1;
 }
 
-.plugin-card:nth-child(odd) {
-    margin-left: 0;
+.plugin-icon {
+    position: relative !important;
+    float: left !important;
+    width: 64px !important;
+    height: 64px !important;
+    margin: 0 20px 0 0 !important;
 }
 
-/* Consistent styling for all widths */
-/* Force equal spacing between all cards */
-.plugin-card:nth-child(odd) {
-    margin-right: 8px;
+.name.column-name {
+    margin: 0 0 12px 84px !important;
 }
 
-.plugin-card:nth-child(even) {
-    margin-left: 8px;
+.name.column-name h3 {
+    font-size: 16px !important;
+    font-weight: 600 !important;
+    line-height: 1.4 !important;
+    margin: 0 0 12px !important;
+    color: #1d2327 !important;
+}
+
+.desc.column-description {
+    margin: 0 0 16px 84px !important;
+    font-size: 14px !important;
+    line-height: 1.6 !important;
+    color: #50575e !important;
+}
+
+/* Action Links */
+.action-links {
+    position: static !important;
+    margin-top: 16px !important;
+    width: auto !important;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 8px !important;
+}
+
+.plugin-action-buttons {
+    margin: 0 !important;
+    float: none !important;
+}
+
+.plugin-card-bottom {
+    background: #f6f7f7 !important;
+    padding: 15px !important;
+    border-top: 1px solid #ddd !important;
+    text-align: center !important;
+    margin-top: auto !important;
+}
+
+/* Responsive Adjustments */
+@media screen and (max-width: 960px) {
+    .wp-allstars-wrap #wpa-plugin-list {
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+        gap: 20px;
+        padding: 16px;
+    }
+    
+    .plugin-card-top {
+        padding: 20px !important;
+    }
+}
+
+@media screen and (max-width: 782px) {
+    .wp-allstars-wrap #wpa-plugin-list {
+        grid-template-columns: 1fr;
+        gap: 16px;
+        padding: 12px;
+    }
+    
+    .plugin-card-top {
+        padding: 16px !important;
+    }
+    
+    .action-links .button {
+        width: 100% !important;
+    }
 }
 
 /* Global plugin icon positioning that applies to all viewport sizes */
@@ -250,13 +306,6 @@ body.wp-admin .plugin-card-bottom {
     margin-top: 0 !important;
     text-align: left !important;
     margin-left: 0 !important;
-    margin-right: 0 !important;
-    max-width: none !important;
-    clear: both !important;
-    width: 100% !important;
-    box-sizing: border-box !important;
-    border-bottom-left-radius: 8px !important;
-    border-bottom-right-radius: 8px !important;
 }
 
 /* Remove excessive spacing between elements */
@@ -418,7 +467,6 @@ body.wp-admin .plugin-card-bottom .compatibility-untested *,
     display: block;
 }
 
-
 .plugin-card:hover {
     border-color: #999;
 }