Changed containering, cards align better to space now
This commit is contained in:
Ano-sys
@@ -9,130 +9,138 @@
|
||||
</div>
|
||||
|
||||
<div class="admin-panel-grid">
|
||||
<section class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 card-title">Guest access</h2>
|
||||
<p class="text-secondary">Change the code guests use to view the list.</p>
|
||||
<div class="admin-panel-column">
|
||||
<section class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<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">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="guest-access-code">New guest access code</label>
|
||||
<input id="guest-access-code" class="form-control" name="guestAccessCode" />
|
||||
</div>
|
||||
<form method="post" action="/admin/guest-access-code">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="guest-access-code">New guest access code</label>
|
||||
<input id="guest-access-code" class="form-control" name="guestAccessCode" />
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Update guest access code
|
||||
</button>
|
||||
</form>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Update guest access code
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(AccessCodeMessage))
|
||||
{
|
||||
<div class="alert alert-info mt-3 mb-0" role="alert">@AccessCodeMessage</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
@if (!string.IsNullOrWhiteSpace(AccessCodeMessage))
|
||||
{
|
||||
<div class="alert alert-info mt-3 mb-0" role="alert">@AccessCodeMessage</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 card-title">Create maintainer</h2>
|
||||
<p class="text-secondary">Maintainers can add, edit and delete guests.</p>
|
||||
<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/maintainers/create">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="maintainer-username">Username</label>
|
||||
<input id="maintainer-username" class="form-control" name="username" />
|
||||
</div>
|
||||
<form method="post" action="/admin/reset-setup">
|
||||
<button type="submit" class="btn btn-outline-danger">
|
||||
Reset setup
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="maintainer-name">Name</label>
|
||||
<input id="maintainer-name" class="form-control" name="displayName" />
|
||||
</div>
|
||||
@if (!string.IsNullOrWhiteSpace(Message))
|
||||
{
|
||||
<div class="alert alert-warning mt-3 mb-0" role="alert">@Message</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="maintainer-password">Password</label>
|
||||
<input id="maintainer-password" class="form-control" type="password" name="password" />
|
||||
</div>
|
||||
<div class="admin-panel-column">
|
||||
<section class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<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">
|
||||
Create maintainer
|
||||
</button>
|
||||
</form>
|
||||
<form method="post" action="/admin/maintainers/create">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="maintainer-username">Username</label>
|
||||
<input id="maintainer-username" class="form-control" name="username" />
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(MaintainerMessage))
|
||||
{
|
||||
<div class="alert alert-info mt-3 mb-0" role="alert">@MaintainerMessage</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="maintainer-name">Name</label>
|
||||
<input id="maintainer-name" class="form-control" name="displayName" />
|
||||
</div>
|
||||
|
||||
<section class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 card-title">Maintainers</h2>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="maintainer-password">Password</label>
|
||||
<input id="maintainer-password" class="form-control" type="password" name="password" />
|
||||
</div>
|
||||
|
||||
@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>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Create maintainer
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(MaintainerMessage))
|
||||
{
|
||||
<div class="alert alert-info mt-3 mb-0" role="alert">@MaintainerMessage</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="admin-panel-column">
|
||||
<section class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<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>
|
||||
<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>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<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>
|
||||
<div class="admin-panel-column">
|
||||
<section class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<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">
|
||||
<button type="submit" class="btn btn-outline-primary">
|
||||
Complete setup recovery
|
||||
</button>
|
||||
</form>
|
||||
<form method="post" action="/admin/setup-recovery">
|
||||
<button type="submit" class="btn btn-outline-primary">
|
||||
Complete setup recovery
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(RecoveryMessage))
|
||||
{
|
||||
<div class="alert alert-info mt-3 mb-0" role="alert">@RecoveryMessage</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
@if (!string.IsNullOrWhiteSpace(RecoveryMessage))
|
||||
{
|
||||
<div class="alert alert-info mt-3 mb-0" role="alert">@RecoveryMessage</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -59,7 +59,7 @@ else if (!FilteredGuestEntries.Any())
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="guest-card-grid">
|
||||
<div class="guest-card-grid guest-masonry-grid">
|
||||
@foreach (var guest in FilteredGuestEntries)
|
||||
{
|
||||
<article class="card shadow-sm">
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<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">
|
||||
<div class="card-body">
|
||||
<h2 class="h5 card-title">Add guest</h2>
|
||||
|
||||
@@ -35,7 +35,14 @@ a, .btn-link {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -56,6 +63,21 @@ a, .btn-link {
|
||||
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 {
|
||||
min-height: calc(100vh - 160px);
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user