Update layout and notification styles - Move Saved notification next to title, use full page width, remove header gap

This commit is contained in:
Marcus Quinn
2025-03-15 04:42:16 +00:00
parent bae13eb5c6
commit f8bea629f0
2 changed files with 46 additions and 26 deletions

View File

@ -8,7 +8,7 @@
background: #fff; background: #fff;
border-bottom: 1px solid #c3c4c7; border-bottom: 1px solid #c3c4c7;
box-shadow: 0 1px 0 rgba(0,0,0,.04); box-shadow: 0 1px 0 rgba(0,0,0,.04);
margin: 0 -20px 20px -20px; margin: 0 -20px 0 -20px;
padding: 20px; padding: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -133,8 +133,8 @@ input:checked + .wp-toggle-slider:before {
/* Settings Container */ /* Settings Container */
.wpa-settings-container { .wpa-settings-container {
padding: 0; padding: 0;
max-width: 1100px; max-width: none;
margin: 0 auto; margin: 0;
} }
.wpa-settings-content { .wpa-settings-content {
@ -379,8 +379,8 @@ input:checked + .wp-toggle-slider:before {
/* Theme Browser */ /* Theme Browser */
.theme-browser .theme { .theme-browser .theme {
max-width: 1600px; max-width: none;
margin: 0 auto; margin: 0;
} }
/* Responsive Adjustments */ /* Responsive Adjustments */
@ -433,13 +433,16 @@ input:checked + .wp-toggle-slider:before {
/* Settings Notification */ /* Settings Notification */
.wp-status { .wp-status {
position: absolute !important; position: relative !important;
right: 20px; display: inline-flex;
top: 50%; align-items: center;
transform: translateY(-50%); margin-left: 15px;
transform: none;
top: auto;
right: auto;
background: #00a32a; background: #00a32a;
color: white; color: white;
padding: 6px 12px; padding: 4px 12px;
border-radius: 12px; border-radius: 12px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
@ -453,15 +456,15 @@ input:checked + .wp-toggle-slider:before {
/* Plugin List Container */ /* Plugin List Container */
.wp-list-table-container { .wp-list-table-container {
margin-top: 20px; margin-top: 20px;
max-width: 1600px; max-width: none;
padding: 0; padding: 0 20px;
} }
/* Theme Container */ /* Theme Container */
#wpa-theme-list { #wpa-theme-list {
margin-top: 20px; margin-top: 20px;
max-width: 1600px; max-width: none;
padding: 0; padding: 0 20px;
} }
.wpa-loading-overlay { .wpa-loading-overlay {

View File

@ -1,14 +1,14 @@
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
// Function to show notification // Function to show notification
function showNotification(message, isError = false) { function showNotification(message, isError = false) {
// Remove any existing notifications // Remove any existing notification
$('.wp-status').remove(); $('.wp-status').remove();
// Add notification to header // Create and append the new notification
var $notification = $('<span class="wp-status' + (isError ? ' error' : '') + '">' + message + '</span>'); var $notification = $('<span class="wp-status' + (isError ? ' error' : '') + '">' + message + '</span>');
$('.wp-allstars-header').append($notification); $('.wp-allstars-header h1').after($notification);
// Fade out and remove after delay // Remove the notification after 2 seconds
setTimeout(function() { setTimeout(function() {
$notification.fadeOut(300, function() { $notification.fadeOut(300, function() {
$(this).remove(); $(this).remove();
@ -37,14 +37,26 @@ jQuery(document).ready(function($) {
var option = $input.attr('name'); var option = $input.attr('name');
var value = $input.is(':checked') ? 1 : 0; var value = $input.is(':checked') ? 1 : 0;
updateOption(option, value) $.ajax({
.then(function() { url: ajaxurl,
showNotification('Setting saved'); type: 'POST',
}) data: {
.catch(function(error) { action: 'wp_allstars_update_option',
console.error('Error:', error); option: option,
showNotification('Error saving setting', true); value: value,
}); nonce: wpAllstarsData.nonce
},
success: function(response) {
if (response.success) {
showNotification('Saved');
} else {
showNotification('Error saving settings', true);
}
},
error: function() {
showNotification('Error saving settings', true);
}
});
}); });
// Handle text, number, and textarea inputs // Handle text, number, and textarea inputs
@ -79,4 +91,9 @@ jQuery(document).ready(function($) {
$settings.slideDown(200); $settings.slideDown(200);
} }
}); });
// Handle form submission
$('form').on('submit', function() {
showNotification('Saved');
});
}); });