48 lines
2.4 KiB
PHP
48 lines
2.4 KiB
PHP
{{--
|
|
"Keine Verbindung" / "Verbindung wiederhergestellt" — shared by both
|
|
shells (console and portal), unlike the toast a few lines away in each
|
|
layout. Deliberately its own element rather than reusing that toast:
|
|
|
|
- The toast always self-dismisses after a fixed 3.2s. A dropped
|
|
connection can easily outlast that, and the message quietly
|
|
disappearing while still offline would read as "resolved" when it is
|
|
not.
|
|
- Both are `fixed`, bottom-anchored pills; keeping them at different
|
|
corners means an unrelated toast firing while this is up (a
|
|
client-side-only action, e.g. the VPN config "copied") never overlaps
|
|
it.
|
|
|
|
The two icons are both always in the DOM with x-show toggling between
|
|
them, rather than one icon whose :class is swapped, so R18's "never
|
|
larger than the call site asked for" stays trivially true either way.
|
|
|
|
See connectionBanner() in resources/js/app.js for the three signals
|
|
(navigator.onLine, the online/offline window events, and real Livewire
|
|
request failures) that drive offline/justRestored.
|
|
--}}
|
|
<div
|
|
x-data="connectionBanner()"
|
|
@offline.window="markOffline()"
|
|
@online.window="markOnline()"
|
|
@connection-lost.window="markOffline()"
|
|
@connection-restored.window="markOnline()"
|
|
x-show="offline || justRestored"
|
|
x-cloak
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-2"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-300"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 translate-y-2"
|
|
role="status" aria-live="polite"
|
|
class="fixed bottom-6 right-6 z-[80] flex items-center gap-2 rounded-pill border px-4 py-2.5 text-sm font-semibold shadow-md"
|
|
{{-- Same token pairs as <x-ui.alert variant="warning|success">; not
|
|
that component itself, since its class string is fixed at
|
|
server-render time and this toggles purely client-side. --}}
|
|
:class="offline ? 'border-warning-border bg-warning-bg text-warning' : 'border-success-border bg-success-bg text-success'"
|
|
>
|
|
<x-ui.icon name="alert-triangle" class="size-4" x-show="offline" />
|
|
<x-ui.icon name="check" class="size-4" x-show="!offline" />
|
|
<span x-text="offline ? @js(__('common.connection_lost')) : @js(__('common.connection_restored'))"></span>
|
|
</div>
|