feat(frontend+backend): add theming to the blazor frontend
This commit is contained in:
@@ -8,22 +8,37 @@
|
||||
<PageTitle>Members</PageTitle>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>Members</h1>
|
||||
<a href="/members/create" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle"></i> Add Member
|
||||
<h1 class="nimbus-page-title">
|
||||
<i class="bi bi-people-fill me-3"></i>Members
|
||||
</h1>
|
||||
<a href="/members/create" class="btn btn-nimbus-primary">
|
||||
<i class="bi bi-person-plus-fill me-2"></i>Add Member
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if (loading)
|
||||
{
|
||||
<div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<div class="text-center py-5">
|
||||
<div class="spinner-border nimbus-spinner" role="status" style="width: 3rem; height: 3rem;">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-3 text-muted">Loading members...</p>
|
||||
</div>
|
||||
}
|
||||
else if (members.Any())
|
||||
{
|
||||
<!-- Filter Controls -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" @bind="showInactiveMembers" id="showInactiveCheck">
|
||||
<label class="form-check-label" for="showInactiveCheck">
|
||||
Show inactive members
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
@@ -50,18 +65,22 @@ else if (members.Any())
|
||||
<strong>@member.FullName</strong>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary">@member.ClassificationName</span>
|
||||
<span class="badge badge-nimbus-classification">@member.ClassificationName</span>
|
||||
</td>
|
||||
<td>@member.Email</td>
|
||||
<td>@member.PhoneNumber</td>
|
||||
<td>
|
||||
@if (member.IsActive == 1)
|
||||
{
|
||||
<span class="badge bg-success">Active</span>
|
||||
<span class="badge badge-nimbus-active">
|
||||
<i class="bi bi-check-circle-fill me-1"></i>Active
|
||||
</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="badge bg-danger">Inactive</span>
|
||||
<span class="badge badge-nimbus-inactive">
|
||||
<i class="bi bi-x-circle-fill me-1"></i>Inactive
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
@@ -77,17 +96,23 @@ else if (members.Any())
|
||||
<td>
|
||||
@if (member.DeclineStreak > 0)
|
||||
{
|
||||
<span class="badge bg-warning">@member.DeclineStreak</span>
|
||||
<span class="badge badge-nimbus-pending">
|
||||
<i class="bi bi-exclamation-triangle-fill me-1"></i>@member.DeclineStreak
|
||||
</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="text-muted">0</span>
|
||||
<span class="text-muted">—</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group" role="group">
|
||||
<a href="/members/@member.MemberId" class="btn btn-sm btn-outline-primary">View</a>
|
||||
<a href="/members/@member.MemberId/edit" class="btn btn-sm btn-outline-warning">Edit</a>
|
||||
<a href="/members/@member.MemberId" class="btn btn-sm btn-nimbus-secondary me-1">
|
||||
<i class="bi bi-eye-fill me-1"></i>View
|
||||
</a>
|
||||
<a href="/members/@member.MemberId/edit" class="btn btn-sm btn-outline-warning">
|
||||
<i class="bi bi-pencil-fill me-1"></i>Edit
|
||||
</a>
|
||||
<button class="btn btn-sm btn-outline-danger" @onclick="() => ConfirmDelete(member)">Delete</button>
|
||||
</div>
|
||||
</td>
|
||||
@@ -101,19 +126,12 @@ else if (members.Any())
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
Showing @filteredMembers.Count() of @members.Count members
|
||||
</small>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" @bind="showInactiveMembers" id="showInactive">
|
||||
<label class="form-check-label" for="showInactive">
|
||||
Show inactive members
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
Showing @filteredMembers.Count() of @members.Count members
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user