5.4 (Teil 3): page-header in users/* + contacts/* umgestellt

Sieben weitere Header auf <x-portal.page-header>:
- users (index), users/create, contacts/index, contacts/create (Standard;
  contacts/create mit bedingtem 'Firma vorausgewaehlt'-Badge via :meta)
- users/show, users/edit (ID + Portal + Aktiv/Inaktiv-Badges via :meta,
  dynamischer Titel/Beschreibung aus User-Daten)
- contacts/edit (ID + Portal-Label via :meta, ohne Beschreibung)

Component: break-words am H1 ergaenzt (fuer lange Namen/E-Mails in show/edit;
bei kurzen Titeln ein No-op). User-/Contact-Tests (129) gruen.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-07-01 09:08:06 +00:00
parent 0087489600
commit 0c373f5963
8 changed files with 86 additions and 133 deletions

View file

@ -32,7 +32,7 @@
{{ $meta ?? '' }} {{ $meta ?? '' }}
</div> </div>
<h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)]"> <h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)] break-words">
{{ $title }} {{ $title }}
</h1> </h1>

View file

@ -141,29 +141,23 @@ new #[Layout('components.layouts.app'), Title('Kontakt anlegen')] class extends
<form wire:submit="save" class="space-y-8"> <form wire:submit="save" class="space-y-8">
{{-- ============== PAGE HEADER ============== --}} {{-- ============== PAGE HEADER ============== --}}
<header class="page-header"> <x-portal.page-header
<div class="min-w-0"> :badge="__('Admin Backend')"
<div class="flex items-center gap-3 mb-3 flex-wrap"> :eyebrow="__('Administration · Pressekontakte')"
<span class="badge hub dot">{{ __('Admin Backend') }}</span> :title="__('Kontakt anlegen')"
<span class="eyebrow muted">{{ __('Administration · Pressekontakte') }}</span> :description="__('Kontakt einer Firma zuordnen und Stammdaten erfassen.')"
>
@if ($isCompanyPrefilled && $companyId) @if ($isCompanyPrefilled && $companyId)
<x-slot:meta>
<span class="badge hub">{{ __('Firma vorausgewählt') }}</span> <span class="badge hub">{{ __('Firma vorausgewählt') }}</span>
</x-slot:meta>
@endif @endif
</div> <x-slot:actions>
<h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)]">
{{ __('Kontakt anlegen') }}
</h1>
<p class="text-[13px] leading-[1.55] mt-2 m-0 max-w-[640px] text-[color:var(--color-ink-2)]">
{{ __('Kontakt einer Firma zuordnen und Stammdaten erfassen.') }}
</p>
</div>
<div class="flex items-center gap-2 flex-shrink-0">
<flux:button variant="filled" icon="arrow-left" href="{{ route('admin.contacts.index') }}" wire:navigate> <flux:button variant="filled" icon="arrow-left" href="{{ route('admin.contacts.index') }}" wire:navigate>
{{ __('Zurück') }} {{ __('Zurück') }}
</flux:button> </flux:button>
</div> </x-slot:actions>
</header> </x-portal.page-header>
<article class="panel"> <article class="panel">
<div class="panel-head"> <div class="panel-head">

View file

@ -176,25 +176,20 @@ new #[Layout('components.layouts.app'), Title('Kontakt bearbeiten')] class exten
<div class="space-y-8"> <div class="space-y-8">
<form wire:submit="save" class="space-y-8"> <form wire:submit="save" class="space-y-8">
{{-- ============== PAGE HEADER ============== --}} {{-- ============== PAGE HEADER ============== --}}
<header class="page-header"> <x-portal.page-header
<div class="min-w-0"> :eyebrow="__('Administration · Pressekontakte')"
<div class="flex items-center gap-3 mb-3 flex-wrap"> :title="__('Kontakt bearbeiten')"
<span class="badge hub dot">{{ __('Admin Backend') }}</span> >
<span class="eyebrow muted">{{ __('Administration · Pressekontakte') }}</span> <x-slot:meta>
<span class="badge hub">ID #{{ $id }}</span> <span class="badge hub">ID #{{ $id }}</span>
<span class="badge hub">{{ $this->currentPortalLabel() }}</span> <span class="badge hub">{{ $this->currentPortalLabel() }}</span>
</div> </x-slot:meta>
<h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)]"> <x-slot:actions>
{{ __('Kontakt bearbeiten') }}
</h1>
</div>
<div class="flex items-center gap-2 flex-shrink-0">
<flux:button variant="filled" icon="arrow-left" href="{{ route('admin.contacts.index') }}" wire:navigate> <flux:button variant="filled" icon="arrow-left" href="{{ route('admin.contacts.index') }}" wire:navigate>
{{ __('Zurück') }} {{ __('Zurück') }}
</flux:button> </flux:button>
</div> </x-slot:actions>
</header> </x-portal.page-header>
<article class="panel"> <article class="panel">
<div class="panel-head"> <div class="panel-head">

View file

@ -367,21 +367,13 @@ new #[Layout('components.layouts.app'), Title('Kontakte')] class extends Compone
<div class="space-y-8"> <div class="space-y-8">
{{-- ============== PAGE HEADER ============== --}} {{-- ============== PAGE HEADER ============== --}}
<header class="page-header"> <x-portal.page-header
<div class="min-w-0"> :badge="__('Admin Backend')"
<div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap"> :eyebrow="__('Administration · Pressekontakte')"
<span class="badge hub dot">{{ __('Admin Backend') }}</span> :title="__('Kontakte')"
<span class="eyebrow muted">{{ __('Administration · Pressekontakte') }}</span> :description="__('Pressekontakte aller Firmen über alle Portale hinweg.')"
</div> >
<h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)]"> <x-slot:actions>
{{ __('Kontakte') }}
</h1>
<p class="text-[13px] leading-[1.55] mt-2 m-0 max-w-[640px] text-[color:var(--color-ink-2)]">
{{ __('Pressekontakte aller Firmen über alle Portale hinweg.') }}
</p>
</div>
<div class="flex items-center gap-2 flex-shrink-0">
@if (\Illuminate\Support\Facades\Route::has('admin.contacts.create')) @if (\Illuminate\Support\Facades\Route::has('admin.contacts.create'))
<flux:button variant="primary" icon="plus" href="{{ route('admin.contacts.create') }}" wire:navigate> <flux:button variant="primary" icon="plus" href="{{ route('admin.contacts.create') }}" wire:navigate>
{{ __('Neuer Kontakt') }} {{ __('Neuer Kontakt') }}
@ -391,8 +383,8 @@ new #[Layout('components.layouts.app'), Title('Kontakte')] class extends Compone
{{ __('Neuer Kontakt') }} {{ __('Neuer Kontakt') }}
</flux:button> </flux:button>
@endif @endif
</div> </x-slot:actions>
</header> </x-portal.page-header>
@if ($notification) @if ($notification)
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)" x-show="show" x-transition <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)" x-show="show" x-transition

View file

@ -298,26 +298,18 @@ new #[Layout('components.layouts.app'), Title('Benutzer')] class extends Compone
<div class="space-y-8"> <div class="space-y-8">
{{-- ============== PAGE HEADER ============== --}} {{-- ============== PAGE HEADER ============== --}}
<header class="page-header"> <x-portal.page-header
<div class="min-w-0"> :badge="__('Admin Backend')"
<div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap"> :eyebrow="__('Administration · User-Verwaltung')"
<span class="badge hub dot">{{ __('Admin Backend') }}</span> :title="__('Benutzer')"
<span class="eyebrow muted">{{ __('Administration · User-Verwaltung') }}</span> :description="__('Alle Konten der Plattform mit Rollen, Berechtigungen und Migrations-/Pflegefällen.')"
</div> >
<h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)]"> <x-slot:actions>
{{ __('Benutzer') }}
</h1>
<p class="text-[13px] leading-[1.55] mt-2 m-0 max-w-[640px] text-[color:var(--color-ink-2)]">
{{ __('Alle Konten der Plattform mit Rollen, Berechtigungen und Migrations-/Pflegefällen.') }}
</p>
</div>
<div class="flex items-center gap-2 flex-shrink-0">
<flux:button variant="primary" icon="plus" href="{{ route('admin.users.create') }}" wire:navigate> <flux:button variant="primary" icon="plus" href="{{ route('admin.users.create') }}" wire:navigate>
{{ __('Benutzer anlegen') }} {{ __('Benutzer anlegen') }}
</flux:button> </flux:button>
</div> </x-slot:actions>
</header> </x-portal.page-header>
{{-- ============== KPI-Reihe ============== --}} {{-- ============== KPI-Reihe ============== --}}
<section class="grid grid-cols-1 gap-4 sm:grid-cols-3"> <section class="grid grid-cols-1 gap-4 sm:grid-cols-3">

View file

@ -210,26 +210,18 @@ new #[Layout('components.layouts.app'), Title('Benutzer anlegen')] class extends
<form wire:submit="save" class="space-y-8"> <form wire:submit="save" class="space-y-8">
{{-- ============== PAGE HEADER ============== --}} {{-- ============== PAGE HEADER ============== --}}
<header class="page-header"> <x-portal.page-header
<div class="min-w-0"> :badge="__('Admin Backend')"
<div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap"> :eyebrow="__('Administration · Benutzer · Neu')"
<span class="badge hub dot">{{ __('Admin Backend') }}</span> :title="__('Benutzer anlegen')"
<span class="eyebrow muted">{{ __('Administration · Benutzer · Neu') }}</span> :description="__('Rollen, Firmen und optional Rechnungsadresse direkt mitsetzen.')"
</div> >
<h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)]"> <x-slot:actions>
{{ __('Benutzer anlegen') }}
</h1>
<p class="text-[13px] leading-[1.55] mt-2 m-0 max-w-[640px] text-[color:var(--color-ink-2)]">
{{ __('Rollen, Firmen und optional Rechnungsadresse direkt mitsetzen.') }}
</p>
</div>
<div class="flex items-center gap-2 flex-shrink-0">
<flux:button variant="filled" icon="arrow-left" href="{{ route('admin.users.index') }}" wire:navigate> <flux:button variant="filled" icon="arrow-left" href="{{ route('admin.users.index') }}" wire:navigate>
{{ __('Zurück') }} {{ __('Zurück') }}
</flux:button> </flux:button>
</div> </x-slot:actions>
</header> </x-portal.page-header>
<article class="panel"> <article class="panel">
<div class="panel-head"> <div class="panel-head">

View file

@ -697,11 +697,12 @@ new #[Layout('components.layouts.app'), Title('Benutzer bearbeiten')] class exte
<form wire:submit="save" class="space-y-8"> <form wire:submit="save" class="space-y-8">
{{-- ============== PAGE HEADER ============== --}} {{-- ============== PAGE HEADER ============== --}}
<header class="page-header"> <x-portal.page-header
<div class="min-w-0"> :eyebrow="__('Administration · Benutzer · Bearbeiten')"
<div class="flex items-center gap-3 mb-3 flex-wrap"> :title="$name ?: __('Benutzer bearbeiten')"
<span class="badge hub dot">{{ __('Admin Backend') }}</span> :description="$email"
<span class="eyebrow muted">{{ __('Administration · Benutzer · Bearbeiten') }}</span> >
<x-slot:meta>
<span class="badge hub">ID #{{ $id }}</span> <span class="badge hub">ID #{{ $id }}</span>
<span class="badge hub">{{ strtoupper($portal) }}</span> <span class="badge hub">{{ strtoupper($portal) }}</span>
@if ($isActive) @if ($isActive)
@ -709,21 +710,13 @@ new #[Layout('components.layouts.app'), Title('Benutzer bearbeiten')] class exte
@else @else
<span class="badge err dot">{{ __('Inaktiv') }}</span> <span class="badge err dot">{{ __('Inaktiv') }}</span>
@endif @endif
</div> </x-slot:meta>
<h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)] break-words"> <x-slot:actions>
{{ $name ?: __('Benutzer bearbeiten') }}
</h1>
<p class="text-[13px] leading-[1.55] mt-2 m-0 max-w-[640px] text-[color:var(--color-ink-2)]">
{{ $email }}
</p>
</div>
<div class="flex items-center gap-2 flex-shrink-0">
<flux:button variant="filled" icon="arrow-left" href="{{ route('admin.users.index') }}" wire:navigate> <flux:button variant="filled" icon="arrow-left" href="{{ route('admin.users.index') }}" wire:navigate>
{{ __('Zurück') }} {{ __('Zurück') }}
</flux:button> </flux:button>
</div> </x-slot:actions>
</header> </x-portal.page-header>
@if ($notification) @if ($notification)
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 4000)" x-show="show" x-transition <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 4000)" x-show="show" x-transition

View file

@ -73,33 +73,28 @@ new #[Layout('components.layouts.app'), Title('Benutzer anzeigen')] class extend
</article> </article>
@else @else
{{-- ============== PAGE HEADER ============== --}} {{-- ============== PAGE HEADER ============== --}}
<header class="page-header"> <x-portal.page-header
<div class="min-w-0"> :eyebrow="__('Administration · Benutzer')"
<div class="flex items-center gap-3 mb-3 flex-wrap"> :title="$user->name"
<span class="badge hub dot">{{ __('Admin Backend') }}</span> :description="$user->email"
<span class="eyebrow muted">{{ __('Administration · Benutzer') }}</span> >
<x-slot:meta>
<span class="badge hub">ID #{{ $user->id }}</span> <span class="badge hub">ID #{{ $user->id }}</span>
@if ($user->is_active) @if ($user->is_active)
<span class="badge ok dot">{{ __('Aktiv') }}</span> <span class="badge ok dot">{{ __('Aktiv') }}</span>
@else @else
<span class="badge err dot">{{ __('Inaktiv') }}</span> <span class="badge err dot">{{ __('Inaktiv') }}</span>
@endif @endif
</div> </x-slot:meta>
<h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)] break-words"> <x-slot:actions>
{{ $user->name }}
</h1>
<p class="text-[13px] leading-[1.55] mt-2 m-0 max-w-[640px] text-[color:var(--color-ink-2)]">{{ $user->email }}</p>
</div>
<div class="flex items-center gap-2 flex-shrink-0">
<flux:button variant="filled" icon="arrow-left" href="{{ route('admin.users.index') }}" wire:navigate> <flux:button variant="filled" icon="arrow-left" href="{{ route('admin.users.index') }}" wire:navigate>
{{ __('Zurück') }} {{ __('Zurück') }}
</flux:button> </flux:button>
<flux:button variant="primary" icon="pencil" href="{{ route('admin.users.edit', $user->id) }}" wire:navigate> <flux:button variant="primary" icon="pencil" href="{{ route('admin.users.edit', $user->id) }}" wire:navigate>
{{ __('Bearbeiten') }} {{ __('Bearbeiten') }}
</flux:button> </flux:button>
</div> </x-slot:actions>
</header> </x-portal.page-header>
{{-- ============== KPI-Reihe ============== --}} {{-- ============== KPI-Reihe ============== --}}
<section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4"> <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">