fix modal
This commit is contained in:
parent
31251ef6cb
commit
f32191b889
@ -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 {
|
||||
|
@ -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 />
|
||||
|
@ -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">
|
||||
Save
|
||||
</x-forms.button>
|
||||
<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>
|
||||
|
@ -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">​</span>
|
||||
{{-- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</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
|
||||
|
Loading…
Reference in New Issue
Block a user