feat(app-crm): overflow:scroll added to kanban (#4884)

Co-authored-by: Ali Emir Şen <[email protected]>
refinedev · Aug 31, 2023 · 5f1dc62 · 5f1dc62
1 parent 9c65102
commit 5f1dc62
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 40 deletions.
diff --git a/examples/app-crm/src/components/kanban/board/index.module.css b/examples/app-crm/src/components/kanban/board/index.module.css
@@ -1,7 +1,18 @@
 .container {
     height: 100%;
     width: 100%;
+    overflow-x: scroll;
+    overflow-y: hidden;
     overflow: scroll;
     display: flex;
     gap: 32px;
+    padding: 0 32px;
+}
+
+.wrapper {
+    width: calc(100% + 64px);
+    display: flex;
+    flex-direction: column;
+    margin: -32px;
+    height: calc(100vh - 64px);
 }
diff --git a/examples/app-crm/src/components/kanban/board/index.tsx b/examples/app-crm/src/components/kanban/board/index.tsx
@@ -40,10 +40,12 @@ export const KanbanBoard: FC<PropsWithChildren<Props>> = ({
     };
 
     return (
-        <div className={styles.container}>
-            <DndContext onDragEnd={handleDragEnd} sensors={sensors}>
-                {children}
-            </DndContext>
+        <div className={styles.wrapper}>
+            <div className={styles.container}>
+                <DndContext onDragEnd={handleDragEnd} sensors={sensors}>
+                    {children}
+                </DndContext>
+            </div>
         </div>
     );
 };
diff --git a/examples/app-crm/src/components/kanban/column/index.module.css b/examples/app-crm/src/components/kanban/column/index.module.css
@@ -14,6 +14,8 @@
         padding-left: 16px;
         padding-right: 16px;
         background-color: #fff;
+        margin-top: 16px;
+        padding-top: 0;
     }
 }
 
@@ -60,9 +62,16 @@
     gap: 12px;
 }
 
+.columnScrollableContainer {
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: 24px;
+}
+
 .childrenWrapper {
     margin-top: 12px;
-    height: 100%;
+    min-height: 100%;
+    max-height: auto;
     display: flex;
     flex-direction: column;
     gap: 8px;

diff --git a/examples/app-crm/src/components/kanban/column/index.tsx b/examples/app-crm/src/components/kanban/column/index.tsx
@@ -98,12 +98,14 @@ export const KanbanColumn: FC<PropsWithChildren<Props>> = ({
                 </div>
                 {description}
             </div>
-            <div
-                className={cn(styles.childrenWrapper, {
-                    [styles.isOver]: isOver,
-                })}
-            >
-                {children}
+            <div className={styles.columnScrollableContainer}>
+                <div
+                    className={cn(styles.childrenWrapper, {
+                        [styles.isOver]: isOver,
+                    })}
+                >
+                    {children}
+                </div>
             </div>
         </div>
     );

diff --git a/examples/app-crm/src/components/kanban/item/index.tsx b/examples/app-crm/src/components/kanban/item/index.tsx
@@ -19,43 +19,40 @@ export const KanbanItem: FC<PropsWithChildren<Props>> = ({
         id,
         data,
     });
+
     return (
-        <>
+        <div
+            style={{
+                position: "relative",
+            }}
+        >
             <div
+                ref={setNodeRef}
+                {...listeners}
+                {...attributes}
                 style={{
+                    opacity: active ? (active.id === id ? 1 : 0.5) : 1,
+                    borderRadius: "8px",
                     position: "relative",
+                    cursor: "grab",
                 }}
             >
-                <div
-                    ref={setNodeRef}
-                    {...listeners}
-                    {...attributes}
-                    style={{
-                        opacity: active ? (active.id === id ? 1 : 0.5) : 1,
-                        borderRadius: "8px",
-                        position: "relative",
-                        cursor: "grab",
-                    }}
-                >
-                    {children}
-                </div>
+                {children}
             </div>
-            {
+            {active?.id === id && (
                 <DragOverlay>
-                    {active?.id === id && (
-                        <div
-                            style={{
-                                borderRadius: "8px",
-                                boxShadow:
-                                    "0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08)",
-                                cursor: "grabbing",
-                            }}
-                        >
-                            {children}
-                        </div>
-                    )}
+                    <div
+                        style={{
+                            borderRadius: "8px",
+                            boxShadow:
+                                "0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08)",
+                            cursor: "grabbing",
+                        }}
+                    >
+                        {children}
+                    </div>
                 </DragOverlay>
-            }
-        </>
+            )}
+        </div>
     );
 };