Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-11 21:56:11 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better final standings layout for mobile

Browse Source
This commit is contained in:
Kalle
2023-05-20 22:49:36 +03:00
parent 83d98495b3
commit cf8c1ff379
2 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/features/tournament-bracket/routes/to.$id.brackets.tsx
View File

@@ -466,6 +466,7 @@ function FinalStandings({ standings }: { standings: FinalStanding[] }) {
<div
className="tournament-bracket__standing"
key={standing.tournamentTeam.id}
data-placement={standing.placement}
>
<div>
<Placement placement={standing.placement} size={40} />

24
app/features/tournament-bracket/tournament-bracket.css
View File

@@ -254,15 +254,33 @@
.tournament-bracket__standings {
background-color: var(--bg-lighter-transparent);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr;
border-radius: var(--rounded);
padding: var(--s-3);
gap: var(--s-2);
max-width: max-content;
margin: 0 auto;
}
.tournament-bracket__stadings__full-row-taker {
grid-column: 1 / 4;
[data-placement="1"] {
order: -1;
}
[data-placement="2"] {
order: -1;
}
@media screen and (min-width: 480px) {
.tournament-bracket__standings {
grid-template-columns: 1fr 1fr 1fr;
}
.tournament-bracket__stadings__full-row-taker {
grid-column: 1 / 4;
}
[data-placement="1"] {
order: unset;
}
[data-placement="2"] {
order: unset;
}
}
.tournament-bracket__standing {