diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index ad8f6d7..816b975 100644 --- a/admin/css/wp-allstars-admin.css +++ b/admin/css/wp-allstars-admin.css @@ -45,6 +45,7 @@ padding-top: 9px; padding-bottom: 0; line-height: inherit; + margin-bottom: 20px; } .nav-tab { @@ -52,20 +53,22 @@ border: 1px solid #c3c4c7; border-bottom: none; margin-left: 0.5em; - padding: 5px 10px; + padding: 8px 12px; font-size: 14px; line-height: 1.71428571; font-weight: 600; - background: #dcdcde; + background: #f0f0f1; color: #50575e; text-decoration: none; white-space: nowrap; + transition: all 0.2s ease; } .nav-tab:hover, .nav-tab:focus { background-color: #fff; color: #1d2327; + border-color: #8c8f94; } .nav-tab-active, @@ -74,8 +77,9 @@ .nav-tab-active:hover { border-bottom: 1px solid #f0f0f1; background: #f0f0f1; - color: #000; + color: #2271b1; margin-bottom: -1px; + box-shadow: none; } /* Toggle Switches */ @@ -202,7 +206,8 @@ input:checked + .wp-toggle-slider:before { .wp-allstars-setting-row label { display: block; margin-bottom: 8px; - font-weight: 500; + font-weight: 600; + color: #1d2327; } .wp-allstars-setting-row input[type="text"], @@ -243,8 +248,8 @@ input:checked + .wp-toggle-slider:before { .wp-allstars-expand-settings:hover { background: #fff; - border-color: #8c8f94; - color: #1d2327; + border-color: #2271b1; + color: #2271b1; } .wp-allstars-expand-settings .dashicons { @@ -294,10 +299,12 @@ input:checked + .wp-toggle-slider:before { .plugin-card { border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0,0,0,0.02); + transition: all 0.2s ease; } .plugin-card:hover { border-color: #2271b1; + box-shadow: 0 2px 8px rgba(0,0,0,0.08); } /* Responsive Adjustments */ diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js index eefa38e..3d62d35 100644 --- a/admin/js/wp-allstars-admin.js +++ b/admin/js/wp-allstars-admin.js @@ -1,5 +1,6 @@ jQuery(document).ready(function($) { - $('.wp-allstars-toggle input').on('change', function() { + // Toggle switch functionality + $('.wp-allstars-toggle input[type="checkbox"]').on('change', function() { var $input = $(this); var option = $input.attr('name'); var value = $input.is(':checked') ? 1 : 0; @@ -30,4 +31,38 @@ jQuery(document).ready(function($) { }, 2000); }); }); + + // Expand/collapse settings functionality + $('.wp-allstars-expand-settings').on('click', function(e) { + e.preventDefault(); + var $button = $(this); + var $settings = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); + var isExpanded = $button.attr('aria-expanded') === 'true'; + + $button.attr('aria-expanded', !isExpanded); + $button.find('.dashicons').toggleClass('dashicons-arrow-down-alt2 dashicons-arrow-up-alt2'); + + if (isExpanded) { + $settings.slideUp(200); + } else { + $settings.slideDown(200); + } + }); + + // Save settings on form submit + $('form').on('submit', function() { + // Remove any existing status messages + $('.wp-status').remove(); + + // Add a small notification that fades out + var $notification = $('Settings saved'); + $('body').append($notification); + + // Fade out and remove the notification after 2 seconds + setTimeout(function() { + $notification.fadeOut(300, function() { + $(this).remove(); + }); + }, 2000); + }); }); \ No newline at end of file diff --git a/admin/settings.php b/admin/settings.php index a2fbfdd..2f7db04 100644 --- a/admin/settings.php +++ b/admin/settings.php @@ -510,7 +510,7 @@ function wp_allstars_settings_page() {