marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert checkboxes to ACF-style toggle switches: - Add sliding toggle switch UI - Implement smooth transitions - Add hover and focus states - Improve accessibility - Update HTML structure for toggle switches

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-14 02:35:26 +00:00
parent d379ab25e4
commit bef76a5727
2 changed files with 90 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
admin/css/wpa-superstar-admin.css
View File

@ -33,7 +33,7 @@
margin-bottom: -1px; margin-bottom: -1px;
} }
/* ACF-style checkbox toggles */ /* ACF-style toggle switches */
.wpa-superstar-toggle { .wpa-superstar-toggle {
margin: 15px 0; margin: 15px 0;
padding: 15px; padding: 15px;
@ -53,39 +53,71 @@
cursor: pointer; cursor: pointer;
} }
.wpa-superstar-toggle input[type="checkbox"] { .wpa-superstar-toggle .description {
margin: 0 8px 0 0; margin: 5px 0 0 44px;
border: 1px solid #7e8993; color: #666;
border-radius: 4px;
background: #fff;
color: #555;
clear: none;
cursor: pointer;
display: inline-block;
line-height: 0;
height: 16px;
width: 16px;
min-width: 16px;
outline: 0;
padding: 0 !important;
text-align: center;
vertical-align: middle;
-webkit-appearance: none;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
transition: .05s border-color ease-in-out;
} }
.wpa-superstar-toggle input[type="checkbox"]:checked { /* Toggle Switch Container */
background: #2271b1; .wpa-toggle-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
margin-right: 8px;
}
/* Hide default checkbox */
.wpa-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
margin: 0;
}
/* The slider */
.wpa-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccd0d4;
transition: .3s;
border-radius: 20px;
border: 2px solid #ccd0d4;
}
/* Slider knob */
.wpa-toggle-slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
/* Active/checked state */
.wpa-toggle-switch input:checked + .wpa-toggle-slider {
background-color: #2271b1;
border-color: #2271b1; border-color: #2271b1;
} }
.wpa-superstar-toggle input[type="checkbox"]:checked::before { .wpa-toggle-switch input:checked + .wpa-toggle-slider:before {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23fff" d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"/></svg>'); transform: translateX(16px);
float: left; }
display: inline-block;
vertical-align: middle; /* Focus state */
width: 16px; .wpa-toggle-switch input:focus + .wpa-toggle-slider {
height: 16px; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #2271b1;
margin: -1px 0 0 -1px; }
/* Hover state */
.wpa-toggle-switch:hover .wpa-toggle-slider {
border-color: #2271b1;
} }

45
admin/settings.php
View File

@ -56,12 +56,15 @@ function wpa_superstar_settings_page() {
<?php if ( $active_tab == 'general' ) : ?> <?php if ( $active_tab == 'general' ) : ?>
<div class="wpa-superstar-toggle"> <div class="wpa-superstar-toggle">
<label for="wpa_superstar_lazy_load"> <label for="wpa_superstar_lazy_load">
<input type="checkbox" <div class="wpa-toggle-switch">
id="wpa_superstar_lazy_load" <input type="checkbox"
name="wpa_superstar_lazy_load" id="wpa_superstar_lazy_load"
value="1" name="wpa_superstar_lazy_load"
<?php checked( get_option( 'wpa_superstar_lazy_load', 1 ) ); ?> value="1"
/> <?php checked( get_option( 'wpa_superstar_lazy_load', 1 ) ); ?>
/>
<span class="wpa-toggle-slider"></span>
</div>
<?php esc_html_e( 'Enable lazy loading for images', 'wpa-superstar' ); ?> <?php esc_html_e( 'Enable lazy loading for images', 'wpa-superstar' ); ?>
</label> </label>
<p class="description"> <p class="description">
@ -71,12 +74,15 @@ function wpa_superstar_settings_page() {
<?php elseif ( $active_tab == 'advanced' ) : ?> <?php elseif ( $active_tab == 'advanced' ) : ?>
<div class="wpa-superstar-toggle"> <div class="wpa-superstar-toggle">
<label for="wpa_superstar_minify_css"> <label for="wpa_superstar_minify_css">
<input type="checkbox" <div class="wpa-toggle-switch">
id="wpa_superstar_minify_css" <input type="checkbox"
name="wpa_superstar_minify_css" id="wpa_superstar_minify_css"
value="1" name="wpa_superstar_minify_css"
<?php checked( get_option( 'wpa_superstar_minify_css', 0 ) ); ?> value="1"
/> <?php checked( get_option( 'wpa_superstar_minify_css', 0 ) ); ?>
/>
<span class="wpa-toggle-slider"></span>
</div>
<?php esc_html_e( 'Enable CSS minification', 'wpa-superstar' ); ?> <?php esc_html_e( 'Enable CSS minification', 'wpa-superstar' ); ?>
</label> </label>
<p class="description"> <p class="description">
@ -86,12 +92,15 @@ function wpa_superstar_settings_page() {
<div class="wpa-superstar-toggle"> <div class="wpa-superstar-toggle">
<label for="wpa_superstar_minify_js"> <label for="wpa_superstar_minify_js">
<input type="checkbox" <div class="wpa-toggle-switch">
id="wpa_superstar_minify_js" <input type="checkbox"
name="wpa_superstar_minify_js" id="wpa_superstar_minify_js"
value="1" name="wpa_superstar_minify_js"
<?php checked( get_option( 'wpa_superstar_minify_js', 0 ) ); ?> value="1"
/> <?php checked( get_option( 'wpa_superstar_minify_js', 0 ) ); ?>
/>
<span class="wpa-toggle-slider"></span>
</div>
<?php esc_html_e( 'Enable JS minification', 'wpa-superstar' ); ?> <?php esc_html_e( 'Enable JS minification', 'wpa-superstar' ); ?>
</label> </label>
<p class="description"> <p class="description">