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

Fix styling and functionality for tabs and settings

Browse Source 
- Update tab styling to match RankMath\n- Fix settings dropdown functionality\n- Improve toggle switch appearance\n- Add proper transitions and hover states\n- Fix class name consistency\n- Update form element styling
This commit is contained in:
Marcus Quinn
2025-03-15 04:13:34 +00:00
parent 8f34b1b81b
commit d65aa23308
3 changed files with 61 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
admin/js/wp-allstars-admin.js
View File

@ -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 = $('<span class="wp-status" style="position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 99999; background: #00a32a; color: white; padding: 8px 16px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">Settings saved</span>');
$('body').append($notification);
// Fade out and remove the notification after 2 seconds
setTimeout(function() {
$notification.fadeOut(300, function() {
$(this).remove();
});
}, 2000);
});
});