Refactor: wrap form labels in a div.col-sm-3 for improved layout and styling consistency.

This commit is contained in:
2026-02-26 17:25:38 +01:00
parent f42c3fe9f2
commit 5f2e7a9b56

View File

@@ -13,17 +13,19 @@
<form @ref="form" class="@(validated ? " was-validated" : "needs-validation" )" novalidate> <form @ref="form" class="@(validated ? " was-validated" : "needs-validation" )" novalidate>
<div class="container"> <div class="container">
<div class="row mb-3 align-items-center"> <div class="row mb-3 align-items-center">
<Label Class="col-sm-3 col-form-label" For="name" HelpText="Gib deinen Namen ein" ResourceKey="Name">Name: <div class="col-sm-3">
</Label> <Label For="name" HelpText="Gib deinen Namen ein" ResourceKey="Name">Name:</Label>
</div>
<div class="col-sm-9"> <div class="col-sm-9">
<input id="name" class="form-control" @bind="@_name" required maxlength="120" /> <input id="name" class="form-control" @bind="@_name" required maxlength="120" />
<div class="invalid-feedback">Bitte gib einen Namen ein (max. 120 Zeichen).</div> <div class="invalid-feedback">Bitte gib einen Namen ein (max. 120 Zeichen).</div>
</div> </div>
</div> </div>
<div class="row mb-3 align-items-center"> <div class="row mb-3 align-items-center">
<Label Class="col-sm-3 col-form-label" For="year" <div class="col-sm-3">
HelpText="Gib das Jahr ein, in dem du die Matura abgeschlossen hast (z.B. 2020)" <Label For="year" HelpText="Gib das Jahr ein, in dem du die Matura abgeschlossen hast (z.B. 2020)"
ResourceKey="Year">Jahrgang: </Label> ResourceKey="Year">Jahrgang: </Label>
</div>
<div class="col-sm-9"> <div class="col-sm-9">
<input id="year" type="number" class="form-control" @bind="@_year" required min="1900" <input id="year" type="number" class="form-control" @bind="@_year" required min="1900"
max="@Int32.MaxValue" /> max="@Int32.MaxValue" />
@@ -31,8 +33,10 @@
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<Label Class="col-sm-3 col-form-label" For="description" HelpText="Kurzbeschreibung / Werdegang" <div class="col-sm-3">
ResourceKey="Description">Beschreibung: </Label> <Label For="description" HelpText="Kurzbeschreibung / Werdegang" ResourceKey="Description">Beschreibung:
</Label>
</div>
<div class="col-sm-9"> <div class="col-sm-9">
@if (_descriptionLoaded) @if (_descriptionLoaded)
{ {
@@ -42,8 +46,9 @@
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<Label Class="col-sm-3 col-form-label" For="image" HelpText="Porträtfoto hochladen (JPG/PNG)" <div class="col-sm-3">
ResourceKey="Image">Foto: </Label> <Label For="image" HelpText="Porträtfoto hochladen (JPG/PNG)" ResourceKey="Image">Foto: </Label>
</div>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="mb-2"> <div class="mb-2">
@if (!string.IsNullOrEmpty(_image)) @if (!string.IsNullOrEmpty(_image))
@@ -79,15 +84,18 @@
</div> </div>
</div> </div>
<div class="row mb-3 align-items-center"> <div class="row mb-3 align-items-center">
<Label Class="col-sm-3 col-form-label" For="link" HelpText="Externer Link (optional)" <div class="col-sm-3">
ResourceKey="Link">Link: </Label> <Label For="link" HelpText="Externer Link (optional)" ResourceKey="Link">Link: </Label>
</div>
<div class="col-sm-9"> <div class="col-sm-9">
<input id="link" type="url" class="form-control" @bind="@_link" placeholder="https://" /> <input id="link" type="url" class="form-control" @bind="@_link" placeholder="https://" />
<div class="invalid-feedback">Bitte gib eine gültige URL ein (startet mit http:// oder https://).</div> <div class="invalid-feedback">Bitte gib eine gültige URL ein (startet mit http:// oder https://).</div>
</div> </div>
</div> </div>
<div class="row mb-3 align-items-center"> <div class="row mb-3 align-items-center">
<Label Class="col-sm-3 col-form-label" For="status" HelpText="Status" ResourceKey="Status">Status: </Label> <div class="col-sm-3">
<Label For="status" HelpText="Status" ResourceKey="Status">Status: </Label>
</div>
<div class="col-sm-9"> <div class="col-sm-9">
<p>Aktuell: <strong>@(_status ?? "Neu")</strong></p> <p>Aktuell: <strong>@(_status ?? "Neu")</strong></p>
</div> </div>