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

Fix vods timestamps layout Closes #1294

Browse Source
This commit is contained in:
Kalle
2023-03-07 21:40:16 +02:00
parent cb98b5510d
commit 712a7c84e5
2 changed files with 67 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
app/features/vods/routes/vods.$id.tsx
View File

@@ -142,71 +142,67 @@ function Match({
const weapons = match.weapons.length === 8 ? match.weapons : null;
return (
<div>
<div className="vods__match">
<Image
alt=""
path={stageImageUrl(match.stageId)}
width={100}
className="rounded"
<div className="vods__match">
<Image
alt=""
path={stageImageUrl(match.stageId)}
width={120}
className="rounded"
/>
{weapon ? (
<WeaponImage
weaponSplId={weapon}
variant="badge"
width={42}
className="vods__match__weapon"
testId={`weapon-img-${weapon}`}
/>
{weapon ? (
<WeaponImage
weaponSplId={weapon}
variant="badge"
width={42}
className="vods__match__weapon"
testId={`weapon-img-${weapon}`}
/>
) : null}
<Image
alt=""
path={modeImageUrl(match.mode)}
width={32}
className="vods__match__mode"
/>
<div className="vods__match__text">
<div>
{t(`game-misc:MODE_SHORT_${match.mode}`)}{" "}
{t(`game-misc:STAGE_${match.stageId}`)}
) : null}
<Image
path={modeImageUrl(match.mode)}
width={32}
className={clsx("vods__match__mode", { cast: Boolean(weapons) })}
alt={t(`game-misc:MODE_LONG_${match.mode}`)}
title={t(`game-misc:MODE_LONG_${match.mode}`)}
/>
{weapons ? (
<div className="stack horizontal md">
<div className="vods__match__weapons">
{weapons.slice(0, 4).map((weapon, i) => {
return (
<WeaponImage
key={i}
testId={`weapon-img-${weapon}-${i}`}
weaponSplId={weapon}
variant="badge"
width={30}
/>
);
})}
</div>
<div className="vods__match__weapons">
{weapons.slice(4).map((weapon, i) => {
const adjustedI = i + 4;
return (
<WeaponImage
key={i}
testId={`weapon-img-${weapon}-${adjustedI}`}
weaponSplId={weapon}
variant="badge"
width={30}
/>
);
})}
</div>
{weapon ? <div>{t(`weapons:MAIN_${weapon}`)}</div> : null}
</div>
{weapons ? (
<div className="stack horizontal md">
<div className="vods__match__weapons">
{weapons.slice(0, 4).map((weapon, i) => {
return (
<WeaponImage
key={i}
testId={`weapon-img-${weapon}-${i}`}
weaponSplId={weapon}
variant="badge"
width={30}
/>
);
})}
</div>
<div className="vods__match__weapons">
{weapons.slice(4).map((weapon, i) => {
const adjustedI = i + 4;
return (
<WeaponImage
key={i}
testId={`weapon-img-${weapon}-${adjustedI}`}
weaponSplId={weapon}
variant="badge"
width={30}
/>
);
})}
</div>
</div>
) : null}
<Button size="tiny" onClick={() => setStart(match.startsAt)}>
{secondsToMinutes(match.startsAt)}
</Button>
</div>
) : null}
<Button
size="tiny"
onClick={() => setStart(match.startsAt)}
variant="outlined"
>
{secondsToMinutes(match.startsAt)}
</Button>
</div>
);
}

15
app/features/vods/vods.css
View File

@@ -6,6 +6,7 @@
row-gap: var(--s-8);
justify-content: space-between;
margin-block-start: var(--s-2);
place-items: center;
}
.vods__match {
@@ -18,16 +19,14 @@
line-height: 1.3;
font-weight: var(--semi-bold);
flex-grow: 1;
}
.vods__match__text {
margin-block: var(--s-2);
width: max-content;
gap: var(--s-1);
}
.vods__match__weapon {
position: absolute;
top: -15px;
left: 15px;
left: -20px;
}
.vods__match__weapons {
@@ -39,7 +38,11 @@
.vods__match__mode {
position: absolute;
top: -15px;
right: 20px;
right: -15px;
}
.vods__match__mode.cast {
right: -8px;
}
.vods__listing__list {