Fix toggle switch size and clickability

This commit is contained in:
Marcus Quinn
2025-03-16 03:11:06 +00:00
parent c4d75ed2cd
commit 71564d0444
2 changed files with 37 additions and 5 deletions

View File

@ -87,15 +87,19 @@
.wp-toggle-switch {
position: relative;
display: inline-block;
width: 40px;
height: 24px;
width: 36px;
height: 20px;
flex-shrink: 0;
cursor: pointer;
}
.wp-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
margin: 0;
padding: 0;
position: absolute;
}
.wp-toggle-slider {
@ -107,14 +111,14 @@
bottom: 0;
background-color: #ccc;
transition: .3s;
border-radius: 24px;
border-radius: 20px;
}
.wp-toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;

View File

@ -34,11 +34,39 @@ jQuery(document).ready(function($) {
// Handle toggle switch clicks
$('.wp-toggle-switch').on('click', function(e) {
e.stopPropagation();
var $checkbox = $(this).find('input[type="checkbox"]');
var isChecked = $checkbox.is(':checked');
$checkbox.prop('checked', !isChecked).trigger('change');
});
// 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;
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'wp_allstars_update_option',
option: option,
value: value,
_wpnonce: wpAllstars.nonce
},
success: function(response) {
if (response.success) {
showNotification('Saved');
} else {
showNotification('Error saving settings', true);
}
},
error: function() {
showNotification('Error saving settings', true);
}
});
});
// Handle panel toggle