Add Recommended Plugins browser: - Create plugin browser interface - Add category filters - Implement plugin cards with install buttons - Match WordPress plugin installer style

2025-03-14 03:24:45 +00:00
parent 0d55aa82ff
commit 02515fb89c
2 changed files with 286 additions and 4 deletions
--- a/admin/css/wpa-superstar-admin.css
+++ b/admin/css/wpa-superstar-admin.css
@ -178,4 +178,116 @@
 .wpa-settings-content {
    margin-top: 30px;
    padding: 0 10px;
+}
+
+/* Plugin Browser Styles */
+.wpa-plugin-filters {
+    margin: 0 0 20px;
+    padding: 0 0 12px;
+    border-bottom: 1px solid #ddd;
+}
+
+.wpa-plugin-filters .button {
+    margin: 0 8px 8px 0;
+    padding: 4px 10px;
+    font-size: 13px;
+    line-height: 1.5;
+    min-height: 30px;
+}
+
+.wpa-plugins-browser {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.plugin-card {
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.02);
+    margin: 0;
+    width: 100%;
+    padding: 0;
+    transition: all .15s ease-in-out;
+}
+
+.plugin-card:hover {
+    border-color: #4caf50;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+
+.plugin-card-top {
+    padding: 20px;
+    min-height: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.plugin-card .name {
+    margin-bottom: 12px;
+}
+
+.plugin-card .name h3 {
+    font-size: 16px;
+    line-height: 1.3;
+    margin: 0;
+    color: #1d2327;
+}
+
+.plugin-card .plugin-author {
+    font-size: 13px;
+    color: #646970;
+    font-weight: 400;
+    margin-left: 8px;
+}
+
+.plugin-card .desc {
+    margin: 8px 0;
+    color: #50575e;
+}
+
+.plugin-card .desc p {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.plugin-card .action-links {
+    margin-top: 16px;
+}
+
+.plugin-action-buttons {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.plugin-action-buttons li {
+    display: inline-block;
+    margin: 0;
+}
+
+.plugin-action-buttons .button {
+    min-height: 30px;
+    line-height: 28px;
+    padding: 0 12px;
+    font-size: 13px;
+}
+
+.plugin-action-buttons .button-disabled {
+    color: #a7aaad !important;
+    border-color: #ddd !important;
+    background: #f6f7f7 !important;
+    box-shadow: none !important;
+    cursor: default;
+    transform: none !important;
+}
+
+/* Adjust settings content padding for plugin browser */
+.wpa-settings-content {
+    margin-top: 20px;
+    padding: 0;
 }