Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-08-27 21:55:15 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Handle team map pool display when 6 maps

Browse Source
This commit is contained in:
Kalle
2023-05-19 16:57:10 +03:00
parent 2a261925c2
commit 123ee8dc8d
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/features/tournament/routes/to.$id.teams.tsx
View File

@@ -4,6 +4,7 @@ import { ModeImage, StageImage } from "~/components/Image";
import { userPage } from "~/utils/urls";
import type { FindTeamsByTournamentIdItem } from "../queries/findTeamsByTournamentId.server";
import type { TournamentLoaderData } from "./to.$id";
import clsx from "clsx";
export default function TournamentTeamsPage() {
const data = useOutletContext<TournamentLoaderData>();
@@ -56,7 +57,12 @@ function TeamMapPool({
mapPool: NonNullable<FindTeamsByTournamentIdItem["mapPool"]>;
}) {
return (
<div className="tournament__team-with-roster__map-pool">
<div
className={clsx("tournament__team-with-roster__map-pool", {
"tournament__team-with-roster__map-pool__3-columns":
mapPool.length % 3 === 0,
})}
>
{mapPool.map(({ mode, stageId }, i) => {
return (
<div key={i}>

4
app/features/tournament/tournament.css
View File

@@ -138,6 +138,10 @@
overflow: hidden;
}
.tournament__team-with-roster__map-pool.tournament__team-with-roster__map-pool__3-columns {
grid-template-columns: max-content max-content max-content;
}
.tournament__team-with-roster__map-pool__mode-info {
background-color: var(--bg-darker);
display: flex;