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