Responsive-Härtung: Seiten-Header, Kontextleiste, Stat-Cards
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
bda755fcf8
commit
036a53499f
55 changed files with 128 additions and 57 deletions
|
|
@ -9,9 +9,11 @@
|
|||
{{-- Hub-Stil-Banner: Hub-Soft-Hintergrund, Hub-Blau-Badge,
|
||||
dezente Buchpapier-Rule. Ersetzt das Zinc-Starter-Kit-Card. --}}
|
||||
<div class="mb-6 rounded-md border border-hub-soft-2 bg-hub-soft/50 px-4 py-3">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
{{-- Erst ab lg nebeneinander: zwischen sm und lg reichte die
|
||||
Breite nicht für Badges + Switcher, Inhalte überlappten. --}}
|
||||
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="flex flex-wrap items-center gap-2.5">
|
||||
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-hub-soft text-hub text-[10.5px] font-bold tracking-[0.10em] uppercase">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-hub"></span>
|
||||
{{ __('User Backend') }}
|
||||
|
|
@ -25,7 +27,7 @@
|
|||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="w-full sm:w-auto">
|
||||
<div class="w-full lg:w-auto">
|
||||
<livewire:customer.company-switcher />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,8 +21,10 @@
|
|||
<article {{ $attributes->class(['stat-card', "is-{$variant}"]) }}>
|
||||
<span class="stat-strip"></span>
|
||||
|
||||
<div class="flex items-baseline justify-between gap-3">
|
||||
<div class="stat-label">{{ $label }}</div>
|
||||
{{-- flex-wrap: auf schmalen Karten rutscht das Meta unter das Label,
|
||||
statt mit ihm zu kollidieren --}}
|
||||
<div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5">
|
||||
<div class="stat-label min-w-0">{{ $label }}</div>
|
||||
|
||||
@isset($meta)
|
||||
<span class="stat-meta">{{ $meta }}</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue