Add scrollable content in lists

Caleb-o · Oct 13, 2023 · 5e5da9f · 5e5da9f
1 parent 0ec7e1f
commit 5e5da9f
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
     <head>
         <title>Kanban</title>
-        <meta name="viewport" content="width=device-width" />
+        <meta name="viewport" content="width=device-width, height=device-height" />
         <link rel="stylesheet" href="style.css" />
         <script src="index.js" defer></script>
     </head>

diff --git a/index.js b/index.js
diff --git a/style.css b/style.css
@@ -16,7 +16,7 @@
 .board {
     width: 100%;
     height: 100vh;
-    overflow: scroll;
+    overflow: hidden;
 
     background-image: url(https://images.unsplash.com/photo-1696332331308-8a064129a487?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80);
     background-position: center;
@@ -52,8 +52,7 @@
 
     padding: 24px 32px;
 
-    overflow: scroll;
-    height: 100%;
+    overflow: hidden;
 }
 
 .list-heading-text {
@@ -115,11 +114,18 @@
     padding: 12px;
     border-radius: 4px;
     width: 225px;
-    min-height: 120px;
+    min-height: 100px;
+    max-height: 80vh;
 
     flex-shrink: 0;
 }
 
+.list-content {
+    min-height: 48px;
+    height: 100%;
+    overflow-y: scroll;
+}
+
 #list-add-btn {
     border: none;
     border-radius: 4px;
@@ -128,15 +134,17 @@
 }
 
 #list-add-btn:hover {
-    box-shadow: 0px 5px 15px inset rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 5px 15px inset rgba(0, 0, 0, 0.05);
+    cursor: pointer;
 }
 
 .task {
     display: flex;
     background: white;
-    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
 
     padding: 12px;
+    margin: 0 4px 10px 4px;
     border-radius: 4px;
 
     cursor: move;
@@ -154,20 +162,21 @@
 
 .task .task-edit {
     border: none;
-    padding: 4px;
     margin: 0 8px;
     background: transparent;
 }
 
 .task .task-edit:hover {
     background-color: rgb(241, 241, 241);
     border: 1px solid rgb(241, 241, 241);
-    border-radius: 14px;
+    border-radius: 16px;
+
+    cursor: pointer;
 }
 
 .is-dragging {
     scale: 1.05;
-    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
     background: rgb(50, 50, 50);
     color: white;
 }

diff --git a/ts-src/dragging.ts b/ts-src/dragging.ts
@@ -3,7 +3,7 @@ import { addDragListeners } from './layout';
 
 export function setupDraggables(api: API) {
     const dragables = document.querySelectorAll('.task') as NodeListOf<HTMLElement>;
-    const droppables = document.querySelectorAll('.swim-list') as NodeListOf<HTMLElement>;
+    const droppables = document.querySelectorAll('.list-content') as NodeListOf<HTMLElement>;
 
     dragables.forEach((task) => addDragListeners(task));
     droppables.forEach((zone) => setupListDragZone(api, zone));
@@ -17,7 +17,7 @@ export function setupListDragZone(api: API, zone: HTMLElement) {
         const currentTask = document.querySelector('.is-dragging') as HTMLElement;
 
         const taskItem = api.getTaskFromID(currentTask.id);
-        taskItem.setListID(zone.id);
+        taskItem.setListID(zone.getAttribute('value')!);
 
         if (!bottomTask) {
             zone.appendChild(currentTask);

diff --git a/ts-src/layout.ts b/ts-src/layout.ts
@@ -122,17 +122,19 @@ export function setupNewTaskModalFields(api: API) {
         }
 
         // Add to todo list
-        const list = (document.querySelectorAll('.swim-list') as NodeListOf<HTMLElement>)[0];
+        const firstList = (document.querySelectorAll('.swim-list') as NodeListOf<HTMLElement>)[0];
+        const listContent = firstList.querySelector('.list-content') as HTMLDivElement;
+
         const taskEl = createTaskItemElement(api, taskTitle.value, api.CurrentTaskIndex);
-        list.appendChild(taskEl);
+        listContent.appendChild(taskEl);
 
         const tagKind = document.querySelector('#kind-option') as HTMLSelectElement;
         const dueDate = document.querySelector('#due-date') as HTMLInputElement;
         const colorSelected = document.querySelector('#color-selected') as HTMLSelectElement;
 
         api.addNewTask(
             date,
-            list.id,
+            firstList.id,
             taskTitle.value,
             tagStrToKind(tagKind.value),
             dueDate.valueAsDate,
@@ -156,8 +158,12 @@ export function generateElementsForLoadedData(api: API) {
 
     // Generate all task elements
     api.Tasks.forEach((task) => {
+        console.log(task);
+
+        console.log(`Loading '${task.ListID}'`);
         const list = document.querySelector(`#${task.ListID}`) as HTMLDivElement;
-        list.appendChild(createTaskItemElement(api, task.Title, task.ID));
+        const content = list.querySelector('.list-content') as HTMLDivElement;
+        content.appendChild(createTaskItemElement(api, task.Title, task.ID));
     });
 }
 
@@ -248,9 +254,11 @@ function createListWithName(api: API, title: string): HTMLElement {
             <input class="list-heading" type="text">TODO</h3>
         </div>
      */
+    const listID = listNameToID(title);
+
     const el = document.createElement('div') as HTMLDivElement;
     el.className = 'swim-list';
-    el.id = listNameToID(title);
+    el.id = listID;
 
     const header = document.createElement('div') as HTMLDivElement;
     el.appendChild(header);
@@ -279,13 +287,19 @@ function createListWithName(api: API, title: string): HTMLElement {
             return;
         }
 
-        api.deleteTaskList(el.id);
+        api.deleteTaskList(listID);
 
         const listDiv = document.querySelector('#task-lists') as HTMLDivElement;
         listDiv.removeChild(el);
     };
 
-    setupListDragZone(api, el);
+    const listContentZone = document.createElement('div') as HTMLDivElement;
+    el.appendChild(listContentZone);
+
+    listContentZone.setAttribute('value', listID);
+    listContentZone.className = 'list-content';
+
+    setupListDragZone(api, listContentZone);
 
     return el;
 }
@@ -304,6 +318,9 @@ function listHeaderChange(el: HTMLElement, self: HTMLInputElement, e: Event, api
         return;
     }
 
+    const content = el.querySelector('.list-content') as HTMLElement;
+    content.setAttribute('value', newID);
+
     api.renameTaskList(self.defaultValue, self.value);
     self.defaultValue = self.value;
     el.id = newID;