Update offline, issue with Livewire though

Author: rappasoft

resources/views/bootstrap-4/includes/offline.blade.php

@@ -1,9 +1,11 @@
 @if ($offlineIndicator)
-    <div wire:offline.class="d-flex align-items-center" wire:offline.class.remove="d-none" class="alert alert-danger d-none">
-        <svg xmlns="http://www.w3.org/2000/svg" style="width:1.3em;height:1.3em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
+    <div wire:offline.class="d-block" wire:offline.class.remove="d-none" class="d-none">
+        <div class="alert alert-danger d-flex align-items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" style="width:1.3em;height:1.3em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
 
-        <span class="d-inline-block ml-2">@lang('You are not connected to the internet.')</span>
+            <span class="d-inline-block ml-2">@lang('You are not connected to the internet.')</span>
+        </div>
     </div>
 @endif

resources/views/tailwind/datatable.blade.php

@@ -1,26 +1,28 @@
 <div
     @if (is_numeric($refresh)) wire:poll.{{ $refresh }}ms @elseif(is_string($refresh)) wire:poll="{{ $refresh }}" @endif
-    class="flex-col space-y-4"
 >
     @include('livewire-tables::tailwind.includes.offline')
-    @include('livewire-tables::tailwind.includes.sorting-pills')
-    @include('livewire-tables::tailwind.includes.filter-pills')
 
-    <div class="md:flex md:justify-between p-6 md:p-0">
-        <div class="w-full mb-4 md:mb-0 md:w-2/4 md:flex space-y-4 md:space-y-0 md:space-x-4">
-            @include('livewire-tables::tailwind.includes.search')
-            @include('livewire-tables::tailwind.includes.filters')
-        </div>
+    <div class="flex-col space-y-4">
+        @include('livewire-tables::tailwind.includes.sorting-pills')
+        @include('livewire-tables::tailwind.includes.filter-pills')
+
+        <div class="md:flex md:justify-between p-6 md:p-0">
+            <div class="w-full mb-4 md:mb-0 md:w-2/4 md:flex space-y-4 md:space-y-0 md:space-x-4">
+                @include('livewire-tables::tailwind.includes.search')
+                @include('livewire-tables::tailwind.includes.filters')
+            </div>
 
-        <div class="md:space-x-2 md:flex md:items-center">
-            @include('livewire-tables::tailwind.includes.bulk-actions')
+            <div class="md:space-x-2 md:flex md:items-center">
+                @include('livewire-tables::tailwind.includes.bulk-actions')
 
-            <div class="w-full md:w-auto">
-                @include('livewire-tables::tailwind.includes.per-page')
+                <div class="w-full md:w-auto">
+                    @include('livewire-tables::tailwind.includes.per-page')
+                </div>
             </div>
         </div>
-    </div>
 
-    @include('livewire-tables::tailwind.includes.table')
-    @include('livewire-tables::tailwind.includes.pagination')
+        @include('livewire-tables::tailwind.includes.table')
+        @include('livewire-tables::tailwind.includes.pagination')
+    </div>
 </div>

resources/views/tailwind/includes/offline.blade.php

@@ -1,15 +1,17 @@
 @if ($offlineIndicator)
-    <div wire:offline.class="block mb-3" wire:offline.class.remove="hidden">
-        <div class="flex">
-            <div class="flex-shrink-0">
-                <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-                </svg>
-            </div>
-            <div class="ml-3">
-                <h3 class="text-sm font-medium text-red-800">
-                    @lang('You are not connected to the internet.')
-                </h3>
+    <div wire:offline.class="block" wire:offline.class.remove="hidden" class="hidden">
+        <div class="rounded-md bg-red-50 p-4 mb-4">
+            <div class="flex">
+                <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div class="ml-3">
+                    <h3 class="text-sm font-medium text-red-800">
+                        @lang('You are not connected to the internet.')
+                    </h3>
+                </div>
             </div>
         </div>
     </div>