Changed containering, cards align better to space now
This commit is contained in:
Ano-sys
@@ -9,130 +9,138 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="admin-panel-grid">
|
<div class="admin-panel-grid">
|
||||||
<section class="card shadow-sm">
|
<div class="admin-panel-column">
|
||||||
<div class="card-body">
|
<section class="card shadow-sm">
|
||||||
<h2 class="h5 card-title">Guest access</h2>
|
<div class="card-body">
|
||||||
<p class="text-secondary">Change the code guests use to view the list.</p>
|
<h2 class="h5 card-title">Guest access</h2>
|
||||||
|
<p class="text-secondary">Change the code guests use to view the list.</p>
|
||||||
|
|
||||||
<form method="post" action="/admin/guest-access-code">
|
<form method="post" action="/admin/guest-access-code">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label" for="guest-access-code">New guest access code</label>
|
<label class="form-label" for="guest-access-code">New guest access code</label>
|
||||||
<input id="guest-access-code" class="form-control" name="guestAccessCode" />
|
<input id="guest-access-code" class="form-control" name="guestAccessCode" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary">
|
<button type="submit" class="btn btn-primary">
|
||||||
Update guest access code
|
Update guest access code
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@if (!string.IsNullOrWhiteSpace(AccessCodeMessage))
|
@if (!string.IsNullOrWhiteSpace(AccessCodeMessage))
|
||||||
{
|
{
|
||||||
<div class="alert alert-info mt-3 mb-0" role="alert">@AccessCodeMessage</div>
|
<div class="alert alert-info mt-3 mb-0" role="alert">@AccessCodeMessage</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="card shadow-sm">
|
<section class="card shadow-sm border-danger-subtle">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h2 class="h5 card-title">Create maintainer</h2>
|
<h2 class="h5 card-title">Reset setup</h2>
|
||||||
<p class="text-secondary">Maintainers can add, edit and delete guests.</p>
|
<p class="text-secondary">Copy the current database to a timestamped backup database and start setup with a fresh database.</p>
|
||||||
|
|
||||||
<form method="post" action="/admin/maintainers/create">
|
<form method="post" action="/admin/reset-setup">
|
||||||
<div class="mb-3">
|
<button type="submit" class="btn btn-outline-danger">
|
||||||
<label class="form-label" for="maintainer-username">Username</label>
|
Reset setup
|
||||||
<input id="maintainer-username" class="form-control" name="username" />
|
</button>
|
||||||
</div>
|
</form>
|
||||||
|
|
||||||
<div class="mb-3">
|
@if (!string.IsNullOrWhiteSpace(Message))
|
||||||
<label class="form-label" for="maintainer-name">Name</label>
|
{
|
||||||
<input id="maintainer-name" class="form-control" name="displayName" />
|
<div class="alert alert-warning mt-3 mb-0" role="alert">@Message</div>
|
||||||
</div>
|
}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="admin-panel-column">
|
||||||
<label class="form-label" for="maintainer-password">Password</label>
|
<section class="card shadow-sm">
|
||||||
<input id="maintainer-password" class="form-control" type="password" name="password" />
|
<div class="card-body">
|
||||||
</div>
|
<h2 class="h5 card-title">Create maintainer</h2>
|
||||||
|
<p class="text-secondary">Maintainers can add, edit and delete guests.</p>
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary">
|
<form method="post" action="/admin/maintainers/create">
|
||||||
Create maintainer
|
<div class="mb-3">
|
||||||
</button>
|
<label class="form-label" for="maintainer-username">Username</label>
|
||||||
</form>
|
<input id="maintainer-username" class="form-control" name="username" />
|
||||||
|
</div>
|
||||||
|
|
||||||
@if (!string.IsNullOrWhiteSpace(MaintainerMessage))
|
<div class="mb-3">
|
||||||
{
|
<label class="form-label" for="maintainer-name">Name</label>
|
||||||
<div class="alert alert-info mt-3 mb-0" role="alert">@MaintainerMessage</div>
|
<input id="maintainer-name" class="form-control" name="displayName" />
|
||||||
}
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="card shadow-sm">
|
<div class="mb-3">
|
||||||
<div class="card-body">
|
<label class="form-label" for="maintainer-password">Password</label>
|
||||||
<h2 class="h5 card-title">Maintainers</h2>
|
<input id="maintainer-password" class="form-control" type="password" name="password" />
|
||||||
|
</div>
|
||||||
|
|
||||||
@if (Maintainers is null)
|
<button type="submit" class="btn btn-primary">
|
||||||
{
|
Create maintainer
|
||||||
<p class="text-secondary mb-0">Loading maintainers...</p>
|
</button>
|
||||||
}
|
</form>
|
||||||
else if (Maintainers.Count == 0)
|
|
||||||
{
|
@if (!string.IsNullOrWhiteSpace(MaintainerMessage))
|
||||||
<p class="text-secondary mb-0">No maintainers have been created yet.</p>
|
{
|
||||||
}
|
<div class="alert alert-info mt-3 mb-0" role="alert">@MaintainerMessage</div>
|
||||||
else
|
}
|
||||||
{
|
</div>
|
||||||
<div class="list-group list-group-flush">
|
</section>
|
||||||
@foreach (var maintainer in Maintainers)
|
</div>
|
||||||
{
|
|
||||||
<div class="list-group-item px-0 d-flex align-items-center justify-content-between gap-3">
|
<div class="admin-panel-column">
|
||||||
<div>
|
<section class="card shadow-sm">
|
||||||
<div class="fw-semibold">@maintainer.DisplayName</div>
|
<div class="card-body">
|
||||||
<div class="small text-secondary">@maintainer.Username</div>
|
<h2 class="h5 card-title">Maintainers</h2>
|
||||||
|
|
||||||
|
@if (Maintainers is null)
|
||||||
|
{
|
||||||
|
<p class="text-secondary mb-0">Loading maintainers...</p>
|
||||||
|
}
|
||||||
|
else if (Maintainers.Count == 0)
|
||||||
|
{
|
||||||
|
<p class="text-secondary mb-0">No maintainers have been created yet.</p>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="list-group list-group-flush">
|
||||||
|
@foreach (var maintainer in Maintainers)
|
||||||
|
{
|
||||||
|
<div class="list-group-item px-0 d-flex align-items-center justify-content-between gap-3">
|
||||||
|
<div>
|
||||||
|
<div class="fw-semibold">@maintainer.DisplayName</div>
|
||||||
|
<div class="small text-secondary">@maintainer.Username</div>
|
||||||
|
</div>
|
||||||
|
<form method="post" action="/admin/maintainers/delete">
|
||||||
|
<input type="hidden" name="id" value="@maintainer.Id" />
|
||||||
|
<button type="submit" class="btn btn-outline-danger btn-sm">
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<form method="post" action="/admin/maintainers/delete">
|
}
|
||||||
<input type="hidden" name="id" value="@maintainer.Id" />
|
</div>
|
||||||
<button type="submit" class="btn btn-outline-danger btn-sm">
|
}
|
||||||
Delete
|
</div>
|
||||||
</button>
|
</section>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="card shadow-sm">
|
<div class="admin-panel-column">
|
||||||
<div class="card-body">
|
<section class="card shadow-sm">
|
||||||
<h2 class="h5 card-title">Setup recovery</h2>
|
<div class="card-body">
|
||||||
<p class="text-secondary">Use this after a partial setup if admin access exists but setup is incomplete.</p>
|
<h2 class="h5 card-title">Setup recovery</h2>
|
||||||
|
<p class="text-secondary">Use this after a partial setup if admin access exists but setup is incomplete.</p>
|
||||||
|
|
||||||
<form method="post" action="/admin/setup-recovery">
|
<form method="post" action="/admin/setup-recovery">
|
||||||
<button type="submit" class="btn btn-outline-primary">
|
<button type="submit" class="btn btn-outline-primary">
|
||||||
Complete setup recovery
|
Complete setup recovery
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@if (!string.IsNullOrWhiteSpace(RecoveryMessage))
|
@if (!string.IsNullOrWhiteSpace(RecoveryMessage))
|
||||||
{
|
{
|
||||||
<div class="alert alert-info mt-3 mb-0" role="alert">@RecoveryMessage</div>
|
<div class="alert alert-info mt-3 mb-0" role="alert">@RecoveryMessage</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
<section class="card shadow-sm border-danger-subtle">
|
|
||||||
<div class="card-body">
|
|
||||||
<h2 class="h5 card-title">Reset setup</h2>
|
|
||||||
<p class="text-secondary">Copy the current database to a timestamped backup database and start setup with a fresh database.</p>
|
|
||||||
|
|
||||||
<form method="post" action="/admin/reset-setup">
|
|
||||||
<button type="submit" class="btn btn-outline-danger">
|
|
||||||
Reset setup
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
@if (!string.IsNullOrWhiteSpace(Message))
|
|
||||||
{
|
|
||||||
<div class="alert alert-warning mt-3 mb-0" role="alert">@Message</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -59,7 +59,7 @@ else if (!FilteredGuestEntries.Any())
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div class="guest-card-grid">
|
<div class="guest-card-grid guest-masonry-grid">
|
||||||
@foreach (var guest in FilteredGuestEntries)
|
@foreach (var guest in FilteredGuestEntries)
|
||||||
{
|
{
|
||||||
<article class="card shadow-sm">
|
<article class="card shadow-sm">
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
<div class="alert alert-warning" role="alert">@ErrorMessage</div>
|
<div class="alert alert-warning" role="alert">@ErrorMessage</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="guest-card-grid">
|
<div class="guest-card-grid guest-masonry-grid">
|
||||||
<article class="card shadow-sm">
|
<article class="card shadow-sm">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h2 class="h5 card-title">Add guest</h2>
|
<h2 class="h5 card-title">Add guest</h2>
|
||||||
|
|||||||
@@ -35,7 +35,14 @@ a, .btn-link {
|
|||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-panel-grid > .card {
|
.admin-panel-column {
|
||||||
|
display: flex;
|
||||||
|
min-width: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-panel-column > .card {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -56,6 +63,21 @@ a, .btn-link {
|
|||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.guest-masonry-grid {
|
||||||
|
display: block;
|
||||||
|
column-width: 22rem;
|
||||||
|
column-gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-masonry-grid > .card {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
max-width: none;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
.auth-shell {
|
.auth-shell {
|
||||||
min-height: calc(100vh - 160px);
|
min-height: calc(100vh - 160px);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user