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

View File

@ -34,11 +34,39 @@ jQuery(document).ready(function($) {
// Handle toggle switch clicks // Handle toggle switch clicks
$('.wp-toggle-switch').on('click', function(e) { $('.wp-toggle-switch').on('click', function(e) {
e.stopPropagation(); e.stopPropagation();
var $checkbox = $(this).find('input[type="checkbox"]');
var isChecked = $checkbox.is(':checked');
$checkbox.prop('checked', !isChecked).trigger('change');
}); });
// Handle checkbox changes // Handle checkbox changes
$('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) { $('.wp-toggle-switch input[type="checkbox"]').on('change', function(e) {
e.stopPropagation(); 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 // Handle panel toggle