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

feat: add mobile list snap scrolling (#510)

Browse Source
This commit is contained in:
Max K.
2026-06-25 17:05:27 +02:00
committed by GitHub
parent 410f4c481e
commit ebb19584a2
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/views/board/components/List.tsx
View File

@@ -95,7 +95,7 @@ export default function List({
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100" className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] snap-start rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 md:snap-none dark:border-dark-300 dark:bg-dark-100"
> >
<div className="mb-2 flex justify-between"> <div className="mb-2 flex justify-between">
<form <form

4
apps/web/src/views/board/index.tsx
View File

@@ -634,7 +634,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
<div <div
ref={scrollRef} ref={scrollRef}
onMouseDown={onMouseDown} onMouseDown={onMouseDown}
className={`scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] z-0 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300`} className={`scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] z-0 flex-1 snap-x snap-mandatory overflow-y-hidden overflow-x-scroll overscroll-contain scroll-pl-[10px] scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 md:snap-none dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300`}
> >
{isLoading ? ( {isLoading ? (
<div className="ml-[2rem] flex"> <div className="ml-[2rem] flex">
@@ -685,7 +685,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps} {...provided.droppableProps}
> >
<div className="min-w-[2rem]" /> <div className="min-w-[10px]" />
{boardData.lists.map((list, index) => ( {boardData.lists.map((list, index) => (
<List <List
index={index} index={index}

6
apps/web/src/views/public/board/index.tsx
View File

@@ -165,7 +165,7 @@ export default function PublicBoardView() {
<div <div
ref={scrollRef} ref={scrollRef}
onMouseDown={onMouseDown} onMouseDown={onMouseDown}
className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative h-full flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300" className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative h-full flex-1 snap-x snap-mandatory overflow-y-hidden overflow-x-scroll overscroll-contain scroll-pl-[10px] scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 md:snap-none dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300"
> >
{isLoading || !router.isReady ? ( {isLoading || !router.isReady ? (
<div className="ml-[2rem] flex"> <div className="ml-[2rem] flex">
@@ -188,11 +188,11 @@ export default function PublicBoardView() {
</div> </div>
) : ( ) : (
<div className="flex"> <div className="flex">
<div className="min-w-[2rem]" /> <div className="min-w-[10px]" />
{data?.lists.map((list) => ( {data?.lists.map((list) => (
<div <div
key={list.publicId} key={list.publicId}
className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100" className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] snap-start rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 md:snap-none dark:border-dark-300 dark:bg-dark-100"
> >
<div className="flex justify-between"> <div className="flex justify-between">
<span className="mb-4 block px-4 pt-1 text-sm font-medium text-neutral-900 dark:text-dark-1000"> <span className="mb-4 block px-4 pt-1 text-sm font-medium text-neutral-900 dark:text-dark-1000">