72 lines
4.4 KiB
PHP
72 lines
4.4 KiB
PHP
{{--
|
|
"We are updating" — one panel, used in both places it can appear.
|
|
|
|
It showed up twice with two different faces: the console's own overlay in the
|
|
app's light tokens while the application was still up, and then this, the
|
|
503 page, once the containers went down. Two designs for one event, one
|
|
replacing the other mid-update. Reported as "the first screen must not be
|
|
there", and rightly.
|
|
|
|
The styles are inline and self-contained rather than Tailwind classes,
|
|
because the other place this renders is the 503 page — shown while the
|
|
application is mid-deploy or freshly installed, exactly when the Vite
|
|
manifest may not exist. A stylesheet reference there would throw instead of
|
|
rendering the reassurance the visitor came for.
|
|
|
|
Prefixed class names: this is injected into the console's own document,
|
|
which has a stylesheet of its own, and `.badge` is not a name to claim
|
|
globally.
|
|
--}}
|
|
<style>
|
|
.cpu-wrap { --cpu-bg: #f6f7f9; --cpu-fg: #0f172a; --cpu-muted: #64748b; --cpu-accent: #f97316; --cpu-card: #ffffff; --cpu-line: #e2e8f0;
|
|
display: grid; place-items: center; text-align: center; padding: 4rem 1.5rem; min-height: 100%;
|
|
background: var(--cpu-bg); color: var(--cpu-fg);
|
|
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
|
|
@media (prefers-color-scheme: dark) {
|
|
.cpu-wrap { --cpu-bg: #0b0f19; --cpu-fg: #e2e8f0; --cpu-muted: #94a3b8; --cpu-card: #111827; --cpu-line: #1f2937; }
|
|
}
|
|
.cpu-main { max-width: 34rem; width: 100%; }
|
|
.cpu-mark { width: 2.5rem; height: 2.5rem; margin: 0 auto; border-radius: 0.75rem; background: var(--cpu-accent); }
|
|
.cpu-badge { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.25rem 0.75rem;
|
|
border: 1px solid var(--cpu-line); border-radius: 9999px; background: var(--cpu-card);
|
|
font-size: 0.72rem; font-weight: 600; color: var(--cpu-accent); }
|
|
.cpu-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--cpu-accent); animation: cpu-pulse 1.6s ease-in-out infinite; }
|
|
@keyframes cpu-pulse { 50% { opacity: 0.35; } }
|
|
@media (prefers-reduced-motion: reduce) { .cpu-dot { animation: none; } }
|
|
.cpu-title { margin: 1.75rem 0 0; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
|
|
.cpu-body { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.65; color: var(--cpu-muted); }
|
|
.cpu-foot { margin-top: 2rem; font-size: 0.75rem; color: var(--cpu-muted); }
|
|
.cpu-detail { margin-top: 1.5rem; text-align: left; }
|
|
.cpu-step { margin: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--cpu-line); border-radius: 0.5rem;
|
|
background: var(--cpu-card); font-size: 0.85rem; font-weight: 500; }
|
|
.cpu-since { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--cpu-muted); }
|
|
.cpu-log { margin: 0.5rem 0 0; max-height: 10rem; overflow: auto; padding: 0.7rem 0.9rem;
|
|
border: 1px solid var(--cpu-line); border-radius: 0.5rem; background: var(--cpu-card);
|
|
font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; line-height: 1.6; }
|
|
</style>
|
|
|
|
<div class="cpu-wrap">
|
|
<main class="cpu-main">
|
|
<div class="cpu-mark"></div>
|
|
<div class="cpu-badge"><span class="cpu-dot"></span>{{ __('updating.badge') }}</div>
|
|
<h1 class="cpu-title">{{ __('updating.title') }}</h1>
|
|
<p class="cpu-body">{{ $body ?? __('updating.body') }}</p>
|
|
|
|
{{-- Only in the console. A customer looking at the 503 has no use for a
|
|
deployment step, and an operator watching a run that is stuck has
|
|
no use for anything else: "läuft gerade" alone is what sends
|
|
somebody to the shell. The markup is Alpine-driven and inert
|
|
wherever Alpine is not — which is why it is behind a flag rather
|
|
than always present. --}}
|
|
@if ($detail ?? false)
|
|
<div class="cpu-detail">
|
|
<p class="cpu-step" x-show="!step">{{ $starting ?? '' }}</p>
|
|
<p class="cpu-step" x-show="step" x-text="step" x-cloak></p>
|
|
<p class="cpu-since" x-show="runningSince" x-text="runningSince" x-cloak></p>
|
|
<pre class="cpu-log" x-show="log" x-text="log" x-cloak></pre>
|
|
</div>
|
|
@endif
|
|
<p class="cpu-foot">{{ __('updating.auto') }}</p>
|
|
</main>
|
|
</div>
|