Skip to content
/ web Public

Commit 2d6cf91

Browse files
lukepololukepolo
committed
chore: update how we do spacing between matches
1 parent 7893f7a commit 2d6cf91

File tree

3 files changed

+85
-83
lines changed

3 files changed

+85
-83
lines changed

‎components/tournament/SwissBracketViewer.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -591,7 +591,7 @@ onMounted(() => {
591591
</div>
592592

593593
<!-- Matches in this pool -->
594-
<div class="flex flex-col gap-2">
594+
<div class="flex flex-col gap-4">
595595
<TournamentMatch
596596
v-for="bracket in pool.brackets"
597597
:key="bracket.id"

‎components/tournament/TournamentBracketViewer.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -613,7 +613,7 @@ function startMomentum() {
613613
</div>
614614
</div>
615615

616-
<div class="flex flex-col justify-around flex-1">
616+
<div class="flex flex-col justify-around flex-1 gap-4">
617617
<TournamentMatch
618618
:stage="stage"
619619
:tournament="tournament"

‎components/tournament/TournamentMatch.vue‎

Lines changed: 83 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ const handleBracketUpdated = (bracketId: string) => {
153153
<div
154154
v-if="!(bracket.bye && !bracket.team_1 && !bracket.team_2)"
155155
:id="`bracket-${bracket.id}`"
156-
class="tournament-match cursor-pointer my-2 border-2 border-gray-700 rounded-lg p-1 transition-all duration-200 hover:border-blue-500 hover:shadow-lg hover:shadow-blue-500/20 bg-gray-800/50 backdrop-blur-sm relative"
156+
class="tournament-match cursor-pointer border-2 border-gray-700 rounded-lg p-1 transition-all duration-200 hover:border-blue-500 hover:shadow-lg hover:shadow-blue-500/20 bg-gray-800/50 backdrop-blur-sm relative flex flex-col gap-2"
157157
:data-bracket-id="bracket.id"
158158
:data-round="props.round"
159159
@click="handleClick($event, bracket)"
@@ -162,7 +162,7 @@ const handleBracketUpdated = (bracketId: string) => {
162162
<Badge v-if="bracket.bye">
163163
{{ $t("tournament.match.bye_round") }}
164164
</Badge>
165-
<Badge v-else>
165+
<Badge v-else class="flex items-center gap-2">
166166
{{
167167
$t("tournament.match.round_match", {
168168
round: props.round,
@@ -172,7 +172,7 @@ const handleBracketUpdated = (bracketId: string) => {
172172
}}
173173
<span
174174
v-if="getBestOf(bracket, stage, tournament)"
175-
class="ml-2 text-muted-foreground"
175+
class="text-muted-foreground"
176176
>
177177
BO{{ getBestOf(bracket, stage, tournament) }}
178178
</span>
@@ -190,18 +190,18 @@ const handleBracketUpdated = (bracketId: string) => {
190190
<!-- Display scheduled ETA if available -->
191191
<div
192192
v-if="bracket.scheduled_eta && !bracket.match"
193-
class="mt-2 mb-3 text-xs text-muted-foreground flex flex-col items-center gap-1"
193+
class="text-xs text-muted-foreground flex flex-col items-center gap-1"
194194
>
195195
<span>{{ $t("tournament.match.scheduled_for") }}</span>
196-
<span class="text-blue-400 font-medium ml-1">
196+
<span class="text-blue-400 font-medium">
197197
<TimeAgo :date="bracket.scheduled_eta"></TimeAgo>
198198
</span>
199199
</div>
200200

201201
<template
202202
v-if="stage.type === e_tournament_stage_types_enum.DoubleElimination"
203203
>
204-
<div v-if="bracket.parent_bracket" class="text-center mt-2 mb-2">
204+
<div v-if="bracket.parent_bracket" class="text-center">
205205
<div class="text-xs text-green-400 font-medium">
206206
<span class="inline-flex items-center gap-1">
207207
<span>Parent →</span>
@@ -214,7 +214,7 @@ const handleBracketUpdated = (bracketId: string) => {
214214
</div>
215215
</div>
216216

217-
<div v-if="bracket.loser_bracket" class="text-center mt-2 mb-2">
217+
<div v-if="bracket.loser_bracket" class="text-center">
218218
<div class="text-xs text-red-400 font-medium">
219219
<span class="inline-flex items-center gap-1">
220220
<span>Loser →</span>
@@ -229,94 +229,96 @@ const handleBracketUpdated = (bracketId: string) => {
229229
</template>
230230

231231
<!-- Team Display -->
232-
<template v-if="bracket.bye">
233-
<!-- Bye round: show only the team that exists -->
234-
<div v-if="bracket.team_1 || bracket.team_2" class="items-center m-2">
235-
<div class="bg-gray-600 text-gray-300 rounded py-1 px-4">
236-
<span>
237-
{{ getTeamName(bracket.team_1 || bracket.team_2) }}
238-
<span
239-
v-if="bracket.team_1_seed || bracket.team_2_seed"
240-
class="text-muted-foreground ml-2"
241-
>
242-
(#{{ bracket.team_1_seed || bracket.team_2_seed }})
243-
</span>
244-
</span>
245-
</div>
246-
</div>
247-
</template>
248-
<template v-else>
249-
<!-- Regular match: show both teams -->
250-
<div class="items-center m-2">
251-
<div class="bg-gray-600 text-gray-300 rounded py-1 px-4">
252-
<span v-if="bracket.match" class="flex items-center gap-2">
253-
<TournamentRoundLineup
254-
:lineup_name="getTeamName(bracket.team_1)"
255-
:match="bracket.match"
256-
:lineup="bracket.match.lineup_1"
257-
/>
258-
<span v-if="bracket.team_1_seed" class="text-muted-foreground">
259-
(#{{ bracket.team_1_seed }})
260-
</span>
261-
</span>
262-
<template v-else>
263-
<span v-if="bracket.team_1">
264-
{{ getTeamName(bracket.team_1) }}
232+
<div class="flex flex-col gap-2">
233+
<template v-if="bracket.bye">
234+
<!-- Bye round: show only the team that exists -->
235+
<div v-if="bracket.team_1 || bracket.team_2" class="items-center">
236+
<div class="bg-gray-600 text-gray-300 rounded py-1 px-4">
237+
<span class="flex items-center gap-2">
238+
{{ getTeamName(bracket.team_1 || bracket.team_2) }}
265239
<span
266-
v-if="bracket.team_1_seed"
267-
class="text-muted-foreground ml-2"
240+
v-if="bracket.team_1_seed || bracket.team_2_seed"
241+
class="text-muted-foreground"
268242
>
269-
(#{{ bracket.team_1_seed }})
243+
(#{{ bracket.team_1_seed || bracket.team_2_seed }})
270244
</span>
271245
</span>
272-
<span v-else>
273-
{{ $t("tournament.match.team_1") }}
274-
<span
275-
v-if="bracket.team_1_seed"
276-
class="text-muted-foreground ml-2"
277-
>
246+
</div>
247+
</div>
248+
</template>
249+
<template v-else>
250+
<!-- Regular match: show both teams -->
251+
<div class="items-center">
252+
<div class="bg-gray-600 text-gray-300 rounded py-1 px-4">
253+
<span v-if="bracket.match" class="flex items-center gap-2">
254+
<TournamentRoundLineup
255+
:lineup_name="getTeamName(bracket.team_1)"
256+
:match="bracket.match"
257+
:lineup="bracket.match.lineup_1"
258+
/>
259+
<span v-if="bracket.team_1_seed" class="text-muted-foreground">
278260
(#{{ bracket.team_1_seed }})
279261
</span>
280262
</span>
281-
</template>
263+
<template v-else>
264+
<span v-if="bracket.team_1" class="flex items-center gap-2">
265+
{{ getTeamName(bracket.team_1) }}
266+
<span
267+
v-if="bracket.team_1_seed"
268+
class="text-muted-foreground"
269+
>
270+
(#{{ bracket.team_1_seed }})
271+
</span>
272+
</span>
273+
<span v-else class="flex items-center gap-2">
274+
{{ $t("tournament.match.team_1") }}
275+
<span
276+
v-if="bracket.team_1_seed"
277+
class="text-muted-foreground"
278+
>
279+
(#{{ bracket.team_1_seed }})
280+
</span>
281+
</span>
282+
</template>
283+
</div>
282284
</div>
283-
</div>
284285

285-
<div class="items-center m-2">
286-
<div class="bg-gray-600 text-gray-300 rounded py-1 px-4">
287-
<span v-if="bracket.match" class="flex items-center gap-2">
288-
<TournamentRoundLineup
289-
:lineup_name="getTeamName(bracket.team_2)"
290-
:match="bracket.match"
291-
:lineup="bracket.match.lineup_2"
292-
/>
293-
<span v-if="bracket.team_2_seed" class="text-muted-foreground">
294-
(#{{ bracket.team_2_seed }})
295-
</span>
296-
</span>
297-
<template v-else>
298-
<span v-if="bracket.team_2">
299-
{{ getTeamName(bracket.team_2) }}
300-
<span
301-
v-if="bracket.team_2_seed"
302-
class="text-muted-foreground ml-2"
303-
>
286+
<div class="items-center">
287+
<div class="bg-gray-600 text-gray-300 rounded py-1 px-4">
288+
<span v-if="bracket.match" class="flex items-center gap-2">
289+
<TournamentRoundLineup
290+
:lineup_name="getTeamName(bracket.team_2)"
291+
:match="bracket.match"
292+
:lineup="bracket.match.lineup_2"
293+
/>
294+
<span v-if="bracket.team_2_seed" class="text-muted-foreground">
304295
(#{{ bracket.team_2_seed }})
305296
</span>
306297
</span>
307-
<span v-else>
308-
{{ $t("tournament.match.team_2") }}
309-
<span
310-
v-if="bracket.team_2_seed"
311-
class="text-muted-foreground ml-2"
312-
>
313-
(#{{ bracket.team_2_seed }})
298+
<template v-else>
299+
<span v-if="bracket.team_2" class="flex items-center gap-2">
300+
{{ getTeamName(bracket.team_2) }}
301+
<span
302+
v-if="bracket.team_2_seed"
303+
class="text-muted-foreground"
304+
>
305+
(#{{ bracket.team_2_seed }})
306+
</span>
314307
</span>
315-
</span>
316-
</template>
308+
<span v-else class="flex items-center gap-2">
309+
{{ $t("tournament.match.team_2") }}
310+
<span
311+
v-if="bracket.team_2_seed"
312+
class="text-muted-foreground"
313+
>
314+
(#{{ bracket.team_2_seed }})
315+
</span>
316+
</span>
317+
</template>
318+
</div>
317319
</div>
318-
</div>
319-
</template>
320+
</template>
321+
</div>
320322
</div>
321323

322324
<!-- Edit Bracket Sheets -->

0 commit comments

Comments
 (0)