Fix tournament bracket style

InsaLan · Feb 18, 2024 · 9c6244c · 9c6244c
1 parent ac1f4f0
commit 9c6244c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/src/components/KnockoutMatchCard.vue b/src/components/KnockoutMatchCard.vue
@@ -10,7 +10,7 @@ defineProps<{
 <template>
  <div v-for="idx in teamPerMatch" :key="idx" class="flex justify-between bg-slate-700 p-2 text-xl" :class="{ 'bg-slate-900': status == 'ONGOING' }">
  <!-- max-w-lg min-w-[22rem]-->
- <div class="text-grey-500">
+ <div class="text-grey-500 truncate">
  {{ teams[idx - 1]?.name || "TBD" }}
  </div> <div v-if="status == 'COMPLETED'" :class="teams[idx - 1]?.is_winner ? 'text-emerald-300' : 'text-white'" class="text-3xl font-black">
  {{ teams[idx - 1]?.score }}

diff --git a/src/stores/tournament.store.ts b/src/stores/tournament.store.ts
@@ -356,11 +356,11 @@ export const useTournamentStore = defineStore('tournament', () => {
  }
  function get_col_class(bracket: Bracket) {
  const nb_cols = get_bracket_cols_count(bracket);
- return `grid-cols-[repeat(${nb_cols},26rem)]`;
+ return `grid-cols-[repeat(${nb_cols},17rem)]`;
  }
  function get_col_style(bracket: Bracket) {
  const nb_cols = get_bracket_cols_count(bracket);
- return { 'grid-template-columns': `repeat(${nb_cols},26rem)` };
+ return { 'grid-template-columns': `repeat(${nb_cols},17rem)` };
  }
 
  const get_matchs_per_round = (matchs: Match[]) => {

diff --git a/src/views/TournamentDetail.vue b/src/views/TournamentDetail.vue
@@ -456,7 +456,7 @@ onMounted(async () => {
  </h1>
  <div v-if="bracket.bracket_type === BracketType.SINGLE" :key="bracket.id" class="overflow-x-auto">
  <div class="grid items-center gap-10" :style="get_col_style(bracket)">
- <div v-for="(games, round_idx) in get_matchs_per_round(bracket.matchs)" :key="round_idx" class="flex flex-col justify-around">
+ <div v-for="(games, round_idx) in get_matchs_per_round(bracket.matchs)" :key="round_idx" class="flex h-full flex-col justify-around">
  <div v-for="game in games" :key="game.id" class="m-2 divide-y">
  <KnockoutMatchCard
  :team-per-match="tournament.game.team_per_match"
@@ -468,8 +468,8 @@ onMounted(async () => {
  </div>
  </div>
  <div v-if="bracket.bracket_type === BracketType.DOUBLE" :key="bracket.id" class="overflow-x-auto">
- <div class="grid items-center gap-10" :style="get_col_style(bracket)">
- <div class="flex flex-col justify-around">
+ <div class="grid h-full items-center gap-10" :style="get_col_style(bracket)">
+ <div class="flex h-full flex-col justify-around">
  <div v-for="game in get_winner_matchs_per_round(bracket.matchs, bracket.depth)" :key="game.id" class="m-2 divide-y">
  <KnockoutMatchCard
  :team-per-match="tournament.game.team_per_match"
@@ -478,8 +478,8 @@ onMounted(async () => {
  />
  </div>
  </div>
- <div v-for="col_idx in get_bracket_cols_count(bracket) - 2" :key="col_idx" class="flex flex-col justify-around">
- <div v-if="col_idx % 2">
+ <div v-for="col_idx in get_bracket_cols_count(bracket) - 2" :key="col_idx" class="flex h-full flex-col">
+ <div v-if="col_idx % 2" class="flex h-full flex-col justify-around">
  <div v-for="game in get_winner_matchs_per_round(bracket.matchs, bracket.depth - (col_idx - 1) / 2 - 1)" :key="game.id" class="m-2 divide-y">
  <KnockoutMatchCard
  :team-per-match="tournament.game.team_per_match"
@@ -500,7 +500,7 @@ onMounted(async () => {
  </div>
  <div class="grid items-center gap-10" :style="get_col_style(bracket)">
  <div/>
- <div v-for="(games, round_idx) in get_looser_matchs(bracket.matchs)" :key="round_idx" class="flex flex-col justify-around">
+ <div v-for="(games, round_idx) in get_looser_matchs(bracket.matchs)" :key="round_idx" class="flex h-full flex-col justify-around">
  <div v-for="game in games" :key="game.id" class="m-2 divide-y">
  <KnockoutMatchCard
  :team-per-match="tournament.game.team_per_match"