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

Improve accordion functionality with RankMath-inspired interface and smoother animations

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 01:40:09 +00:00
parent 8da041341b
commit 0b7ddabd8f
1 changed files with 80 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
admin/settings.php
View File

@ -742,24 +742,45 @@ function wp_allstars_settings_page() {
<script> <script>
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
$('.wp-allstars-expand-settings').on('click', function() { // Initialize accordion functionality
var $button = $(this); function initAccordion() {
var $panel = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings'); $('.wp-allstars-expand-settings').each(function() {
var isExpanded = $button.attr('aria-expanded') === 'true'; var $button = $(this);
var $panel = $button.closest('.wp-allstars-toggle').find('.wp-allstars-toggle-settings');
// Update button state var $icon = $button.find('.dashicons');
$button.attr('aria-expanded', !isExpanded);
// Set initial state
// Toggle icon var isExpanded = $button.attr('aria-expanded') === 'true';
$button.find('.dashicons') $panel.toggle(isExpanded);
.removeClass('dashicons-arrow-down-alt2 dashicons-arrow-up-alt2') $icon.toggleClass('dashicons-arrow-up-alt2', isExpanded)
.addClass(isExpanded ? 'dashicons-arrow-down-alt2' : 'dashicons-arrow-up-alt2'); .toggleClass('dashicons-arrow-down-alt2', !isExpanded);
// Toggle panel // Handle click events
$panel.slideToggle(200); $button.on('click', function(e) {
e.preventDefault();
return false; e.stopPropagation();
});
isExpanded = !isExpanded;
$button.attr('aria-expanded', isExpanded);
// Animate icon rotation
$icon.css('transform', isExpanded ? 'rotate(180deg)' : 'rotate(0deg)');
// Animate panel
$panel.slideToggle(200, function() {
// Ensure panel is properly shown/hidden after animation
if (isExpanded) {
$panel.show();
} else {
$panel.hide();
}
});
});
});
}
// Initialize on page load
initAccordion();
}); });
</script> </script>
@ -769,17 +790,20 @@ function wp_allstars_settings_page() {
border: 1px solid #ccd0d4; border: 1px solid #ccd0d4;
border-radius: 4px; border-radius: 4px;
margin-bottom: 15px; margin-bottom: 15px;
overflow: hidden;
} }
.wp-allstars-toggle-header { .wp-allstars-toggle-header {
padding: 15px; padding: 15px;
cursor: pointer;
user-select: none;
} }
.wp-allstars-toggle-main { .wp-allstars-toggle-main {
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: flex-start; justify-content: space-between;
gap: 8px; gap: 10px;
} }
.wp-allstars-toggle label { .wp-allstars-toggle label {
@ -788,6 +812,7 @@ function wp_allstars_settings_page() {
gap: 10px; gap: 10px;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
flex: 1;
} }
.wp-allstars-expand-settings { .wp-allstars-expand-settings {
@ -796,9 +821,17 @@ function wp_allstars_settings_page() {
padding: 4px; padding: 4px;
cursor: pointer; cursor: pointer;
color: #2271b1; color: #2271b1;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 3px;
transition: background-color 0.2s ease;
} }
.wp-allstars-expand-settings:hover { .wp-allstars-expand-settings:hover {
background-color: #f0f0f1;
color: #135e96; color: #135e96;
} }
@ -810,22 +843,43 @@ function wp_allstars_settings_page() {
.wp-allstars-expand-settings .dashicons { .wp-allstars-expand-settings .dashicons {
transition: transform 0.2s ease; transition: transform 0.2s ease;
display: block; display: block;
} width: 16px;
height: 16px;
.wp-allstars-expand-settings .dashicons-arrow-up-alt2 { font-size: 16px;
transform: rotate(180deg); line-height: 16px;
} }
.wp-allstars-toggle-settings { .wp-allstars-toggle-settings {
border-top: 1px solid #ccd0d4; border-top: 1px solid #ccd0d4;
padding: 15px; padding: 15px;
display: none; background: #f9f9f9;
} }
.wp-allstars-toggle .description { .wp-allstars-toggle .description {
margin: 8px 0 0; margin: 8px 0 0;
color: #646970; color: #646970;
} }
.wp-allstars-setting-row {
margin-bottom: 15px;
}
.wp-allstars-setting-row:last-child {
margin-bottom: 0;
}
.wp-allstars-setting-row label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.wp-allstars-setting-row input[type="text"],
.wp-allstars-setting-row input[type="number"],
.wp-allstars-setting-row textarea {
width: 100%;
max-width: 400px;
}
</style> </style>
<?php elseif ($active_tab == 'theme'): ?> <?php elseif ($active_tab == 'theme'): ?>