From 97ddeca21744da2d2c8a8f6966113655084024de Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sat, 7 Mar 2026 21:24:32 +0200 Subject: [PATCH] Breadcrumbs consistency --- app/components/SideNav.module.css | 1 + app/components/layout/index.module.css | 7 +++++++ app/components/layout/index.tsx | 5 ++++- app/features/articles/routes/a.$slug.tsx | 18 +++++++++--------- .../routes/builds.$slug.popular.tsx | 5 ----- .../build-stats/routes/builds.$slug.stats.tsx | 5 ----- app/features/tournament/routes/to.$id.tsx | 14 +------------- .../user-page/routes/u.$identifier.tsx | 18 ++++++++++++++++-- 8 files changed, 38 insertions(+), 35 deletions(-) diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css index db1f322fe..d32454e2c 100644 --- a/app/components/SideNav.module.css +++ b/app/components/SideNav.module.css @@ -28,6 +28,7 @@ align-items: center; padding-inline: var(--s-2); flex-shrink: 0; + overflow: hidden; } .sideNavTopCentered { diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css index 6c054d872..ab4d083d5 100644 --- a/app/components/layout/index.module.css +++ b/app/components/layout/index.module.css @@ -18,12 +18,18 @@ z-index: 10; } +.siteTitleFlipper { + min-width: 0; + overflow: hidden; +} + .siteTitle { display: flex; align-items: center; gap: var(--s-2); height: 100%; min-width: 0; + overflow: hidden; } .siteLogo { @@ -101,6 +107,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + min-width: 0; animation: fadeInFull 200ms ease-out 150ms both; } diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx index 19ad07818..14dbfea48 100644 --- a/app/components/layout/index.tsx +++ b/app/components/layout/index.tsx @@ -337,7 +337,10 @@ function SiteTitle() { const hasBreadcrumbs = breadcrumbs.length > 0; return ( - +
diff --git a/app/features/articles/routes/a.$slug.tsx b/app/features/articles/routes/a.$slug.tsx index 519edbbd2..3fd8ead70 100644 --- a/app/features/articles/routes/a.$slug.tsx +++ b/app/features/articles/routes/a.$slug.tsx @@ -7,7 +7,6 @@ import invariant from "~/utils/invariant"; import type { SendouRouteHandle } from "~/utils/remix.server"; import { ARTICLES_MAIN_PAGE, - articlePage, articlePreviewUrl, navIconUrl, } from "~/utils/urls"; @@ -28,11 +27,6 @@ export const handle: SendouRouteHandle = { href: ARTICLES_MAIN_PAGE, type: "IMAGE", }, - { - text: data.title, - href: articlePage(data.slug), - type: "TEXT", - }, ]; }, }; @@ -64,7 +58,9 @@ export default function ArticlePage() {
by •
- {contentWithoutLeadingTitle(data.content, data.title)} + + {contentWithoutLeadingTitle(data.content, data.title)} + ); @@ -81,9 +77,13 @@ function normalizeText(text: string) { function contentWithoutLeadingTitle(content: string, title: string) { const trimmed = content.trimStart(); const firstLineEnd = trimmed.indexOf("\n"); - const firstLine = firstLineEnd === -1 ? trimmed : trimmed.slice(0, firstLineEnd); + const firstLine = + firstLineEnd === -1 ? trimmed : trimmed.slice(0, firstLineEnd); - if (firstLine.startsWith("# ") && normalizeText(firstLine.slice(2)) === normalizeText(title)) { + if ( + firstLine.startsWith("# ") && + normalizeText(firstLine.slice(2)) === normalizeText(title) + ) { return trimmed.slice(firstLine.length).trimStart(); } diff --git a/app/features/build-stats/routes/builds.$slug.popular.tsx b/app/features/build-stats/routes/builds.$slug.popular.tsx index 3ec863915..9a0aeff9f 100644 --- a/app/features/build-stats/routes/builds.$slug.popular.tsx +++ b/app/features/build-stats/routes/builds.$slug.popular.tsx @@ -45,11 +45,6 @@ export const handle: SendouRouteHandle = { href: weaponBuildPage(data.meta.slug), type: "IMAGE", }, - { - href: "/", - text: data.meta.breadcrumbText, - type: "TEXT", - }, ]; }, }; diff --git a/app/features/build-stats/routes/builds.$slug.stats.tsx b/app/features/build-stats/routes/builds.$slug.stats.tsx index 4c0cc7966..83823e5cd 100644 --- a/app/features/build-stats/routes/builds.$slug.stats.tsx +++ b/app/features/build-stats/routes/builds.$slug.stats.tsx @@ -48,11 +48,6 @@ export const handle: SendouRouteHandle = { href: weaponBuildPage(data.meta.slug), type: "IMAGE", }, - { - href: "/", - text: data.meta.breadcrumbText, - type: "TEXT", - }, ]; }, }; diff --git a/app/features/tournament/routes/to.$id.tsx b/app/features/tournament/routes/to.$id.tsx index 97f633a99..5ba782dc6 100644 --- a/app/features/tournament/routes/to.$id.tsx +++ b/app/features/tournament/routes/to.$id.tsx @@ -19,7 +19,6 @@ import { removeMarkdown } from "~/utils/strings"; import { assertUnreachable } from "~/utils/types"; import { tournamentDivisionsPage, - tournamentOrganizationPage, tournamentPage, tournamentRegisterPage, } from "~/utils/urls"; @@ -70,24 +69,13 @@ export const handle: SendouRouteHandle = { const data = JSON.parse(rawData) as TournamentLoaderData; return [ - data.tournament.ctx.organization?.logoUrl - ? { - imgPath: data.tournament.ctx.organization.logoUrl, - href: tournamentOrganizationPage({ - organizationSlug: data.tournament.ctx.organization.slug, - }), - type: "IMAGE" as const, - text: "", - rounded: true, - } - : null, { imgPath: data.tournament.ctx.logoUrl, href: tournamentPage(data.tournament.ctx.id), type: "IMAGE" as const, text: data.tournament.ctx.name, }, - ].filter((crumb) => crumb !== null); + ]; }, }; diff --git a/app/features/user-page/routes/u.$identifier.tsx b/app/features/user-page/routes/u.$identifier.tsx index 94790a560..51ab36e71 100644 --- a/app/features/user-page/routes/u.$identifier.tsx +++ b/app/features/user-page/routes/u.$identifier.tsx @@ -8,6 +8,7 @@ import { useHasRole } from "~/modules/permissions/hooks"; import { metaTags } from "~/utils/remix"; import type { SendouRouteHandle } from "~/utils/remix.server"; import { + discordAvatarUrl, userAdminPage, userArtPage, userBuildsPage, @@ -44,10 +45,23 @@ export const handle: SendouRouteHandle = { if (!data) return []; + if (!data.user.discordAvatar) { + return { + text: data.user.username, + href: userPage(data.user), + type: "TEXT", + }; + } + return { - text: data.user.username, + imgPath: discordAvatarUrl({ + discordId: data.user.discordId, + discordAvatar: data.user.discordAvatar, + size: "sm", + }), href: userPage(data.user), - type: "TEXT", + type: "IMAGE", + text: data.user.username, }; }, };