Skip to content

Commit

Permalink
fix group layout
Browse files Browse the repository at this point in the history
  • Loading branch information
istar410 authored and KwikKill committed Feb 16, 2024
1 parent a55fafd commit 2580b01
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 21 deletions.
46 changes: 28 additions & 18 deletions src/components/GroupTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
6 changes: 3 additions & 3 deletions src/views/TournamentDetail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Check warning on line 354 in src/views/TournamentDetail.vue

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

src/views/TournamentDetail.vue#L354

[tailwindcss/classnames-order] Invalid Tailwind CSS classnames order
<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">

Check warning on line 355 in src/views/TournamentDetail.vue

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

src/views/TournamentDetail.vue#L355

[tailwindcss/classnames-order] Invalid Tailwind CSS classnames order

Check failure on line 355 in src/views/TournamentDetail.vue

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

src/views/TournamentDetail.vue#L355

[tailwindcss/no-contradicting-classname] Classnames hover:ring, hover:ring-8 are conflicting!
<GroupTable :teams="tourney_teams" :group="group"/>
</div>

Check failure on line 357 in src/views/TournamentDetail.vue

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

src/views/TournamentDetail.vue#L355-L357

[vuejs-accessibility/click-events-have-key-events] Visible, non-interactive elements with click handlers must have at least one keyboard listener.
</div>
Expand Down

0 comments on commit 2580b01

Please sign in to comment.