fix modal

This commit is contained in:
Andras Bacsai 2023-12-06 16:59:52 +01:00
parent 31251ef6cb
commit f32191b889
4 changed files with 17 additions and 12 deletions

View File

@ -18,7 +18,7 @@ .main {
@apply pt-4 pl-24 pr-10 mx-auto;
}
.custom-modal {
@apply px-8 py-4 border bg-base-100 border-coolgray-200;
@apply flex flex-col gap-2 px-8 py-4 border bg-base-100 border-coolgray-200;
}
.label-text,
label {

View File

@ -2,7 +2,7 @@
@section('body')
@parent
<x-navbar />
<div class="fixed z-50 top-[4.5rem] left-4" id="vue">
<div class="fixed z-30 top-[4.5rem] left-4" id="vue">
<magic-bar></magic-bar>
</div>
<livewire:sponsorship />

View File

@ -1,4 +1,4 @@
<form x-data="{ raw: true }" class="flex flex-col gap-2 custom-modal" wire:submit.prevent='submit'>
<form x-data="{ raw: true }" class=" custom-modal" wire:submit.prevent='submit'>
<div class="flex items-end gap-2">
<h1>Docker Compose</h1>
<div x-cloak x-show="raw">
@ -21,7 +21,12 @@
<x-forms.textarea rows="20" readonly id="service.docker_compose">
</x-forms.textarea>
</div>
<x-forms.button type="submit">
<div class="flex justify-end w-full gap-2">
<x-forms.button class="w-64" type="submit">
Save
</x-forms.button>
<x-forms.button wire:click='closeModal'>
Close
</x-forms.button>
</div>
</form>

View File

@ -12,10 +12,10 @@
x-on:close.stop="setShowPropertyTo(false)"
x-on:keydown.escape.window="closeModalOnEscape()"
x-show="show"
class="fixed inset-0 z-10 overflow-y-auto"
class="fixed inset-0 z-40 overflow-y-auto"
style="display: none;"
>
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">
<div class="flex items-end justify-center px-4 pt-4 pb-10 text-center sm:block sm:p-0">
<div
x-show="show"
x-on:click="closeModalOnClickAway()"
@ -30,23 +30,23 @@ class="fixed inset-0 transition-all transform"
<div class="absolute inset-0 bg-black opacity-70"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
{{-- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> --}}
<div
x-show="show && showActiveComponent"
x-transition:enter="ease-out duration-300"
x-transition:enter="ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="fixed top-0 w-full overflow-hidden text-left align-bottom transition-all transform rounded-lg sm:my-8 sm:align-middle sm:w-full"
class="w-full overflow-hidden text-left align-bottom transition-all transform sm:my-8 sm:align-middle sm:w-full"
id="modal-container"
x-trap.noscroll.inert="show && showActiveComponent"
aria-modal="true"
>
@forelse($components as $id => $component)
<div class="flex items-center justify-center" x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
<div class="sm:mx-20" x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
@livewire($component['name'], $component['attributes'], key($id))
</div>
@empty