Add alternate button layout for mobile.
This commit is contained in:
parent
b453c64a13
commit
465b5f686a
|
@ -1,4 +1,4 @@
|
|||
@page
|
||||
@page
|
||||
@using AfRApay.Web.Backend
|
||||
@model IndexModel
|
||||
@{
|
||||
|
@ -60,14 +60,31 @@
|
|||
<td>
|
||||
<b>@db.Cards.Count(p => p.UserId == user.Id)</b> cards linked.
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group" role="group">
|
||||
<td> <!-- Displayed when in big layout -->
|
||||
<div class="d-none d-md-flex btn-group" role="group">
|
||||
<!-- Make sure these buttons match the small/mobile layout ones below -->
|
||||
<a class="btn btn-sm btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50€</a>
|
||||
<a class="btn btn-sm btn-success" href="/UpdateBalance/@user.Id/5">+5€</a>
|
||||
<a class="btn btn-sm btn-success" href="/UpdateBalance/@user.Id/10">+10€</a>
|
||||
<a class="btn btn-sm btn-secondary" href="/LinkCard/@user.Id">Link card</a>
|
||||
<a class="btn btn-sm btn-primary" href="/EditUser/@user.Id">Edit</a>
|
||||
</div>
|
||||
<!-- Displayed when in compact/phone layout -->
|
||||
<div class="dropdown d-md-none">
|
||||
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Actions
|
||||
</a>
|
||||
<div class="dropdown-menu p-1" aria-labelledby="dropdownMenuLink" style="min-width: max-content;"> <!-- Inline CSS, sets minimum width of drop down to maxium size of content -->
|
||||
<div class="d-grid gap-1">
|
||||
<!-- Make sure these buttons match the big layout ones above-->
|
||||
<a class="btn btn-md btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50€</a>
|
||||
<a class="btn btn-md btn-success" href="/UpdateBalance/@user.Id/5">+5€</a>
|
||||
<a class="btn btn-md btn-success" href="/UpdateBalance/@user.Id/10">+10€</a>
|
||||
<a class="btn btn-md btn-secondary" href="/LinkCard/@user.Id">Link card</a>
|
||||
<a class="btn btn-md btn-primary" href="/EditUser/@user.Id">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue