Add tournament logos for calendar page

This commit is contained in:
Kalle
2024-01-07 13:15:30 +02:00
parent b189a1168d
commit 5d628eaed9
4 changed files with 50 additions and 35 deletions

View File

@@ -169,7 +169,7 @@ export default function ReportWinnersPage() {
return (
<Main halfWidth>
<Form method="post" className="stack smedium items-start">
<Form method="post" className="stack md-plus items-start">
<h1 className="text-lg">
{t("calendar:forms.reportResultsHeader", { eventName: data.name })}
</h1>

View File

@@ -45,6 +45,8 @@ import { Divider } from "~/components/Divider";
import { UsersIcon } from "~/components/icons/Users";
import * as CalendarRepository from "../CalendarRepository.server";
import { canAddNewEvent } from "../calendar-utils";
import { Avatar } from "~/components/Avatar";
import { HACKY_resolvePicture } from "~/features/tournament/tournament-utils";
export const links: LinksFunction = () => {
return [{ rel: "stylesheet", href: styles }];
@@ -416,38 +418,49 @@ function EventsList({
</div>
</div>
<div className="stack xs">
<div>
<Link
to={
calendarEvent.tournamentId
? tournamentPage(calendarEvent.tournamentId)
: String(calendarEvent.eventId)
}
>
<h2 className="calendar__event__title">
{calendarEvent.name}{" "}
{calendarEvent.nthAppearance > 1 ? (
<span className="calendar__event__day">
{t("day", {
number: calendarEvent.nthAppearance,
})}
</span>
) : null}
</h2>
</Link>
{calendarEvent.participantCounts &&
calendarEvent.participantCounts.teams > 0 ? (
<div className="calendar__event__participant-counts">
<UsersIcon />{" "}
{t("count.teams", {
count: calendarEvent.participantCounts.teams,
})}{" "}
/{" "}
{t("count.players", {
count: calendarEvent.participantCounts.players,
<div className="stack horizontal sm-plus items-center">
{calendarEvent.tournamentId ? (
<Avatar
size="sm"
url={HACKY_resolvePicture({
name: calendarEvent.name,
})}
</div>
/>
) : null}
<div>
<Link
to={
calendarEvent.tournamentId
? tournamentPage(calendarEvent.tournamentId)
: String(calendarEvent.eventId)
}
>
<h2 className="calendar__event__title">
{calendarEvent.name}{" "}
{calendarEvent.nthAppearance > 1 ? (
<span className="calendar__event__day">
{t("day", {
number: calendarEvent.nthAppearance,
})}
</span>
) : null}
</h2>
</Link>
{calendarEvent.participantCounts &&
calendarEvent.participantCounts.teams > 0 ? (
<div className="calendar__event__participant-counts">
<UsersIcon />{" "}
{t("count.teams", {
count: calendarEvent.participantCounts.teams,
})}{" "}
/{" "}
{t("count.players", {
count:
calendarEvent.participantCounts.players,
})}
</div>
) : null}
</div>
</div>
<Tags
tags={calendarEvent.tags}

View File

@@ -77,9 +77,7 @@ export function isOneModeTournamentOf(
: null;
}
export function HACKY_resolvePicture(
event: TournamentLoaderData["tournament"],
) {
export function HACKY_resolvePicture(event: { name: string }) {
if (HACKY_isInviteOnlyEvent(event))
return "https://abload.de/img/screenshot2023-11-25ay1fbc.png";

View File

@@ -876,11 +876,15 @@ dialog::backdrop {
gap: var(--s-2);
}
.stack.sm-plus {
gap: var(--s-3);
}
.stack.md {
gap: var(--s-4);
}
.stack.smedium {
.stack.md-plus {
gap: var(--s-6);
}