68 lines
2.9 KiB
PHP
68 lines
2.9 KiB
PHP
@props([
|
|
// Der Schritt, an dem der Betreiber gerade steht: 3 solange das Formular
|
|
// offen ist, 4 sobald die Befehlszeile da ist.
|
|
'current' => 3,
|
|
])
|
|
|
|
{{-- Der Ablauf als schmale Schiene, nicht als Textwand.
|
|
|
|
Die erste Fassung war sechs Absätze übereinander, oberhalb des Formulars.
|
|
Sie beantwortete alles und zeigte nichts: der eigentliche Auftrag dieser
|
|
Seite — vier Felder ausfüllen — verschwand unter der Anleitung dazu.
|
|
|
|
Sechs Wortpaare untereinander beantworten die Frage, die man hier wirklich
|
|
hat („wo stehe ich, wie viel kommt noch"), auf einen Blick. Was ein Schritt
|
|
inhaltlich bedeutet, steht in der Zeile, in der er dran ist — nicht sechsmal
|
|
im Voraus.
|
|
|
|
Dieselbe Form wie die Seitennavigation der Einstellungsseite: 232 px, ab
|
|
`lg` klebend, darunter waagerecht scrollbar. Ein zweites Muster für
|
|
dasselbe Problem wäre eine zweite Sprache. --}}
|
|
|
|
@php
|
|
$steps = [
|
|
1 => __('hosts.takeover.s1_label'),
|
|
2 => __('hosts.takeover.s2_label'),
|
|
3 => __('hosts.takeover.s3_label'),
|
|
4 => __('hosts.takeover.s4_label'),
|
|
5 => __('hosts.takeover.s5_label'),
|
|
6 => __('hosts.takeover.s6_label'),
|
|
];
|
|
@endphp
|
|
|
|
<nav {{ $attributes->merge(['class' => '-mx-4 shrink-0 overflow-x-auto px-4 lg:mx-0 lg:w-[232px] lg:overflow-visible lg:px-0 lg:sticky lg:top-8']) }}
|
|
aria-label="{{ __('hosts.takeover.rail_title') }}">
|
|
<p class="lbl hidden lg:block">{{ __('hosts.takeover.rail_title') }}</p>
|
|
|
|
<ol class="mt-2 flex gap-1.5 lg:flex-col lg:gap-0.5">
|
|
@foreach ($steps as $number => $label)
|
|
@php
|
|
$isCurrent = $number === $current;
|
|
$isPast = $number < $current;
|
|
@endphp
|
|
<li class="shrink-0">
|
|
<div @class([
|
|
'flex items-center gap-2.5 rounded px-2.5 py-2 text-sm whitespace-nowrap lg:whitespace-normal',
|
|
'bg-surface-2 font-semibold text-ink' => $isCurrent,
|
|
'text-muted' => ! $isCurrent,
|
|
])>
|
|
{{-- Die Ziffer trägt den Zustand. Ein Häkchen daneben wäre
|
|
ein zweites Zeichen für dieselbe Aussage, und die
|
|
Nummer kann man abzählen. --}}
|
|
<span @class([
|
|
'flex size-5 shrink-0 items-center justify-center rounded-full border text-[11px] font-bold tabular-nums',
|
|
'border-transparent bg-success text-on-accent' => $isPast,
|
|
'border-accent text-accent-text' => $isCurrent,
|
|
'border-line text-muted' => ! $isPast && ! $isCurrent,
|
|
])>{{ $number }}</span>
|
|
<span class="min-w-0">{{ $label }}</span>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ol>
|
|
|
|
<p class="mt-4 hidden max-w-[232px] text-xs leading-relaxed text-muted lg:block">
|
|
{{ __('hosts.takeover.how_sub') }}
|
|
</p>
|
|
</nav>
|