Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-03-21 18:04:39 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix /divisions missing styles

Browse Source
This commit is contained in:
Kalle 2026-03-19 20:15:57 +02:00
parent ddcd7307c7
commit b09172701e
2 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/features/tournament-bracket/routes/to.$id.divisions.module.css Normal file
View File

@ -0,0 +1,45 @@
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
gap: var(--s-4);
}
.link {
background-color: var(--color-bg-high);
padding: var(--s-2) var(--s-4);
border-radius: var(--radius-box);
font-size: var(--fonts-lg);
font-weight: var(--weight-semi);
width: 100%;
white-space: nowrap;
border: var(--border-style);
}
.link:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}
.participant {
outline: 3px solid var(--color-bg-higher);
outline-offset: 3px;
}
.participant svg {
fill: var(--color-accent);
}
.participantCounts {
display: flex;
align-items: center;
font-weight: var(--weight-body);
color: var(--color-text-high);
font-size: var(--fonts-sm);
gap: var(--s-2);
margin-block-end: var(--s-1);
}
.participantCounts > svg {
width: 1rem;
margin-block-end: 1px;
}

11
app/features/tournament-bracket/routes/to.$id.divisions.tsx
View File

@ -6,6 +6,7 @@ import type { SerializeFrom } from "~/utils/remix";
import { tournamentBracketsPage } from "../../../utils/urls";
import { loader } from "../loaders/to.$id.divisions.server";
import styles from "./to.$id.divisions.module.css";
export { loader };
export default function TournamentDivisionsPage() {
@ -20,7 +21,7 @@ export default function TournamentDivisionsPage() {
}
return (
<div className="tournament__div__grid">
<div className={styles.grid}>
{data.divisions.map((div) => (
<DivisionLink key={div.tournamentId} div={div} />
))}
@ -40,14 +41,12 @@ function DivisionLink({
return (
<Link
to={tournamentBracketsPage({ tournamentId: div.tournamentId })}
className={clsx("tournament__div__link", {
tournament__div__link__participant: data.divsParticipantOf.includes(
div.tournamentId,
),
className={clsx(styles.link, {
[styles.participant]: data.divsParticipantOf.includes(div.tournamentId),
})}
>
{shortName}
<div className="tournament__div__participant-counts">
<div className={styles.participantCounts}>
<Users />{" "}
{t("calendar:count.teams", {
count: div.teamsCount,