feat: improve mobile ui

Tarow · Dec 30, 2023 · 881c1d2 · 881c1d2
1 parent 3fdac1f
commit 881c1d2
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 46 deletions.
diff --git a/templates/GameDetails.templ b/templates/GameDetails.templ
@@ -16,17 +16,22 @@ templ GameDetailsNavbar() {
 	</div>
 }
 
+
+const poll = false
+
 templ GameDetails (game skat.Game) {
 	@Base() {
-		<div hx-get={ fmt.Sprintf("/games/%v", game.ID) } hx-trigger="every 10s" hx-swap="none" hx-select-oob="#gamecard:outerHTML,#roundlist:outerHTML"></div>
+		if poll {
+			<div hx-get={ fmt.Sprintf("/games/%v", game.ID) } hx-trigger="every 10s" hx-swap="none" hx-select-oob="#gamecard:outerHTML,#roundlist:outerHTML"></div>
+		}
 		@GameDetailsNavbar()
 		<div class="container flex p-2  pt-4 mx-auto">
-			<div class="flex w-full flex-row flex-wrap-reverse gap-8 justify-around items-end">
-				<div id="roundlist" class=" justify-center">
-					<div class="hidden sm:flex justify-center">
+			<div class="flex w-full flex-row flex-wrap-reverse justify-around gap-8 items-end">
+				<div id="roundlist">
+					<div class="hidden sm:flex">
 						@component.RoundsTable(game)
 					</div>
-					<div class="sm:hidden flex w-full justify-center">
+					<div class="sm:hidden flex">
 						@component.RoundGrid(game)
 					</div>
 				</div>

diff --git a/templates/GameDetails_templ.go b/templates/GameDetails_templ.go
diff --git a/templates/base.templ b/templates/base.templ
@@ -15,7 +15,7 @@ templ Base() {
 			<script src="/static/theme-change.js"></script>
 			<script src="/static/sweetalert2.js"></script>
 		</head>
-		<body id="content">
+		<body  id="content">
 			{ children... }
 			@initSortable()
 			@initThemeChange()

diff --git a/templates/components/game_card.templ b/templates/components/game_card.templ
@@ -15,7 +15,7 @@ templ GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) {
 				}
 			</div>
 		</div>
-		<div class="card-body pt-5">
+		<div class="card-body justify-between pt-5">
 			<h2 class="card-title">{ game.GetDate() }</h2>
 			<div class="grid grid-cols-8 gap-y-3 items-center pt-3">
 				<div class="col-span-1">
@@ -81,9 +81,10 @@ templ GameCard(game skat.Game, detailsBtn, editBtn, deleteBtn bool) {
  						class="btn"
  						hx-delete={ fmt.Sprintf("/games/%v", game.ID) }
  						hx-target="#content"
+						hx-swap="outerHTML"
  						hx-trigger="confirmed"
  						_="on click call Swal.fire({title: 'Are you sure?', text:'Deletion cannot be undone', icon: 'question', showCancelButton: true, width: 300})
-            		if result.isConfirmed trigger confirmed"
+            		if result.isConfirmed remove .swal2-shown from #content then trigger confirmed"
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
 							<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>

diff --git a/templates/components/game_card_templ.go b/templates/components/game_card_templ.go
diff --git a/templates/components/rounds_grid.templ b/templates/components/rounds_grid.templ
@@ -5,15 +5,15 @@ import "github.com/tarow/skat-counter/internal/skat/gen/model"
 import "fmt"
 
 templ RoundEntry(players []model.Player, round skat.Round, roundNumber int) {
-	<div class="card-body p-4 ">
-		<div class="card-actions flex flex-row justify-between items-center pb-3">
+	<div class="card-body p-4">
+		<div class="card-actions justify-between items-center pb-3">
 			<div class="avatar placeholder flex-1">
 				<div class="w-10 rounded-full bg-neutral text-neutral-content">
 					<span>{ toString(round.Value) }</span>
 				</div>
 			</div>
-			<h3 class="flex-1 justify-center card-title">Round { toString(roundNumber + 1) }</h3>
-			<div class="flex flex-row flex-wrap justify-end items-center flex-1">
+			<h3 class="card-title justify-center flex-1">Round { toString(roundNumber + 1) }</h3>
+			<div class="flex flex-row flex-1 flex-wrap justify-end items-center">
 				<button
  					class="btn btn-ghost btn-sm btn-square"
  					hx-get={ fmt.Sprintf("/games/%v/rounds/%v", round.GameID, round.ID) }
@@ -31,7 +31,7 @@ templ RoundEntry(players []model.Player, round skat.Round, roundNumber int) {
  					hx-target="#content"
  					hx-trigger="confirmed"
  					_="on click call Swal.fire({title: 'Are you sure?', text:'Deletion cannot be undone', icon: 'question', showCancelButton: true, width: 300})
-            					 if result.isConfirmed trigger confirmed"
+            		   if result.isConfirmed remove .swal2-shown from #content then trigger confirmed"
 				>
 					<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 " fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 						<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>
@@ -48,7 +48,7 @@ templ RoundEntry(players []model.Player, round skat.Round, roundNumber int) {
 }
 
 templ TotalEntry(game skat.Game) {
-	<div class="card-body  p-0">
+	<div class="card-body p-0">
 		<div class="card-actions flex flex-row justify-between items-center  pl-4 pt-4  pb-3">
 			<div class="flex-1 justify-start">
 				<div class="w-fit p-3 rounded-full bg-neutral text-neutral-content">{ toString(game.FormatTotalPayment()) }</div>
@@ -71,17 +71,20 @@ templ TotalEntry(game skat.Game) {
 }
 
 templ RoundGrid(game skat.Game) {
-	<div class="card bg-base-200 shadow-xl">
-		<div class=" flex flex-row flex-wrap  justify-center">
+	<div class="card bg-base-200 shadow-xl ">
+	<div class="max-h-[50dvh] overflow-scroll">
 			for idx, round := range game.Rounds {
-				<div class="w-72">
+				<div >
 					@RoundEntry(game.Players, round, idx)
-					<div class="divider -mb-3"></div>
+					if idx != len(game.Rounds)-1 {
+						<div class="divider m-0"></div>
+					}
 				</div>
 			}
-		</div>
-		<div class="self-center">
-			@TotalEntry(game)
-		</div>
+			</div>
+		if len(game.Rounds) > 0{
+			<div class="divider m-0"></div>
+		}
+		@TotalEntry(game)
 	</div>
 }
diff --git a/templates/components/rounds_grid_templ.go b/templates/components/rounds_grid_templ.go
diff --git a/templates/components/rounds_table.templ b/templates/components/rounds_table.templ
@@ -44,7 +44,7 @@ templ RoundsTable(game skat.Game) {
  									hx-target="#content"
  									hx-trigger="confirmed"
  									_="on click call Swal.fire({title: 'Are you sure?', text:'Deletion cannot be undone', icon: 'question', showCancelButton: true, width: 300})
-            					 if result.isConfirmed trigger confirmed"
+            					 if result.isConfirmed remove .swal2-shown from #content trigger confirmed"
 								>
 									<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 sm:w-5 sm:h-5 " fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 										<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>