Fix tournament breadcrumb border

This commit is contained in:
Kalle 2026-01-10 12:20:20 +02:00
parent cf0985c56e
commit 6934ece434
7 changed files with 122 additions and 40 deletions

View File

@ -23,7 +23,6 @@ export function SideNav({
top?: React.ReactNode;
topCentered?: boolean;
}) {
// xxx: looks funny on tournament page (very small border around the logo)
return (
<nav className={clsx(styles.sideNav, className)}>
<div

View File

@ -70,15 +70,11 @@
}
.pageIcon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: var(--s-0-5);
background-color: var(--color-bg-higher);
border-radius: var(--rounded-xs);
flex-shrink: 0;
animation: fadeInFull 200ms ease-out 150ms both;
object-fit: cover;
}
@keyframes fadeInFull {
@ -90,11 +86,6 @@
}
}
.pageIcon img {
width: 16px;
height: 16px;
}
.pageName {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
@ -102,7 +93,6 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: var(--s-1);
animation: fadeInFull 200ms ease-out 150ms both;
}

View File

@ -283,10 +283,7 @@ function PageIcon({ crumb }: { crumb: Breadcrumb }) {
}
const isExternal = crumb.imgPath.includes(".");
const iconClass = clsx(styles.pageIcon, {
"rounded-full": crumb.rounded,
});
const iconClass = clsx(styles.pageIcon, "rounded");
return isExternal ? (
<img src={crumb.imgPath} alt="" className={iconClass} />

View File

@ -120,26 +120,126 @@ const MODE_NAMES: Record<string, string> = {
};
const MOCK_USERS = [
{ id: 1, username: "InkMaster", avatarUrl: "https://i.pravatar.cc/150?u=user1", discordTag: "inkmaster" },
{ id: 2, username: "SplatKing", avatarUrl: "https://i.pravatar.cc/150?u=user2", discordTag: "splatking" },
{ id: 3, username: "OctoQueen", avatarUrl: "https://i.pravatar.cc/150?u=user3", discordTag: "octoqueen" },
{ id: 4, username: "TurfPro", avatarUrl: "https://i.pravatar.cc/150?u=user4", discordTag: "turfpro" },
{ id: 5, username: "ChargerMain", avatarUrl: "https://i.pravatar.cc/150?u=user5", discordTag: "chargermain" },
{ id: 6, username: "BrushRush", avatarUrl: "https://i.pravatar.cc/150?u=user6", discordTag: "brushrush" },
{ id: 7, username: "SlosherPro", avatarUrl: "https://i.pravatar.cc/150?u=user7", discordTag: "slosherpro" },
{ id: 8, username: "DualiesDuo", avatarUrl: "https://i.pravatar.cc/150?u=user8", discordTag: "dualiesduo" },
{ id: 9, username: "BrellaShield", avatarUrl: "https://i.pravatar.cc/150?u=user9", discordTag: "brellashield" },
{ id: 10, username: "StringerAce", avatarUrl: "https://i.pravatar.cc/150?u=user10", discordTag: "stringerace" },
{ id: 11, username: "SplatanaSlash", avatarUrl: "https://i.pravatar.cc/150?u=user11", discordTag: "splatanaslash" },
{ id: 12, username: "RollerCrush", avatarUrl: "https://i.pravatar.cc/150?u=user12", discordTag: "rollercrush" },
{ id: 13, username: "BlasterBoom", avatarUrl: "https://i.pravatar.cc/150?u=user13", discordTag: "blasterboom" },
{ id: 14, username: "SplatlingSpray", avatarUrl: "https://i.pravatar.cc/150?u=user14", discordTag: "splatlingspray" },
{ id: 15, username: "SquifferQuick", avatarUrl: "https://i.pravatar.cc/150?u=user15", discordTag: "squifferquick" },
{ id: 16, username: "NautFlex", avatarUrl: "https://i.pravatar.cc/150?u=user16", discordTag: "nautflex" },
{ id: 17, username: "TetraTop", avatarUrl: "https://i.pravatar.cc/150?u=user17", discordTag: "tetratop" },
{ id: 18, username: "ReefLuxer", avatarUrl: "https://i.pravatar.cc/150?u=user18", discordTag: "reefluxer" },
{ id: 19, username: "GooTubeGuru", avatarUrl: "https://i.pravatar.cc/150?u=user19", discordTag: "gootubeguru" },
{ id: 20, username: "BamboozleKing", avatarUrl: "https://i.pravatar.cc/150?u=user20", discordTag: "bamboozleking" },
{
id: 1,
username: "InkMaster",
avatarUrl: "https://i.pravatar.cc/150?u=user1",
discordTag: "inkmaster",
},
{
id: 2,
username: "SplatKing",
avatarUrl: "https://i.pravatar.cc/150?u=user2",
discordTag: "splatking",
},
{
id: 3,
username: "OctoQueen",
avatarUrl: "https://i.pravatar.cc/150?u=user3",
discordTag: "octoqueen",
},
{
id: 4,
username: "TurfPro",
avatarUrl: "https://i.pravatar.cc/150?u=user4",
discordTag: "turfpro",
},
{
id: 5,
username: "ChargerMain",
avatarUrl: "https://i.pravatar.cc/150?u=user5",
discordTag: "chargermain",
},
{
id: 6,
username: "BrushRush",
avatarUrl: "https://i.pravatar.cc/150?u=user6",
discordTag: "brushrush",
},
{
id: 7,
username: "SlosherPro",
avatarUrl: "https://i.pravatar.cc/150?u=user7",
discordTag: "slosherpro",
},
{
id: 8,
username: "DualiesDuo",
avatarUrl: "https://i.pravatar.cc/150?u=user8",
discordTag: "dualiesduo",
},
{
id: 9,
username: "BrellaShield",
avatarUrl: "https://i.pravatar.cc/150?u=user9",
discordTag: "brellashield",
},
{
id: 10,
username: "StringerAce",
avatarUrl: "https://i.pravatar.cc/150?u=user10",
discordTag: "stringerace",
},
{
id: 11,
username: "SplatanaSlash",
avatarUrl: "https://i.pravatar.cc/150?u=user11",
discordTag: "splatanaslash",
},
{
id: 12,
username: "RollerCrush",
avatarUrl: "https://i.pravatar.cc/150?u=user12",
discordTag: "rollercrush",
},
{
id: 13,
username: "BlasterBoom",
avatarUrl: "https://i.pravatar.cc/150?u=user13",
discordTag: "blasterboom",
},
{
id: 14,
username: "SplatlingSpray",
avatarUrl: "https://i.pravatar.cc/150?u=user14",
discordTag: "splatlingspray",
},
{
id: 15,
username: "SquifferQuick",
avatarUrl: "https://i.pravatar.cc/150?u=user15",
discordTag: "squifferquick",
},
{
id: 16,
username: "NautFlex",
avatarUrl: "https://i.pravatar.cc/150?u=user16",
discordTag: "nautflex",
},
{
id: 17,
username: "TetraTop",
avatarUrl: "https://i.pravatar.cc/150?u=user17",
discordTag: "tetratop",
},
{
id: 18,
username: "ReefLuxer",
avatarUrl: "https://i.pravatar.cc/150?u=user18",
discordTag: "reefluxer",
},
{
id: 19,
username: "GooTubeGuru",
avatarUrl: "https://i.pravatar.cc/150?u=user19",
discordTag: "gootubeguru",
},
{
id: 20,
username: "BamboozleKing",
avatarUrl: "https://i.pravatar.cc/150?u=user20",
discordTag: "bamboozleking",
},
];
type FeedPostType =

View File

@ -75,7 +75,6 @@ export const handle: SendouRouteHandle = {
}),
type: "IMAGE",
text: data.organization.name,
rounded: true,
}
: {
type: "TEXT",

View File

@ -74,7 +74,6 @@ export const handle: SendouRouteHandle = {
}),
type: "IMAGE" as const,
text: "",
rounded: true,
}
: null,
{
@ -82,7 +81,6 @@ export const handle: SendouRouteHandle = {
href: tournamentPage(data.tournament.ctx.id),
type: "IMAGE" as const,
text: data.tournament.ctx.name,
rounded: true,
},
].filter((crumb) => crumb !== null);
},

View File

@ -253,7 +253,6 @@ export type Breadcrumb =
type: "IMAGE";
href: string;
text?: string;
rounded?: boolean;
}
| { text: string; type: "TEXT"; href: string };