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

feat: horizontal list scroll

Browse Source
This commit is contained in:
Henry
2023-12-06 23:07:04 +00:00
parent 956f5b131e
commit 5408c4a161
4 changed files with 81 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/_components/dashboard.tsx
View File

@@ -58,7 +58,7 @@ export default async function Layout(props: { children: React.ReactNode }) {
</p> </p>
</button> </button>
</nav> </nav>
<div className="w-full p-8">{props.children}</div> <div className="w-full overflow-hidden py-8 pl-8">{props.children}</div>
</div> </div>
</main> </main>
); );

155
src/app/boards/[...id]/page.tsx
View File

@@ -141,7 +141,7 @@ export default function BoardPage() {
return ( return (
<div> <div>
<div className="mb-8 flex w-full justify-between"> <div className="mb-8 flex w-full justify-between pr-8">
<form <form
onSubmit={formik.handleSubmit} onSubmit={formik.handleSubmit}
className="focus-visible:outline-none" className="focus-visible:outline-none"
@@ -171,82 +171,85 @@ export default function BoardPage() {
</div> </div>
</div> </div>
<DragDropContext onDragEnd={onDragEnd}> <div className="overflow-x-scroll overscroll-contain">
<Droppable droppableId="all-lists" direction="horizontal" type="LIST"> <DragDropContext onDragEnd={onDragEnd}>
{(provided) => ( <Droppable droppableId="all-lists" direction="horizontal" type="LIST">
<div {(provided) => (
className="flex" <div
ref={provided.innerRef} className="flex"
{...provided.droppableProps} ref={provided.innerRef}
> {...provided.droppableProps}
{boardData?.lists?.map((list: List, index) => ( >
<Draggable {boardData?.lists?.map((list: List, index) => (
key={list.publicId} <Draggable
draggableId={list.publicId} key={list.publicId}
index={index} draggableId={list.publicId}
> index={index}
{(provided) => ( >
<div {(provided) => (
key={list.publicId} <div
ref={provided.innerRef} key={list.publicId}
{...provided.draggableProps} ref={provided.innerRef}
{...provided.dragHandleProps} {...provided.draggableProps}
className="mr-5 w-72 rounded-md border border-dark-400 bg-dark-200 px-2 py-2" {...provided.dragHandleProps}
> className="mr-5 min-w-[17rem] rounded-md border border-dark-400 bg-dark-200 px-2 py-2"
<div className="flex justify-between"> >
<p className="mb-4 px-4 pt-1 text-sm font-medium text-dark-1000"> <div className="flex justify-between">
{list.name} <p className="mb-4 px-4 pt-1 text-sm font-medium text-dark-1000">
</p> {list.name}
<button </p>
className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-dark-400" <button
onClick={() => openNewCardForm(list.publicId)} className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-dark-400"
> onClick={() => openNewCardForm(list.publicId)}
<HiOutlinePlusSmall
className="h-5 w-5 text-dark-900"
aria-hidden="true"
/>
</button>
</div>
<Droppable droppableId={`${list.publicId}`} type="CARD">
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
className="h-full"
> >
{list.cards?.map((card, index) => ( <HiOutlinePlusSmall
<Draggable className="h-5 w-5 text-dark-900"
key={card.publicId} aria-hidden="true"
draggableId={card.publicId} />
index={index} </button>
> </div>
{(provided) => ( <Droppable droppableId={`${list.publicId}`} type="CARD">
<Link {(provided) => (
key={card.publicId} <div
href={`/cards/${card.publicId}`} ref={provided.innerRef}
className="mb-2 flex !cursor-pointer rounded-md border border-dark-200 bg-dark-500 px-3 py-2 text-sm text-dark-1000" {...provided.droppableProps}
ref={provided.innerRef} className="h-full"
{...provided.draggableProps} >
{...provided.dragHandleProps} {list.cards?.map((card, index) => (
> <Draggable
{card.title} key={card.publicId}
</Link> draggableId={card.publicId}
)} index={index}
</Draggable> >
))} {(provided) => (
{provided.placeholder} <Link
</div> key={card.publicId}
)} href={`/cards/${card.publicId}`}
</Droppable> className="mb-2 flex !cursor-pointer rounded-md border border-dark-200 bg-dark-500 px-3 py-2 text-sm text-dark-1000"
</div> ref={provided.innerRef}
)} {...provided.draggableProps}
</Draggable> {...provided.dragHandleProps}
))} >
{provided.placeholder} {card.title}
</div> </Link>
)} )}
</Droppable> </Draggable>
</DragDropContext> ))}
{provided.placeholder}
</div>
)}
</Droppable>
</div>
)}
</Draggable>
))}
<div className="min-w-[0.75rem]"></div>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
<Modal> <Modal>
{modalContentType === "NEW_CARD" && ( {modalContentType === "NEW_CARD" && (
<NewCardForm listPublicId={selectedPublicListId} /> <NewCardForm listPublicId={selectedPublicListId} />

2
src/app/boards/page.tsx
View File

@@ -12,7 +12,7 @@ export default function BoardsPage() {
const { openModal } = useModal(); const { openModal } = useModal();
return ( return (
<div> <div className="pr-8">
<div className="mb-8 flex w-full justify-between"> <div className="mb-8 flex w-full justify-between">
<h1 className="font-medium tracking-tight text-dark-1000 sm:text-[1.2rem]"> <h1 className="font-medium tracking-tight text-dark-1000 sm:text-[1.2rem]">
Boards Boards

1
src/app/providers/modal.tsx
View File

@@ -26,7 +26,6 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
const closeModal = () => { const closeModal = () => {
setIsOpen(false); setIsOpen(false);
setModalContentType("");
}; };
return ( return (