Make users table responsive (#3348)

This commit is contained in:
Umar Bolatov 2022-01-23 21:03:56 -08:00 committed by GitHub
parent 692b57a1ad
commit 30db0cd4f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -40,54 +40,55 @@
Add User Add User
</a> </a>
</div> </div>
<div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover">
<thead> <thead>
<tr>
<th>
<a
asp-action="ListUsers"
asp-route-sortOrder="@(nextUserEmailSortOrder ?? "asc")"
class="text-nowrap"
title="@(nextUserEmailSortOrder == "desc" ? sortByAsc : sortByDesc)"
>
Email
<span class="fa @(sortIconClass)" />
</a>
</th>
<th>Created</th>
<th>Verified</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
@foreach (var user in Model.Users)
{
<tr> <tr>
<td class="d-flex align-items-center"> <th>
<span class="me-2">@user.Email</span> <a
@foreach (var role in user.Roles) asp-action="ListUsers"
{ asp-route-sortOrder="@(nextUserEmailSortOrder ?? "asc")"
<span class="badge bg-info">@Model.Roles[role]</span> class="text-nowrap"
} title="@(nextUserEmailSortOrder == "desc" ? sortByAsc : sortByDesc)"
</td> >
<td>@user.Created?.ToBrowserDate()</td> Email
<td class="text-center"> <span class="fa @(sortIconClass)" />
@if (user.Verified) </a>
{ </th>
<span class="text-success fa fa-check"></span> <th>Created</th>
} <th>Verified</th>
else <th class="text-end">Actions</th>
{
<span class="text-danger fa fa-times"></span>
}
</td>
<td class="text-end">
<a asp-action="User" asp-route-userId="@user.Id">Edit</a> <span> - </span> <a asp-action="DeleteUser" asp-route-userId="@user.Id">Remove</a>
</td>
</tr> </tr>
} </thead>
</tbody> <tbody>
</table> @foreach (var user in Model.Users)
{
<tr>
<td class="d-flex align-items-center">
<span class="me-2">@user.Email</span>
@foreach (var role in user.Roles)
{
<span class="badge bg-info">@Model.Roles[role]</span>
}
</td>
<td>@user.Created?.ToBrowserDate()</td>
<td class="text-center">
@if (user.Verified)
{
<span class="text-success fa fa-check"></span>
}
else
{
<span class="text-danger fa fa-times"></span>
}
</td>
<td class="text-end">
<a asp-action="User" asp-route-userId="@user.Id">Edit</a> <span> - </span> <a asp-action="DeleteUser" asp-route-userId="@user.Id">Remove</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<vc:pager view-model="Model"></vc:pager> <vc:pager view-model="Model"></vc:pager>