AfRA/AfRApay
3
0
Fork 0
Code Issues 7 Pull requests Packages Projects Releases Wiki Activity

Add alternate button layout for mobile.

Browse source
This commit is contained in:
Lilian 2023-02-06 20:14:11 +01:00
parent b453c64a13
commit 465b5f686a
Signed by: enbyfoxen
GPG key ID: 007CA12D692829E1
1 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
AfRApay.Web/Pages/Index.cshtml
View file

@ -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&euro;</a>
<a class="btn btn-sm btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
<a class="btn btn-sm btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</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&euro;</a>
<a class="btn btn-md btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
<a class="btn btn-md btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</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>
}