Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-07-20 01:26:12 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Team: Banner placeholder when no image set

Browse Source
This commit is contained in:
Kalle 2022-12-30 23:21:37 +02:00
parent da020e8557
commit aefefc26a3
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/features/team/routes/t.$customUrl.tsx
View File

@ -19,6 +19,7 @@ import type { DetailedTeamMember, TeamResultPeek } from "../team-types";
import { Avatar } from "~/components/Avatar";
import { useTranslation } from "~/hooks/useTranslation";
import { Flag } from "~/components/Flag";
import clsx from "clsx";
export const meta: MetaFunction = ({
data,
@ -78,11 +79,14 @@ function TeamBanner() {
return (
<div
className="team__banner"
className={clsx("team__banner", {
team__banner__placeholder: !team.bannerSrc,
})}
style={
{
// xxx: some fallback banner image
"--team-banner-img": team.bannerSrc ? `url("${team.bannerSrc}")` : "",
"--team-banner-img": team.bannerSrc
? `url("${team.bannerSrc}")`
: undefined,
} as any
}
>

5
app/features/team/team.css
View File

@ -15,6 +15,11 @@
padding: var(--s-5);
}
.team__banner__placeholder {
height: 12rem;
background-color: var(--theme-transparent);
}
.team__banner__flags {
grid-area: flags;
margin-top: -5px;