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

Fix plugin grid layout spacing and structure

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 05:31:25 +00:00
parent eb26745c76
commit 596dd6bb99
2 changed files with 22 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,34 +23,40 @@
/* Standard WordPress Plugin Grid Layout */ /* Standard WordPress Plugin Grid Layout */
.wp-list-table.plugin-install { .wp-list-table.plugin-install {
margin-top: 10px; margin-top: 10px;
clear: both;
} }
#the-list { #the-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -8px; /* Negative margin to offset padding */
} }
/* Plugin Cards */ /* Plugin Cards */
.plugin-card { .plugin-card {
width: 48.5%; width: 50%;
margin: 0 3% 3% 0; padding: 0 8px 16px;
background-color: #fff;
border: 1px solid #dcdcde;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent;
border: none;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 3px;
} }
.plugin-card:nth-child(even) { .plugin-card .plugin-card-inner {
margin-right: 0; background-color: #fff;
border: 1px solid #dcdcde;
border-radius: 3px;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
} }
@media screen and (max-width: 782px) { @media screen and (max-width: 782px) {
.plugin-card { .plugin-card {
width: 100%; width: 100%;
margin-right: 0;
} }
} }
@ -62,6 +68,7 @@
position: relative; position: relative;
padding: 20px 20px 10px; padding: 20px 20px 10px;
min-height: 135px; min-height: 135px;
flex-grow: 1;
} }
.plugin-icon { .plugin-icon {
@ -114,10 +121,10 @@
clear: both; clear: both;
padding: 12px 20px; padding: 12px 20px;
background-color: #f6f7f7; background-color: #f6f7f7;
overflow: hidden;
border-top: 1px solid #dcdcde; border-top: 1px solid #dcdcde;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: 0 0 3px 3px;
} }
.plugin-card-bottom > div { .plugin-card-bottom > div {

40
admin/settings.php
View File

@ -315,6 +315,7 @@ function wp_allstars_generate_plugin_cards($plugins) {
<div id="the-list"> <div id="the-list">
<?php foreach ($plugins as $plugin): ?> <?php foreach ($plugins as $plugin): ?>
<div class="plugin-card plugin-card-<?php echo esc_attr($plugin->slug); ?>"> <div class="plugin-card plugin-card-<?php echo esc_attr($plugin->slug); ?>">
<div class="plugin-card-inner">
<div class="plugin-card-top"> <div class="plugin-card-top">
<div class="name column-name"> <div class="name column-name">
<h3> <h3>
@ -394,6 +395,7 @@ function wp_allstars_generate_plugin_cards($plugins) {
</div> </div>
</div> </div>
</div> </div>
</div>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
</div> </div>
@ -671,42 +673,12 @@ function wp_allstars_settings_page() {
wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__)); wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
wp_enqueue_style('wp-allstars-plugins', plugins_url('css/wp-allstars-plugins.css', __FILE__)); wp_enqueue_style('wp-allstars-plugins', plugins_url('css/wp-allstars-plugins.css', __FILE__));
// Add inline script to load theme on page load // Add inline script to trigger theme loading through the main JS function
wp_add_inline_script('wp-allstars-admin', ' wp_add_inline_script('wp-allstars-admin', '
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
if ($("#wpa-theme-list").length && $("#wpa-theme-list").is(":empty")) { // Use the main loadTheme function from wp-allstars-admin.js if available
var $container = $("#wpa-theme-list"); if ($("#wpa-theme-list").length && $("#wpa-theme-list").is(":empty") && typeof loadTheme === "function") {
var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><span class=\"spinner is-active\"></span></div>"); loadTheme();
// Show loading overlay
$container.css("position", "relative").append($loadingOverlay);
// AJAX request to get theme
$.ajax({
url: ajaxurl,
type: "POST",
data: {
action: "wp_allstars_get_themes",
_wpnonce: wpAllstars.nonce
},
success: function(response) {
$loadingOverlay.remove();
if (response.success) {
$container.html(response.data);
// Initialize theme action buttons
if (typeof initThemeHandlers === "function") {
initThemeHandlers();
}
} else {
$container.html("<div class=\"notice notice-error\"><p>" + response.data + "</p></div>");
}
},
error: function(xhr, status, error) {
$loadingOverlay.remove();
$container.html("<div class=\"notice notice-error\"><p>Failed to load theme. Please try again. Error: " + error + "</p></div>");
console.error("AJAX Error:", xhr.responseText);
}
});
} }
}); });
'); ');