Enhance layout styles: update alignment classes for improved responsiveness and add utility classes for alignment

This commit is contained in:
a.beging@eas-solutions.de
2026-04-23 14:09:41 +02:00
parent 8ad6a143de
commit cb3a2ae042
6 changed files with 33 additions and 21 deletions

View File

@@ -5,7 +5,7 @@
<PageTitle>Identitätsprüfung - @AppSettings.Value.Terms.Title</PageTitle>
<div class="row min-vh-100 align-items-center justify-content-center p-0 p-md-5 m-0">
<div class="row min-vh-100 align-items-center-sm justify-content-center p-0 p-md-5 m-0">
<div class="col-12 col-md-10 col-lg-8 col-xl-5 login-form p-2">
<div class="card shadow-sm border-0">
<div class="card-body p-3 p-md-5">
@@ -38,6 +38,22 @@
<strong>Hinweis:</strong> Dies ist die Upload-Seite für Foodsaver <b>@_prospect.FsId</b>.
</div>
<div class="mb-3 text-center">
@if (_uploadedCount >= 5)
{
<div class="alert alert-warning py-2 mb-0">Du hast die maximale Anzahl von 5 Bildern erreicht.</div>
}
else
{
<InputFile id="fileInput" OnChange="OnInputFileChange" class="d-none" accept="image/*" />
<label for="fileInput" class="btn btn-outline-success w-100" style="height: 5rem;">
<i class="fa-solid fa-images me-2"></i>Bild auswählen
</label>
<span class="badge bg-secondary mt-2 text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder hochgeladen werden</span>
}
</div>
<div class="mb-1 text-muted">
Um dich auf der Foodsharing-Plattform als Foodsaver freischalten zu können, muss ein*e Botschafter*in Name, Adresse und Geburtsdatum im Profil des Foodsavers auf Korrektheit durch Vergleich mit einem Ausweisdokument prüfen. Das ist wichtig, damit die <a href="https://wiki.foodsharing.network/wiki/Rechtsvereinbarung" target="_blank">Rechtsvereinbarung</a> Bestand hat und wir die Zusagen erfüllen, die wir den Spenderbetrieben geben.<br>
</div>
@@ -58,22 +74,6 @@
</ul>
</div>
<div class="mb-4 text-center">
@if (_uploadedCount >= 5)
{
<div class="alert alert-warning py-2 mb-0">Du hast die maximale Anzahl von 5 Bildern erreicht.</div>
}
else
{
<span class="badge bg-secondary mb-2 text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder hochgeladen werden</span>
<InputFile id="fileInput" OnChange="OnInputFileChange" class="d-none" accept="image/*" />
<label for="fileInput" class="btn btn-outline-success w-100">
<i class="fa-solid fa-images me-2"></i>Bild auswählen
</label>
}
</div>
@if (_isUploading)
{
<div class="text-center my-3">