Fix styling and functionality for tabs and settings
- Update tab styling to match RankMath\n- Fix settings dropdown functionality\n- Improve toggle switch appearance\n- Add proper transitions and hover states\n- Fix class name consistency\n- Update form element styling
This commit is contained in:
Marcus Quinn
@ -45,6 +45,7 @@
|
||||
padding-top: 9px;
|
||||
padding-bottom: 0;
|
||||
line-height: inherit;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
@ -52,20 +53,22 @@
|
||||
border: 1px solid #c3c4c7;
|
||||
border-bottom: none;
|
||||
margin-left: 0.5em;
|
||||
padding: 5px 10px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.71428571;
|
||||
font-weight: 600;
|
||||
background: #dcdcde;
|
||||
background: #f0f0f1;
|
||||
color: #50575e;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-tab:hover,
|
||||
.nav-tab:focus {
|
||||
background-color: #fff;
|
||||
color: #1d2327;
|
||||
border-color: #8c8f94;
|
||||
}
|
||||
|
||||
.nav-tab-active,
|
||||
@ -74,8 +77,9 @@
|
||||
.nav-tab-active:hover {
|
||||
border-bottom: 1px solid #f0f0f1;
|
||||
background: #f0f0f1;
|
||||
color: #000;
|
||||
color: #2271b1;
|
||||
margin-bottom: -1px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Toggle Switches */
|
||||
@ -202,7 +206,8 @@ input:checked + .wp-toggle-slider:before {
|
||||
.wp-allstars-setting-row label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wp-allstars-setting-row input[type="text"],
|
||||
@ -243,8 +248,8 @@ input:checked + .wp-toggle-slider:before {
|
||||
|
||||
.wp-allstars-expand-settings:hover {
|
||||
background: #fff;
|
||||
border-color: #8c8f94;
|
||||
color: #1d2327;
|
||||
border-color: #2271b1;
|
||||
color: #2271b1;
|
||||
}
|
||||
|
||||
.wp-allstars-expand-settings .dashicons {
|
||||
@ -294,10 +299,12 @@ input:checked + .wp-toggle-slider:before {
|
||||
.plugin-card {
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.02);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.plugin-card:hover {
|
||||
border-color: #2271b1;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
jQuery(document).ready(function($) {
|
||||
$('.wp-allstars-toggle input').on('change', function() {
|
||||
// Toggle switch functionality
|
||||
$('.wp-allstars-toggle input[type="checkbox"]').on('change', function() {
|
||||
var $input = $(this);
|
||||
var option = $input.attr('name');
|
||||
var value = $input.is(':checked') ? 1 : 0;
|
||||
@ -30,4 +31,38 @@ jQuery(document).ready(function($) {
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
// Expand/collapse settings functionality
|
||||
$('.wp-allstars-expand-settings').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
var $button = $(this);
|
||||
var $settings = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
|
||||
var isExpanded = $button.attr('aria-expanded') === 'true';
|
||||
|
||||
$button.attr('aria-expanded', !isExpanded);
|
||||
$button.find('.dashicons').toggleClass('dashicons-arrow-down-alt2 dashicons-arrow-up-alt2');
|
||||
|
||||
if (isExpanded) {
|
||||
$settings.slideUp(200);
|
||||
} else {
|
||||
$settings.slideDown(200);
|
||||
}
|
||||
});
|
||||
|
||||
// Save settings on form submit
|
||||
$('form').on('submit', function() {
|
||||
// Remove any existing status messages
|
||||
$('.wp-status').remove();
|
||||
|
||||
// Add a small notification that fades out
|
||||
var $notification = $('<span class="wp-status" style="position: fixed; top: 32px; left: 50%; transform: translateX(-50%); z-index: 99999; background: #00a32a; color: white; padding: 8px 16px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">Settings saved</span>');
|
||||
$('body').append($notification);
|
||||
|
||||
// Fade out and remove the notification after 2 seconds
|
||||
setTimeout(function() {
|
||||
$notification.fadeOut(300, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
@ -510,7 +510,7 @@ function wp_allstars_settings_page() {
|
||||
<form action="options.php" method="post">
|
||||
<?php settings_fields('wp_allstars_workflow'); ?>
|
||||
<div class="wp-allstars-toggle">
|
||||
<div class="wp-toggle-header">
|
||||
<div class="wp-allstars-toggle-header">
|
||||
<label for="wp_allstars_auto_upload_images">
|
||||
<div class="wp-toggle-switch">
|
||||
<input type="checkbox"
|
||||
@ -520,8 +520,8 @@ function wp_allstars_settings_page() {
|
||||
<?php
|
||||
$options = get_option('wp_allstars_workflow_options', array(
|
||||
'auto_upload_images' => false,
|
||||
'max_width' => 2560,
|
||||
'max_height' => 2560,
|
||||
'max_width' => 1920,
|
||||
'max_height' => 1080,
|
||||
'exclude_urls' => '',
|
||||
'exclude_post_types' => array(),
|
||||
'image_name_pattern' => '%filename%',
|
||||
@ -534,15 +534,15 @@ function wp_allstars_settings_page() {
|
||||
</div>
|
||||
<?php esc_html_e('Enable Auto Upload Images', 'wp-allstars'); ?>
|
||||
</label>
|
||||
<button type="button" class="wp-expand-settings" aria-expanded="false">
|
||||
<button type="button" class="wp-allstars-expand-settings" aria-expanded="false">
|
||||
<span class="dashicons dashicons-arrow-down-alt2"></span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="description">
|
||||
<?php esc_html_e('Import images that have external URLs into your Media Library when saving. Consider disabling during large data imports with many external image URLs.', 'wp-allstars'); ?>
|
||||
</p>
|
||||
<div class="wp-toggle-settings" style="display: none;">
|
||||
<div class="wp-setting-row">
|
||||
<div class="wp-allstars-toggle-settings">
|
||||
<div class="wp-allstars-setting-row">
|
||||
<label for="wp_max_width"><?php esc_html_e('Max Width', 'wp-allstars'); ?></label>
|
||||
<input type="number"
|
||||
id="wp_max_width"
|
||||
@ -553,7 +553,7 @@ function wp_allstars_settings_page() {
|
||||
<p class="description"><?php esc_html_e('Maximum width of uploaded images (px). Leave empty for no limit.', 'wp-allstars'); ?></p>
|
||||
</div>
|
||||
|
||||
<div class="wp-setting-row">
|
||||
<div class="wp-allstars-setting-row">
|
||||
<label for="wp_max_height"><?php esc_html_e('Max Height', 'wp-allstars'); ?></label>
|
||||
<input type="number"
|
||||
id="wp_max_height"
|
||||
@ -564,7 +564,7 @@ function wp_allstars_settings_page() {
|
||||
<p class="description"><?php esc_html_e('Maximum height of uploaded images (px). Leave empty for no limit.', 'wp-allstars'); ?></p>
|
||||
</div>
|
||||
|
||||
<div class="wp-setting-row">
|
||||
<div class="wp-allstars-setting-row">
|
||||
<label for="wp_exclude_urls"><?php esc_html_e('Exclude URLs', 'wp-allstars'); ?></label>
|
||||
<textarea id="wp_exclude_urls"
|
||||
name="wp_allstars_workflow_options[exclude_urls]"
|
||||
@ -574,7 +574,7 @@ function wp_allstars_settings_page() {
|
||||
<p class="description"><?php esc_html_e('Enter domains to exclude (one per line). Images from these domains will not be imported.', 'wp-allstars'); ?></p>
|
||||
</div>
|
||||
|
||||
<div class="wp-setting-row">
|
||||
<div class="wp-allstars-setting-row">
|
||||
<label for="wp_image_name"><?php esc_html_e('Image Name Pattern', 'wp-allstars'); ?></label>
|
||||
<input type="text"
|
||||
id="wp_image_name"
|
||||
@ -586,7 +586,7 @@ function wp_allstars_settings_page() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="wp-setting-row">
|
||||
<div class="wp-allstars-setting-row">
|
||||
<label for="wp_image_alt"><?php esc_html_e('Image Alt Pattern', 'wp-allstars'); ?></label>
|
||||
<input type="text"
|
||||
id="wp_image_alt"
|
||||
@ -604,10 +604,10 @@ function wp_allstars_settings_page() {
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
$('.wp-expand-settings').on('click', function(e) {
|
||||
$('.wp-allstars-expand-settings').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
var $button = $(this);
|
||||
var $settings = $button.closest('.wp-allstars-toggle').find('.wp-toggle-settings');
|
||||
var $settings = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
|
||||
var isExpanded = $button.attr('aria-expanded') === 'true';
|
||||
|
||||
$button.attr('aria-expanded', !isExpanded);
|
||||
|
||||
Reference in New Issue
Block a user