fix modal link edit form notification z-index

pinkary-project · May 11, 2024 · 1a19ad6 · 1a19ad6
1 parent fd1aee2
commit 1a19ad6
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 19 deletions.
diff --git a/resources/views/livewire/flash-messages/show.blade.php b/resources/views/livewire/flash-messages/show.blade.php
@@ -10,7 +10,7 @@
 >
     <div
         id="flashMessageWrapper"
-        class="fixed right-4 top-4 z-50 w-64 space-y-2"
+        class="fixed right-4 top-4 z-[55] w-64 space-y-2"
     ></div>
 
     @if (session('flash-message'))

diff --git a/resources/views/livewire/links/edit.blade.php b/resources/views/livewire/links/edit.blade.php
@@ -23,7 +23,7 @@
                 {{ __('Save') }}
             </x-primary-colorless-button>
             <button
-                x-on:click="showLinksEditForm = false"
+                x-on:click.prevent="$dispatch('close-modal', 'link-edit-modal')"
                 type="button"
                 class="text-slate-600 hover:text-slate-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
             >

diff --git a/resources/views/livewire/links/index.blade.php b/resources/views/livewire/links/index.blade.php
@@ -126,10 +126,7 @@ class="cursor-help"
         </div>
     </div>
 
-    <div
-        class="py-5"
-        x-data="{ showLinksEditForm: false }"
-    >
+    <div class="py-5">
         @if ($links->isEmpty())
             @if (auth()->user()?->is($user))
                 <p class="mx-2 text-center text-slate-500">No links yet. Add your first link!</p>
@@ -174,7 +171,7 @@ class="hidden min-w-fit cursor-help items-center gap-1 text-xs group-hover:flex"
 
                                 <button
                                     wire:click="$dispatchTo('links.edit', 'link.edit', { link: {{ $link->id }} })"
-                                    x-on:click="showLinksEditForm = true"
+                                    x-on:click.prevent="$dispatch('open-modal', 'link-edit-modal')"
                                     type="button"
                                     class="flex w-10 justify-center text-slate-300 opacity-50 hover:opacity-100 focus:outline-none"
                                 >
@@ -201,19 +198,14 @@ class="size-5 opacity-100 group-hover:opacity-100 sm:opacity-0"
                     @endforeach
                 </ul>
 
-                <div
-                    x-show="showLinksEditForm"
-                    x-transition:enter="transition duration-300 ease-out"
-                    x-transition:enter-start="opacity-0"
-                    x-transition:enter-end="opacity-100"
-                    x-transition:leave="transition duration-300 ease-in"
-                    x-transition:leave-start="opacity-100"
-                    x-transition:leave-end="opacity-0"
-                    class="mt-4"
-                    x-cloak
+                <x-modal
+                    name="link-edit-modal"
+                    maxWidth="2xl"
                 >
-                    <livewire:links.edit />
-                </div>
+                    <div class="p-10">
+                        <livewire:links.edit />
+                    </div>
+                </x-modal>
             @else
                 <div class="space-y-3">
                     @foreach ($links as $link)