fix group layout

InsaLan · Feb 16, 2024 · 2580b01 · 2580b01
1 parent a55fafd
commit 2580b01
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git 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
@@ -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>