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

Tweak match vod popover styling

Browse Source
This commit is contained in:
Kalle
2026-04-02 21:39:39 +03:00
parent 22bcb19df4
commit 45f201d70f
2 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/features/tournament-bracket/components/Bracket/Match.tsx
View File

@@ -1,5 +1,6 @@
import clsx from "clsx";
import { differenceInMinutes } from "date-fns";
import { Eye } from "lucide-react";
import * as React from "react";
import { Link } from "react-router";
import { Avatar } from "~/components/Avatar";
@@ -375,7 +376,7 @@ function MatchVods({ vods }: MatchVodsProps) {
const tournament = useTournament();
return (
<div className={clsx("stack md", parentStyles.streamPopover)}>
<div className={parentStyles.vodGrid}>
{vods.map((vod) => {
const team = vod.userId
? tournament.ctx.teams.find((t) =>
@@ -390,19 +391,25 @@ function MatchVods({ vods }: MatchVodsProps) {
href={vodUrl(vod)}
target="_blank"
rel="noopener noreferrer"
className={parentStyles.vodLink}
>
{user ? (
<>
<Avatar size="xxs" user={user} />
<span className="font-semi-bold">{user.username}</span>
<span className="text-theme-secondary">{team?.name}</span>
</>
) : (
<span className="font-semi-bold">{vod.account}</span>
)}
<span className="text-lighter text-xs">
{vod.viewCount.toLocaleString()} views
<span className={parentStyles.vodUser}>
{user ? (
<>
<Avatar size="xxs" user={user} />
<span className="font-semi-bold">{user.username}</span>
</>
) : (
<span className="font-semi-bold">{vod.account}</span>
)}
</span>
<span
className={clsx("text-theme-secondary", parentStyles.vodTeamName)}
>
{user ? team?.name : null}
</span>
<span className="text-lighter stack horizontal xs items-center">
<Eye size={12} />
{vod.viewCount.toLocaleString()}
</span>
</a>
);

23
app/features/tournament-bracket/tournament-bracket.module.css
View File

@@ -513,13 +513,30 @@
width: 280px;
}
.vodLink {
.vodGrid {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--s-1) var(--s-2);
align-items: center;
font-size: var(--font-xs);
white-space: nowrap;
}
.vodGrid a {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
align-items: center;
}
.vodUser {
display: flex;
align-items: center;
gap: var(--s-2);
font-size: var(--font-xs);
}
.vodTeamName {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
}