Fix toggle switch size and clickability
This commit is contained in:
@ -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;
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user