troogs/fs-onboarding
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
FoodsharingSiegen.Server/Dialogs/ViewImagesDialog.razor
View File

@@ -7,7 +7,11 @@
<Button Color="Color.Secondary" Class="position-absolute start-0 top-0 m-2 z-3 text-white bg-dark border-0 rounded-circle w-40px h-40px fs-4 lh-1" Clicked="() => SelectedImageIndex = null">
<i class="fa-solid fa-close"></i>
</Button>
<a href="@(_images[SelectedImageIndex.Value])" target="_blank" download>
<img src="@(_images[SelectedImageIndex.Value])" class="img-fluid rounded" style="max-height: 80vh;" />
</a>
<div class="d-flex justify-content-between position-absolute top-50 start-0 w-100">
<Button Color="Color.Dark" Class="rounded-circle" Disabled="@(SelectedImageIndex.Value == 0)" Clicked="() => SelectedImageIndex--"><i class="fa-solid fa-chevron-left"></i></Button>
<Button Color="Color.Dark" Class="rounded-circle" Disabled="@(SelectedImageIndex.Value == _images.Count - 1)" Clicked="() => SelectedImageIndex++"><i class="fa-solid fa-chevron-right"></i></Button>

2
FoodsharingSiegen.Server/Pages/ForgotPassword.razor
View File

@@ -6,7 +6,7 @@
<PageTitle>@AppSettings.Terms.Title - Passwort vergessen</PageTitle>
<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
<div class="d-flex justify-content-center align-items-center-sm" style="min-height: 100vh; align-items: start;">
<div class="card shadow border-0" style="width: 100%; max-width: 420px; border-radius: 12px; margin: 1rem;">
<div class="card-body p-4 p-md-5">

2
FoodsharingSiegen.Server/Pages/Login.razor
View File

@@ -6,7 +6,7 @@
<PageTitle>@AppSettings.Terms.Title - Login</PageTitle>
<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
<div class="d-flex justify-content-center align-items-center-sm" style="min-height: 100vh; align-items: start;">
<div class="card shadow border-0" style="width: 100%; max-width: 420px; border-radius: 12px; margin: 1rem;">
<div class="card-body p-4 p-md-5">

2
FoodsharingSiegen.Server/Pages/ResetPassword.razor
View File

@@ -6,7 +6,7 @@
<PageTitle>@AppSettings.Terms.Title - Neues Passwort setzen</PageTitle>
<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
<div class="d-flex justify-content-center align-items-center-sm" style="min-height: 100vh; align-items: start;">
<div class="card shadow border-0" style="width: 100%; max-width: 420px; border-radius: 12px; margin: 1rem;">
<div class="card-body p-4 p-md-5">

34
FoodsharingSiegen.Server/Pages/UploadVerification.razor
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">

8
FoodsharingSiegen.Server/wwwroot/css/_utilities.scss
View File

@@ -58,6 +58,14 @@ $spacers: (
margin-top: $size-val !important;
margin-bottom: $size-val !important;
}
.align-items-center#{$breakpoint} {
align-items: center !important;
}
.align-items-start#{$breakpoint} {
align-items: flex-start !important;
}
}
}