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

Cards have hover effects now, fixed card size missmatch from previous commit

Browse Source
This commit is contained in:
Ano-sys
2026-05-14 19:13:42 +02:00
parent d06164eb51
commit 4a38c2ebdf
2 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Guestlist/Components/Pages/GuestList.razor
-1
View File
@@ -4,7 +4,6 @@
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4"> <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
<div> <div>
<h1 class="h2 mb-1">Guest list</h1> <h1 class="h2 mb-1">Guest list</h1>
<p class="text-secondary mb-0">Read-only access for guests.</p>
</div> </div>
<div class="d-flex flex-column flex-sm-row gap-3 w-100 w-md-auto"> <div class="d-flex flex-column flex-sm-row gap-3 w-100 w-md-auto">
Guestlist/wwwroot/app.css
+39 -9
View File
@@ -42,10 +42,34 @@ a, .btn-link {
gap: 1rem; gap: 1rem;
} }
.admin-panel-grid > .card,
.admin-panel-column > .card { .admin-panel-column > .card {
border-radius: 8px; border-radius: 8px;
} }
.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-card-grid > .card:focus-within,
.admin-panel-grid > .card:focus-within,
.admin-panel-column > .card:focus-within {
border-color: rgba(13, 110, 253, 0.35);
box-shadow: 0 0.5rem 1.25rem rgba(33, 37, 41, 0.12) !important;
}
@media (hover: hover) and (pointer: fine) {
.guest-card-grid > .card:hover,
.admin-panel-grid > .card:hover,
.admin-panel-column > .card:hover {
border-color: rgba(13, 110, 253, 0.35);
box-shadow: 0 0.5rem 1.25rem rgba(33, 37, 41, 0.12) !important;
transform: translateY(-2px);
}
}
.guest-card-grid > .card { .guest-card-grid > .card {
flex: 0 1 auto; flex: 0 1 auto;
width: fit-content; width: fit-content;
@@ -64,18 +88,19 @@ a, .btn-link {
} }
.guest-masonry-grid { .guest-masonry-grid {
display: block; display: flex;
column-width: 22rem; flex-wrap: wrap;
column-gap: 1rem; gap: 1rem;
align-items: flex-start;
} }
.guest-masonry-grid > .card { .guest-masonry-grid > .card {
display: inline-block; display: flex;
width: 100%; flex: 0 1 auto;
min-width: 0; width: fit-content;
max-width: none; min-width: min(100%, 14rem);
margin: 0 0 1rem; max-width: min(100%, 22rem);
break-inside: avoid; margin: 0;
} }
.auth-shell { .auth-shell {
@@ -105,6 +130,11 @@ a, .btn-link {
width: 100%; width: 100%;
max-width: none; max-width: none;
} }
.guest-masonry-grid > .card {
width: 100%;
max-width: none;
}
} }
h1:focus { h1:focus {