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:
@@ -28,7 +28,7 @@
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@click.self="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
@@ -97,7 +97,7 @@
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@click.self="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
@@ -226,7 +226,7 @@
|
||||
</h3>
|
||||
<div class="space-y-4 text-sm text-base/70">
|
||||
@foreach($this->displayOptions as $value => $meta)
|
||||
<div class="border border-neutral/40 rounded-md p-3 {{ $value === $selectedDisplay ? 'bg-background' : '' }}">
|
||||
<div wire:key="display-{{ $value }}" class="border border-neutral/40 rounded-md p-3 {{ $value === $selectedDisplay ? 'bg-background' : '' }}">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-semibold text-base">{{ $meta['label'] }}</span>
|
||||
@if($value === $selectedDisplay)
|
||||
|
||||
Reference in New Issue
Block a user