112 lines
6.1 KiB
PHP
112 lines
6.1 KiB
PHP
{{-- Gebaut wie die Bereitschaftsseite, und das mit Absicht.
|
|
|
|
Die erste Fassung nahm das Muster der Host-Anlegen-Seite: `lbl`-Etikett,
|
|
große Kopfzeile, pro Punkt eine fette Karte mit einer Beschreibungsliste
|
|
darin. Das ist die Sprache einer Formularseite, nicht die einer Liste mit
|
|
Zuständen — und für dieselbe Aufgabe gibt es in dieser Konsole längst eine:
|
|
Bereitschaft. Zwei Muster für ein Problem sind zwei Sprachen.
|
|
|
|
Also: schlichte Kopfzeile, ein Sammelbanner mit dem dringendsten Zustand,
|
|
danach je Zustand eine Karte mit einer `divide-y`-Liste. Ein Punkt ist eine
|
|
Zeile mit Symbol, Titel und drei kleinen Angaben darunter — nicht
|
|
ein eigener Kasten. --}}
|
|
|
|
@php
|
|
// Ton je Zustand, an einer Stelle. Nur „verkauft, nicht geliefert" ist rot:
|
|
// wenn alles auffällt, fällt nichts auf.
|
|
$tone = [
|
|
App\Support\OpenWork::SOLD => ['alert-triangle', 'text-danger'],
|
|
App\Support\OpenWork::PARTIAL => ['alert-triangle', 'text-warning'],
|
|
App\Support\OpenWork::UNPROVEN => ['shield-check', 'text-muted'],
|
|
App\Support\OpenWork::PLANNED => ['bell', 'text-muted'],
|
|
];
|
|
@endphp
|
|
|
|
<div class="space-y-5">
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('open_work.title') }}</h1>
|
|
<p class="mt-1 text-sm text-muted">{{ __('open_work.subtitle') }}</p>
|
|
</div>
|
|
|
|
@if ($groups)
|
|
{{-- Ein Satz, der die Frage vor der Liste beantwortet: ist etwas dabei,
|
|
das gerade Geld kostet? Der Ton kommt vom dringendsten Zustand, der
|
|
wirklich vorkommt — nicht von einer festen Farbe. --}}
|
|
@php([$worstIcon, $worstText] = $tone[$worst])
|
|
{{-- `bg-danger-bg` und `border-danger-border`, nicht `bg-danger/5`:
|
|
dieses Haus hat für gedämpfte Töne eigene Tokens
|
|
(resources/css/portal-tokens.css). Die Deckkraft-Schreibweise ergab
|
|
hier gar keinen sichtbaren Hintergrund — der Kasten stand
|
|
durchsichtig da, nur mit Rahmen. --}}
|
|
<div class="flex items-center gap-3 rounded-lg border p-5 shadow-xs animate-rise
|
|
{{ $worst === App\Support\OpenWork::SOLD ? 'border-danger-border bg-danger-bg' : 'border-line bg-surface' }}">
|
|
<x-ui.icon :name="$worstIcon" class="{{ $worstText }}" />
|
|
<p class="text-lg font-semibold {{ $worstText }}">
|
|
{{ trans_choice('open_work.summary', $total, ['n' => $total]) }}
|
|
</p>
|
|
</div>
|
|
|
|
@foreach ($groups as $state => $items)
|
|
@php([$icon, $text] = $tone[$state])
|
|
<div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise">
|
|
<div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
|
|
<h2 class="font-semibold text-ink">{{ __('open_work.state.'.$state) }}</h2>
|
|
<span class="text-xs tabular-nums text-muted">{{ count($items) }}</span>
|
|
</div>
|
|
<p class="mt-1 text-sm text-muted">{{ __('open_work.state_hint.'.$state) }}</p>
|
|
|
|
<ul class="mt-3 divide-y divide-line">
|
|
@foreach ($items as $item)
|
|
<li class="flex flex-wrap items-start gap-3 py-3">
|
|
<x-ui.icon :name="$icon" class="mt-0.5 size-4 shrink-0 {{ $text }}" />
|
|
|
|
<div class="min-w-0 flex-1">
|
|
{{-- Keine Zustands-Plakette an der Zeile: die
|
|
Karte darüber sagt den Zustand schon, und
|
|
alle Zeilen darin teilen ihn. Sie stand
|
|
hier und wiederholte dasselbe Wort dreimal
|
|
pro Bildschirm, ohne eine Frage zu
|
|
beantworten. --}}
|
|
<p class="font-medium text-ink">{{ $item['title'] }}</p>
|
|
|
|
{{-- Zwei Spalten, sobald Platz da ist.
|
|
|
|
Beide Absätze standen untereinander mit
|
|
`max-w-[76ch]`. Das Layout erlaubt aber
|
|
1320 px, die Karte ist also über 1200 px
|
|
breit — der Text endete in der Mitte und
|
|
rechts blieb die halbe Karte leer.
|
|
|
|
Die Grenze ganz wegzunehmen wäre die
|
|
falsche Antwort: über die volle Breite
|
|
wären es rund 165 Zeichen je Zeile, und
|
|
eine Zeile, deren Anfang man beim Umbruch
|
|
nicht mehr findet, liest niemand. Zwei
|
|
Spalten füllen die Breite UND halten jede
|
|
Spalte in der lesbaren Länge.
|
|
|
|
Und sie passen inhaltlich: „was fehlt" ist
|
|
eine Beschreibung, „wenn es so bleibt"
|
|
eine Folge. Nebeneinander sieht man den
|
|
Unterschied. --}}
|
|
<div class="mt-1 grid gap-x-10 gap-y-1 lg:grid-cols-2">
|
|
<p class="text-sm text-muted">{{ $item['missing'] }}</p>
|
|
<p class="text-sm {{ $state === App\Support\OpenWork::SOLD ? 'text-danger' : 'text-body' }}">
|
|
<span class="text-muted">{{ __('open_work.risk') }}:</span> {{ $item['risk'] }}
|
|
</p>
|
|
</div>
|
|
|
|
<p class="mt-1.5 font-mono text-xs text-faint break-all">{{ $item['where'] }}</p>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise">
|
|
<p class="text-sm text-muted">{{ __('open_work.empty') }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|