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>
</button>
</nav>
<div className="w-full p-8">{props.children}</div>
<div className="w-full overflow-hidden py-8 pl-8">{props.children}</div>
</div>
</main>
);

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

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

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

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

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

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