shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add card breadcrumb navigation

Browse Source
This commit is contained in:
Henry
2025-11-20 22:19:22 +00:00
parent 1651faae14
commit 8907362c58
3 changed files with 53 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/SideNavigation.tsx
View File

@@ -122,10 +122,10 @@ export default function SideNavigation({
)} )}
> >
<div> <div>
<div className="hidden h-14 items-center justify-between pb-[18px] pt-1.5 md:flex"> <div className="hidden h-[45px] items-center justify-between pb-3 md:flex">
{!isCollapsed && ( {!isCollapsed && (
<Link href="/" className="block"> <Link href="/" className="block">
<h1 className="pl-2 text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000"> <h1 className="pl-2 text-[16px] font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
kan.bn kan.bn
</h1> </h1>
</Link> </Link>

2
apps/web/src/views/card/components/Dropdown.tsx
View File

@@ -28,7 +28,7 @@ export default function BoardDropdown() {
}, },
]} ]}
> >
<HiEllipsisHorizontal className="h-6 w-6 text-dark-900" /> <HiEllipsisHorizontal className="h-5 w-5 text-dark-900" />
</Dropdown> </Dropdown>
); );
} }

51
apps/web/src/views/card/index.tsx
View File

@@ -217,29 +217,52 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
<PageHead <PageHead
title={t`${card?.title ?? t`Card`} | ${board?.name ?? t`Board`}`} title={t`${card?.title ?? t`Card`} | ${board?.name ?? t`Board`}`}
/> />
<div className="flex h-full flex-1 flex-row overflow-hidden"> <div className="flex h-full flex-1 flex-col overflow-hidden">
<div className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] w-full flex-1 overflow-y-auto scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 hover:scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300 dark:hover:scrollbar-thumb-dark-300"> {/* Full-width top strip with board link and dropdown */}
<div className="p-auto mx-auto flex h-full w-full max-w-[800px] flex-col"> <div className="flex w-full items-center justify-between border-b-[1px] border-light-300 bg-light-50 px-8 py-2 dark:border-dark-300 dark:bg-dark-50">
<div className="p-6 md:p-8">
<div className="mb-8 flex w-full items-center justify-between md:mt-6">
{!card && isLoading && ( {!card && isLoading && (
<div className="flex space-x-2"> <div className="flex space-x-2">
<div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" /> <div className="h-[1.5rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
<div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
</div> </div>
)} )}
{card && ( {card && (
<> <>
<div className="flex items-center gap-1">
<Link <Link
className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]" className="whitespace-nowrapleading-[1.5rem] text-sm font-bold text-light-900 dark:text-dark-950"
href={`${isTemplate ? "/templates" : "/boards"}`}
>
{workspace.name}
</Link>
<IoChevronForwardSharp className="h-[10px] w-[10px] text-light-900 dark:text-dark-900" />
<Link
className="whitespace-nowrap text-sm font-bold leading-[1.5rem] text-light-900 dark:text-dark-950"
href={`${isTemplate ? "/templates" : "/boards"}/${board?.publicId}`} href={`${isTemplate ? "/templates" : "/boards"}/${board?.publicId}`}
> >
{board?.name} {board?.name}
</Link> </Link>
<IoChevronForwardSharp </div>
size={18} <div className="flex items-center gap-2">
className="mx-2 text-light-900 dark:text-dark-900" <Dropdown />
/> </div>
</>
)}
{!card && !isLoading && (
<p className="block p-0 py-0 font-bold leading-[1.5rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1rem]">
{t`Card not found`}
</p>
)}
</div>
<div className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] w-full flex-1 overflow-y-auto scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 hover:scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300 dark:hover:scrollbar-thumb-dark-300">
<div className="p-auto mx-auto flex h-full w-full max-w-[800px] flex-col">
<div className="p-6 md:p-8">
<div className="mb-8 md:mt-6">
{!card && isLoading && (
<div className="flex space-x-2">
<div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
</div>
)}
{card && (
<form <form
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
className="w-full space-y-6" className="w-full space-y-6"
@@ -254,10 +277,6 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
/> />
</div> </div>
</form> </form>
<div className="flex">
<Dropdown />
</div>
</>
)} )}
{!card && !isLoading && ( {!card && !isLoading && (
<p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]"> <p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">