Die Einladenzeile im Portal springt nicht mehr
Arbeit der Parallelsitzung an der Mitarbeiterverwaltung, hier nur eingecheckt — nicht von mir geschrieben. `sm:items-end` richtete die drei Felder unten aus. Der Fehler unter der E-Mail und der Hinweis unter der Rolle machten ihre Zelle hoeher und schoben damit deren Eingabefelder nach oben: drei Felder auf drei Hoehen, und je nachdem, ob gerade ein Fehler stand, sprang die Zeile. Jetzt `items-start` mit gleich hohen Beschriftungen; Fehler und Hinweis stehen unter der Zeile, wo sie niemanden mehr verschieben. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>claude/nice-moser-521659
nexxo
parent
82ace84d01
commit
abfa4890ac
|
|
@ -14,30 +14,57 @@
|
|||
{{-- Anlegen. Ausdrücklich NICHT einladen: hier entsteht nur die Zeile,
|
||||
die Einladung verschickt der Knopf in der Tabelle. Ein Inhaber soll
|
||||
sein Team vorbereiten können, ohne dass jemand eine Mail bekommt. --}}
|
||||
<form wire:submit="addSeat" class="grid grid-cols-1 gap-3 rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms] sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
|
||||
<div>
|
||||
<label class="text-sm font-medium text-body" for="inviteEmail">{{ __('users.invite_email') }}</label>
|
||||
<input id="inviteEmail" type="email" wire:model="inviteEmail" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
|
||||
@error('inviteEmail')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
|
||||
{{-- Eine Zeile aus Feldern, und alles, was darunter wachsen kann, wächst
|
||||
AUSSERHALB davon.
|
||||
|
||||
Vorher stand hier `sm:items-end`: Der Fehler unter der E-Mail und der
|
||||
Hinweis unter der Rolle machten ihre Zelle höher, und weil unten
|
||||
ausgerichtet wurde, schob das ihre Eingabefelder nach OBEN. Drei
|
||||
Felder auf drei verschiedenen Höhen, und je nachdem, ob gerade ein
|
||||
Fehler stand, sprang die Zeile.
|
||||
|
||||
`items-start` und gleich hohe Beschriftungen richten die Felder
|
||||
aneinander aus. Fehler und Hinweis stehen unter der Zeile, wo sie
|
||||
niemanden mehr verschieben. --}}
|
||||
<form wire:submit="addSeat" class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms]">
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_1fr_auto_auto] sm:items-start">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-body" for="inviteEmail">{{ __('users.invite_email') }}</label>
|
||||
<input id="inviteEmail" type="email" wire:model="inviteEmail"
|
||||
@error('inviteEmail') aria-invalid="true" @enderror
|
||||
class="mt-1.5 w-full rounded-md border bg-surface px-3 py-2 text-sm text-ink @error('inviteEmail') border-danger @else border-line-strong @enderror" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-body" for="inviteName">{{ __('users.invite_name') }}</label>
|
||||
<input id="inviteName" type="text" wire:model="inviteName" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-body" for="inviteRole">{{ __('users.role') }}</label>
|
||||
<select id="inviteRole" wire:model.live="inviteRole" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body sm:w-auto">
|
||||
<option value="admin">{{ __('users.role_admin') }}</option>
|
||||
<option value="member">{{ __('users.role_member') }}</option>
|
||||
<option value="readonly">{{ __('users.role_readonly') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
{{-- Ein leerer Platzhalter in Beschriftungshöhe, damit der Knopf auf
|
||||
der Linie der Felder sitzt — und nicht über einen abgezählten
|
||||
Abstand, der bei der nächsten Schriftgröße nicht mehr stimmt. --}}
|
||||
<div>
|
||||
<span class="block text-sm font-medium" aria-hidden="true"> </span>
|
||||
<x-ui.button variant="primary" type="submit" class="mt-1.5 w-full sm:w-auto" wire:loading.attr="disabled" wire:target="addSeat">
|
||||
<x-ui.icon name="plus" class="size-4" />{{ __('users.add') }}
|
||||
</x-ui.button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-sm font-medium text-body" for="inviteName">{{ __('users.invite_name') }}</label>
|
||||
<input id="inviteName" type="text" wire:model="inviteName" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-sm font-medium text-body" for="inviteRole">{{ __('users.role') }}</label>
|
||||
<select id="inviteRole" wire:model="inviteRole" class="mt-1.5 rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
|
||||
<option value="admin">{{ __('users.role_admin') }}</option>
|
||||
<option value="member">{{ __('users.role_member') }}</option>
|
||||
<option value="readonly">{{ __('users.role_readonly') }}</option>
|
||||
</select>
|
||||
{{-- Der ehrliche Satz zu „Nur Lesen": die Rolle nimmt den eigenen
|
||||
Speicherplatz weg, hebt aber eine Freigabe nicht auf. --}}
|
||||
<p class="mt-1 text-xs text-muted">{{ __('users.role_readonly_means') }}</p>
|
||||
</div>
|
||||
<x-ui.button variant="primary" type="submit" wire:loading.attr="disabled" wire:target="addSeat">
|
||||
<x-ui.icon name="plus" class="size-4" />{{ __('users.add') }}
|
||||
</x-ui.button>
|
||||
|
||||
@error('inviteEmail')<p class="mt-2 text-xs text-danger">{{ $message }}</p>@enderror
|
||||
|
||||
{{-- Nur zur Rolle, die wirklich gewählt ist. Der Satz stand vorher
|
||||
immer da und beschrieb „Nur Lesen", während „Mitglied" ausgewählt
|
||||
war — eine Erklärung zu etwas, das gar nicht passiert. --}}
|
||||
@if ($inviteRole === 'readonly')
|
||||
<p class="mt-2 text-xs text-muted">{{ __('users.role_readonly_means') }}</p>
|
||||
@endif
|
||||
</form>
|
||||
|
||||
{{-- Der Mailversand fehlt: gesagt, bevor jemand drückt.
|
||||
|
|
|
|||
Loading…
Reference in New Issue