diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index f26e14d..0891828 100644 --- a/admin/css/wp-allstars-admin.css +++ b/admin/css/wp-allstars-admin.css @@ -620,12 +620,32 @@ input:checked + .wp-toggle-slider:before { font-size: 12px; font-weight: 500; animation: fadeIn 0.3s ease-in-out; + height: 20px; + box-sizing: border-box; + position: relative; } .wp-setting-notification.error { background: #d63638; } +/* Add space for notification to prevent layout shifts */ +.wp-setting-left label, +.wp-allstars-toggle-left label, +.wp-allstars-setting-row label { + position: relative; + padding-right: 80px; +} + +.wp-setting-left label .wp-setting-notification, +.wp-allstars-toggle-left label .wp-setting-notification, +.wp-allstars-setting-row label .wp-setting-notification { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); +} + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js index 629ff80..65c494d 100644 --- a/admin/js/wp-allstars-admin.js +++ b/admin/js/wp-allstars-admin.js @@ -52,13 +52,19 @@ jQuery(document).ready(function($) { $checkbox.prop('checked', !isChecked).trigger('change'); }); + // Prevent label clicks from triggering the toggle + $('.wp-setting-label, .wp-allstars-toggle label').on('click', function(e) { + e.stopPropagation(); + return false; + }); + // Handle checkbox changes $('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) { e.stopPropagation(); var $input = $(this); var option = $input.attr('name'); var value = $input.is(':checked') ? 1 : 0; - var $label = $input.closest('.wp-setting-left').find('label'); + var $label = $input.closest('.wp-setting-left, .wp-allstars-toggle-left').find('label'); updateOption(option, value) .then(function() { @@ -101,6 +107,9 @@ jQuery(document).ready(function($) { var option = $input.attr('name'); var value = $input.val(); var $label = $input.prev('label'); + if (!$label.length) { + $label = $input.closest('.wp-allstars-setting-row').find('label'); + } updateOption(option, value) .then(function() { @@ -156,7 +165,7 @@ jQuery(document).ready(function($) { data: { action: 'wp_allstars_get_plugins', category: category || 'minimal', - _wpnonce: wpAllstars.nonce + _ajax_nonce: wpAllstars.nonce }, success: function(response) { if (response.success) { @@ -190,7 +199,7 @@ jQuery(document).ready(function($) { type: 'POST', data: { action: 'wp_allstars_get_theme', - _wpnonce: wpAllstars.nonce + _ajax_nonce: wpAllstars.nonce }, success: function(response) { if (response.success) {