refactor: increase size of round action buttons on small screens

Tarow · Dec 27, 2023 · e499b28 · e499b28
1 parent 575ecc2
commit e499b28
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 58 deletions.
diff --git a/templates/components/rounds_list.templ b/templates/components/rounds_list.templ
@@ -14,27 +14,27 @@ templ RoundsList(game skat.Game) {
 						<th>{ player.Name }</th>
 					}
 					<th>Value</th>
-					<th>Action</th>
+					<th></th>
 				</tr>
 			</thead>
 			<tbody>
 				for i, round := range game.Rounds {
 					<tr class="text-center">
-						<td>{ fmt.Sprintf("%v", i+1) }</td>
+						<td class="text-xs">{ fmt.Sprintf("%v", i+1) }</td>
 						for _, player := range game.Players {
 							<td>{ formatRoundScore(round.GetRoundScore(player)) }</td>
 						}
 						<td>{ fmt.Sprintf("%v", round.Value) }</td>
 						<td>
-							<ul class="menu menu-xs menu-horizontal  rounded-box">
+							<ul class="menu menu-xs menu-horizontal rounded-box">
 								<li>
 									<a
  										hx-get={ fmt.Sprintf("/games/%v/rounds/%v", game.ID, round.ID) }
  										hx-swap="innerHTML"
  										hx-target="#edit_round_form"
  										_="on htmx:afterSwap from #edit_round_form call edit_round_modal.showModal()"
 									>
-										<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+										<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 sm:w-6 sm:h-6 md:w-4 md:h-4" 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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"></path>
 										</svg>
 									</a>
@@ -45,7 +45,7 @@ templ RoundsList(game skat.Game) {
  										hx-swap="outerHTML"
  										hx-target="closest body"
 									>
-										<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+										<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 sm:w-6 sm:h-6 md:w-4 md:h-4" 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>
 										</svg>
 									</a>

diff --git a/templates/components/rounds_list_templ.go b/templates/components/rounds_list_templ.go