From 2580b01d8341e80314ab12f55471d327ebfe5025 Mon Sep 17 00:00:00 2001
From: Arthur Branchu-Harel <arthur.branchuharel@gmail.com>
Date: Fri, 16 Feb 2024 17:38:00 +0100
Subject: [PATCH] fix group layout

---
 src/components/GroupTable.vue  | 46 +++++++++++++++++++++-------------
 src/views/TournamentDetail.vue |  6 ++---
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/components/GroupTable.vue b/src/components/GroupTable.vue
index ab2a263..0e03798 100644
--- a/src/components/GroupTable.vue
+++ b/src/components/GroupTable.vue
@@ -10,22 +10,32 @@ const get_validated_team_by_id = (id: number) => props.teams.validated_teams.fin
 
 </script>
 <template>
-    <table :key="group.id" border="1" class="text-3xl text-bold border-collapse border border-slate-500 hover:border-4">
-        <thead>
-            <tr>
-            <th colspan="2" class="text-black bg-slate-400">{{ group.name }}</th>
-            </tr>
-            <tr>
-            <th align="center" class="border-separate border border-slate-500 troncate bg-slate-200 text-black">Equipe</th>
-            <th align="center" class="border-separate border border-slate-500 bg-slate-200 text-black">Score</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="team_id in group.teams" :key="team_id">
-            <td align="center" class="border-separate border border-slate-500">{{
-                get_validated_team_by_id(team_id)?.name }}</td>
-            <td align="center" class="border-separate border border-slate-500">{{group.scores[team_id]}}</td>
-            </tr>
-        </tbody>
-    </table>
+  <table :key="group.id" border="1" class="text-bold text-3xl">
+    <thead>
+      <tr>
+        <th colspan="2" class="bg-slate-400 p-3 text-black">
+          {{ group.name }}
+        </th>
+      </tr>
+      <tr>
+        <th align="center" class="troncate border-separate border border-slate-500 bg-slate-200 p-4 text-black">
+          Equipe
+        </th>
+        <th align="center" class="border-separate border border-slate-500 bg-slate-200 p-4 text-black">
+          Score
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="team_id in group.teams" :key="team_id">
+        <td align="center" class="border-separate border border-slate-500 p-4">
+          {{
+            get_validated_team_by_id(team_id)?.name }}
+        </td>
+        <td align="center" class="border-separate border border-slate-500 p-4">
+          {{ group.scores[team_id] }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </template>
diff --git a/src/views/TournamentDetail.vue b/src/views/TournamentDetail.vue
index e2a80cf..f1477c1 100755
--- a/src/views/TournamentDetail.vue
+++ b/src/views/TournamentDetail.vue
@@ -347,12 +347,12 @@ onMounted(async () => {
       </div>
     </section>
 
-    <section id="groups" :class="{ hidden: !sections.groups[0] || show_detail_group }">
+    <section id="groups" :class="{ hidden: !sections.groups[0] || show_detail_group }" class="flex content-center justify-center">
       <h1 v-if="tournament?.groups.length === 0 && tournament?.swissRounds.length === 0" class="mt-6 text-center text-4xl">
         Les poules ou les rondes suisse ne sont pas disponibles.
       </h1>
-      <div v-if="tournament?.groups.length > 0" class="mt-6 flex justify-center">
-        <div v-for="group in tournament?.groups" :key="group.id" class="mx-3" @click="show_detail_group = group.id">
+      <div v-if="tournament?.groups.length > 0" class="my-auto flex justify-center gap-20 flex-wrap">
+        <div v-for="group in tournament?.groups" :key="group.id" class=" border-collapse border-slate-500 hover:ring hover:ring-slate-500 hover:ring-8" @click="show_detail_group = group.id">
           <GroupTable :teams="tourney_teams" :group="group"/>
         </div>
       </div>