From d379ab25e45a73127959568c4b654e8fd830db18 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Fri, 14 Mar 2025 02:28:11 +0000
Subject: [PATCH] Update admin UI to match ACF plugin style: - Improve checkbox
styling and layout - Add descriptive text for options - Enhance accessibility
with proper labels and IDs - Implement WordPress admin color scheme
---
admin/css/wpa-superstar-admin.css | 83 +++++++++++++++++++++++++++----
admin/settings.php | 59 +++++++++++++++++-----
2 files changed, 118 insertions(+), 24 deletions(-)
diff --git a/admin/css/wpa-superstar-admin.css b/admin/css/wpa-superstar-admin.css
index 0bd76e9..f69a978 100644
--- a/admin/css/wpa-superstar-admin.css
+++ b/admin/css/wpa-superstar-admin.css
@@ -1,30 +1,91 @@
.wpa-superstar-wrap {
max-width: 800px;
- background: #fff;
- padding: 20px;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ margin: 20px 0;
}
+
.wpa-superstar-wrap h1 {
- font-size: 24px;
- margin-bottom: 20px;
-}
-.wpa-superstar-toggle {
- margin: 10px 0;
+ font-size: 23px;
+ font-weight: 400;
+ margin: 0;
+ padding: 9px 0 4px 0;
+ line-height: 1.3;
}
+
.nav-tab-wrapper {
margin-bottom: 20px;
+ border-bottom: 1px solid #ccd0d4;
}
+
.nav-tab {
- background: #f1f1f1;
+ background: #f8f9fa;
+ border: 1px solid #ccd0d4;
+ border-bottom: none;
padding: 8px 16px;
- border-radius: 4px 4px 0 0;
+ font-size: 14px;
+ line-height: 1.71428571;
+ font-weight: 600;
+ margin-right: 5px;
}
+
.nav-tab-active {
background: #fff;
border-bottom: 1px solid #fff;
+ margin-bottom: -1px;
}
+
+/* ACF-style checkbox toggles */
+.wpa-superstar-toggle {
+ margin: 15px 0;
+ padding: 15px;
+ background: #fff;
+ border: 1px solid #ccd0d4;
+ border-radius: 3px;
+ box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+}
+
.wpa-superstar-toggle label {
display: flex;
align-items: center;
+ font-size: 14px;
+ line-height: 1.4;
+ font-weight: 600;
+ color: #23282d;
+ cursor: pointer;
+}
+
+.wpa-superstar-toggle input[type="checkbox"] {
+ margin: 0 8px 0 0;
+ border: 1px solid #7e8993;
+ 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 {
+ background: #2271b1;
+ border-color: #2271b1;
+}
+
+.wpa-superstar-toggle input[type="checkbox"]:checked::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>');
+ float: left;
+ display: inline-block;
+ vertical-align: middle;
+ width: 16px;
+ height: 16px;
+ margin: -1px 0 0 -1px;
}
\ No newline at end of file
diff --git a/admin/settings.php b/admin/settings.php
index 9794424..5d4a942 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -37,37 +37,70 @@ add_action( 'wp_ajax_wpa_superstar_update_option', 'wpa_superstar_update_option'
function wpa_superstar_settings_page() {
$active_tab = isset( $_GET['tab'] ) ? $_GET['tab'] : 'general';
?>
- <div class="wpa-superstar-wrap">
+ <div class="wrap wpa-superstar-wrap">
<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
+
<h2 class="nav-tab-wrapper">
- <a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">General</a>
- <a href="?page=wpa-superstar&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>">Advanced</a>
+ <a href="?page=wpa-superstar&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">
+ <?php esc_html_e( 'General', 'wpa-superstar' ); ?>
+ </a>
+ <a href="?page=wpa-superstar&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>">
+ <?php esc_html_e( 'Advanced', 'wpa-superstar' ); ?>
+ </a>
</h2>
+
<form method="post" action="options.php">
<?php settings_fields( 'wpa-superstar-settings' ); ?>
<?php do_settings_sections( 'wpa-superstar-settings' ); ?>
+
<?php if ( $active_tab == 'general' ) : ?>
<div class="wpa-superstar-toggle">
- <label>
- <input type="checkbox" name="wpa_superstar_lazy_load" value="1" <?php checked( get_option( 'wpa_superstar_lazy_load', 1 ) ); ?> />
- Enable lazy loading for images
+ <label for="wpa_superstar_lazy_load">
+ <input type="checkbox"
+ id="wpa_superstar_lazy_load"
+ name="wpa_superstar_lazy_load"
+ value="1"
+ <?php checked( get_option( 'wpa_superstar_lazy_load', 1 ) ); ?>
+ />
+ <?php esc_html_e( 'Enable lazy loading for images', 'wpa-superstar' ); ?>
</label>
+ <p class="description">
+ <?php esc_html_e( 'Improves page load time by loading images only when they enter the viewport.', 'wpa-superstar' ); ?>
+ </p>
</div>
<?php elseif ( $active_tab == 'advanced' ) : ?>
<div class="wpa-superstar-toggle">
- <label>
- <input type="checkbox" name="wpa_superstar_minify_css" value="1" <?php checked( get_option( 'wpa_superstar_minify_css', 0 ) ); ?> />
- Enable CSS minification
+ <label for="wpa_superstar_minify_css">
+ <input type="checkbox"
+ id="wpa_superstar_minify_css"
+ name="wpa_superstar_minify_css"
+ value="1"
+ <?php checked( get_option( 'wpa_superstar_minify_css', 0 ) ); ?>
+ />
+ <?php esc_html_e( 'Enable CSS minification', 'wpa-superstar' ); ?>
</label>
+ <p class="description">
+ <?php esc_html_e( 'Minifies CSS files to reduce file size and improve load times.', 'wpa-superstar' ); ?>
+ </p>
</div>
+
<div class="wpa-superstar-toggle">
- <label>
- <input type="checkbox" name="wpa_superstar_minify_js" value="1" <?php checked( get_option( 'wpa_superstar_minify_js', 0 ) ); ?> />
- Enable JS minification
+ <label for="wpa_superstar_minify_js">
+ <input type="checkbox"
+ id="wpa_superstar_minify_js"
+ name="wpa_superstar_minify_js"
+ value="1"
+ <?php checked( get_option( 'wpa_superstar_minify_js', 0 ) ); ?>
+ />
+ <?php esc_html_e( 'Enable JS minification', 'wpa-superstar' ); ?>
</label>
+ <p class="description">
+ <?php esc_html_e( 'Minifies JavaScript files to reduce file size and improve load times.', 'wpa-superstar' ); ?>
+ </p>
</div>
<?php endif; ?>
- <?php submit_button(); ?>
+
+ <?php submit_button( __( 'Save Changes', 'wpa-superstar' ) ); ?>
</form>
</div>
<?php