t/Guestlist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Guest management does not flood first row with guests anymore

Browse Source
This commit is contained in:
Ano-sys
2026-05-14 19:17:49 +02:00
parent 4a38c2ebdf
commit 9c027f7d5f
2 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Guestlist/Components/Pages/Guests.razor
+23 -21
View File
@@ -29,28 +29,30 @@
<div class="alert alert-warning" role="alert">@ErrorMessage</div>
}
<article class="card shadow-sm guest-add-card">
<div class="card-body">
<h2 class="h5 card-title">Add guest</h2>
<form method="post" action="/guests/add">
<div class="mb-3">
<label class="form-label" for="new-guest-name">Name</label>
<input id="new-guest-name" class="form-control" name="name" />
</div>
<div class="mb-3">
<label class="form-label" for="new-guest-notes">Notes</label>
<textarea id="new-guest-notes" class="form-control" rows="3" name="notes"></textarea>
</div>
<button type="submit" class="btn btn-primary">
Add guest
</button>
</form>
</div>
</article>
<h2 class="h5 mt-4 mb-3">Current Guests</h2>
<div class="guest-card-grid guest-masonry-grid">
<article class="card shadow-sm">
<div class="card-body">
<h2 class="h5 card-title">Add guest</h2>
<form method="post" action="/guests/add">
<div class="mb-3">
<label class="form-label" for="new-guest-name">Name</label>
<input id="new-guest-name" class="form-control" name="name" />
</div>
<div class="mb-3">
<label class="form-label" for="new-guest-notes">Notes</label>
<textarea id="new-guest-notes" class="form-control" rows="3" name="notes"></textarea>
</div>
<button type="submit" class="btn btn-primary w-100">
Add guest
</button>
</form>
</div>
</article>
@if (GuestEntries is null)
{
<article class="card shadow-sm">
Guestlist/wwwroot/app.css
+8
View File
@@ -42,17 +42,20 @@ a, .btn-link {
gap: 1rem;
}
.guest-add-card,
.admin-panel-grid > .card,
.admin-panel-column > .card {
border-radius: 8px;
}
.guest-add-card,
.guest-card-grid > .card,
.admin-panel-grid > .card,
.admin-panel-column > .card {
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.guest-add-card:focus-within,
.guest-card-grid > .card:focus-within,
.admin-panel-grid > .card:focus-within,
.admin-panel-column > .card:focus-within {
@@ -61,6 +64,7 @@ a, .btn-link {
}
@media (hover: hover) and (pointer: fine) {
.guest-add-card:hover,
.guest-card-grid > .card:hover,
.admin-panel-grid > .card:hover,
.admin-panel-column > .card:hover {
@@ -70,6 +74,10 @@ a, .btn-link {
}
}
.guest-add-card {
width: 100%;
}
.guest-card-grid > .card {
flex: 0 1 auto;
width: fit-content;