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
|
@using AfRApay.Web.Backend
|
||||||
@model IndexModel
|
@model IndexModel
|
||||||
@{
|
@{
|
||||||
|
@ -60,14 +60,31 @@
|
||||||
<td>
|
<td>
|
||||||
<b>@db.Cards.Count(p => p.UserId == user.Id)</b> cards linked.
|
<b>@db.Cards.Count(p => p.UserId == user.Id)</b> cards linked.
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td> <!-- Displayed when in big layout -->
|
||||||
<div class="btn-group" role="group">
|
<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-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/5">+5€</a>
|
||||||
<a class="btn btn-sm btn-success" href="/UpdateBalance/@user.Id/10">+10€</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-secondary" href="/LinkCard/@user.Id">Link card</a>
|
||||||
<a class="btn btn-sm btn-primary" href="/EditUser/@user.Id">Edit</a>
|
<a class="btn btn-sm btn-primary" href="/EditUser/@user.Id">Edit</a>
|
||||||
</div>
|
</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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue