From 465b5f686ac82871cb5fac0302cc91fdb4763084 Mon Sep 17 00:00:00 2001
From: Lilian <lilian@blahaj.space>
Date: Mon, 6 Feb 2023 20:14:11 +0100
Subject: [PATCH] Add alternate button layout for mobile.

---
 AfRApay.Web/Pages/Index.cshtml | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/AfRApay.Web/Pages/Index.cshtml b/AfRApay.Web/Pages/Index.cshtml
index ba04fbb..06c9b38 100644
--- a/AfRApay.Web/Pages/Index.cshtml
+++ b/AfRApay.Web/Pages/Index.cshtml
@@ -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>
 		}