Refactor modal close behavior and improve styling
- Changed modal close event from `@click.away` to `@click.self` for better control over closing modals. - Updated various modal button styles for consistency and improved accessibility. - Adjusted transition durations for modal animations to enhance user experience. - Added aria-labels to close buttons for better screen reader support.
This commit is contained in:
@@ -59,8 +59,8 @@
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div x-show="show" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div class="bg-white dark:bg-background-secondary rounded-xl shadow-2xl p-6 w-full max-w-md relative">
|
||||
<div x-show="show" x-cloak @click.self="closeModal()" @keydown.escape.window="closeModal()" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div class="bg-background-secondary rounded-xl shadow-2xl p-6 w-full max-w-md relative">
|
||||
<button @click="closeModal()" class="absolute top-3 right-3 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
@@ -1363,8 +1363,8 @@
|
||||
</button>
|
||||
|
||||
<!-- Tags Modal -->
|
||||
<div x-show="show" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div class="bg-white dark:bg-background-secondary rounded-xl shadow-2xl p-6 w-full max-w-md relative" @click.away="closeModal()">
|
||||
<div x-show="show" x-cloak @click.self="closeModal()" @keydown.escape.window="closeModal()" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div class="bg-background-secondary rounded-xl shadow-2xl p-6 w-full max-w-md relative">
|
||||
<button @click="closeModal()" class="absolute top-3 right-3 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
@@ -1601,11 +1601,13 @@
|
||||
/* Page Transition Styles - Only slide-in for new content */
|
||||
.proxmox-page-wrapper {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
/* Do NOT set transform here — any transform (even translateX(0)) creates a
|
||||
CSS containing block, which makes 'fixed' children (modal backdrops)
|
||||
position relative to this element instead of the viewport. */
|
||||
}
|
||||
|
||||
.proxmox-page-wrapper.slide-in {
|
||||
animation: slideIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
animation: slideIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
@@ -1615,7 +1617,7 @@
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1623,7 +1625,6 @@
|
||||
.proxmox-page-wrapper.slide-in {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2089,15 +2090,14 @@
|
||||
isAdvancedView = false;
|
||||
}
|
||||
isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
|
||||
window.addEventListener('proxmox-view-mode-changed', (e) => {
|
||||
isAdvancedView = e.detail.isAdvancedView;
|
||||
});
|
||||
$watch('open', () => {
|
||||
if (open) {
|
||||
isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
|
||||
}
|
||||
});
|
||||
">
|
||||
"
|
||||
@proxmox-view-mode-changed.window="isAdvancedView = $event.detail.isAdvancedView"
|
||||
>
|
||||
<style>
|
||||
.mobile-nav-button {
|
||||
background: color-mix(in srgb, var(--color-background-secondary) 60%, transparent);
|
||||
@@ -2915,8 +2915,8 @@
|
||||
if (modal && audio) {
|
||||
modal.classList.add('active');
|
||||
audio.currentTime = 5;
|
||||
audio.play().catch(function(error) {
|
||||
console.log('Audio playback failed:', error);
|
||||
audio.play().catch(function() {
|
||||
// Audio autoplay blocked by browser - expected
|
||||
});
|
||||
|
||||
if (window.installingRefreshTimeout) {
|
||||
@@ -3039,12 +3039,12 @@
|
||||
@else
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold mb-4">Oops!</h2>
|
||||
<p class="{{ $statuses[$server->status]['color'] ?? 'text-black-100' }} font-semibold mb-4">
|
||||
<p class="{{ $statuses[$server->status]['color'] ?? 'text-base/80' }} font-semibold mb-4">
|
||||
@php
|
||||
$message = $statuses[$server->status]['message'] ?? "This server is currently inactive. Please view the Services tab in the Dashboard to see more information about the current state of this server. If more information is required, please contact support via the support portal under Tickets. This message can be displayed after a service is suspended, cancelled, revoked, or potentially in error. If you believe this message has been displayed in error, please contact us via a ticket and be sure to include the following information: VM{$server->vm_id}-ID{$server->id}-{$server->status}.";
|
||||
@endphp
|
||||
|
||||
<p class="{{ $statuses[$server->status]['color'] ?? 'text-black-100' }}">
|
||||
<p class="{{ $statuses[$server->status]['color'] ?? 'text-base/80' }}">
|
||||
{!! $message !!}
|
||||
</p>
|
||||
</p>
|
||||
@@ -3057,7 +3057,7 @@
|
||||
|
||||
<!-- Server Icon Customization Modal -->
|
||||
<div id="serverIconModal" style="display: none;" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div class="bg-white dark:bg-background-secondary rounded-xl shadow-2xl p-6 w-full max-w-md relative">
|
||||
<div class="bg-background-secondary rounded-xl shadow-2xl p-6 w-full max-w-md relative">
|
||||
<button onclick="closeServerIconModal()" class="absolute top-3 right-3 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user