Markup structure improvements (#3)

wire-elements · Apr 2, 2021 · e5332ec · e5332ec
1 parent 2d86ea0
commit e5332ec
Showing 1 changed file with 32 additions and 26 deletions.
diff --git a/resources/views/modal.blade.php b/resources/views/modal.blade.php
@@ -14,37 +14,43 @@
 @endphp
 
 <div
-        x-data="LivewireUiModal()"
-        x-init="init()"
-        x-on:close.stop="show = false"
-        x-on:keydown.escape.window="show = false"
-        x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
-        x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
-        x-show="show"
-        class="fixed z-10 inset-0 overflow-y-auto"
-        style="display: none;"
+    x-data="LivewireUiModal()"
+    x-init="init()"
+    x-on:close.stop="show = false"
+    x-on:keydown.escape.window="show = false"
+    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
+    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
+    x-show="show"
+    class="fixed inset-0 z-10 overflow-y-auto"
+    style="display: none;"
 >
-    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-        <div x-show="show" class="fixed inset-0 transition-opacity" x-on:click="show = false"
-             x-transition:enter="ease-out duration-300"
-             x-transition:enter-start="opacity-0"
-             x-transition:enter-end="opacity-100"
-             x-transition:leave="ease-in duration-200"
-             x-transition:leave-start="opacity-100"
-             x-transition:leave-end="opacity-0">
-            <div class="absolute inset-0 bg-gray-500 opacity-50"></div>
+    <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">
+        <div
+            x-show="show"
+            x-on:click="show = false"
+            x-transition:enter="ease-out duration-300"
+            x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100"
+            x-transition:leave="ease-in duration-200"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+            class="fixed inset-0 transition-all transform"
+        >
+            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
         </div>
 
         <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-        <div x-show="show && showActiveComponent"
-             class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle {{ $maxWidth }} sm:w-full"
-             x-transition:enter="ease-out duration-300"
-             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">
+        <div
+            x-show="show && showActiveComponent"
+            x-transition:enter="ease-out duration-300"
+            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="inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full {{ $maxWidth }}"
+        >
             @forelse($components as $id => $component)
                 <div x-show.immediate="activeComponent == '{{ $id }}'">
                     @livewire($component['name'], $component['attributes'], key($id))