diff --git a/todoblue/src/app/board/[board]/BoardColumn.module.css b/todoblue/src/app/board/[board]/BoardColumn.module.css
deleted file mode 100644
index 6c91363..0000000
--- a/todoblue/src/app/board/[board]/BoardColumn.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.boardColumn {
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-.boardColumnContents > * {
- flex-shrink: 0;
-}
-
-.boardColumnContents {
- display: flex;
- flex-direction: column;
- gap: 8px;
- padding-left: 4px;
- padding-right: 4px;
- padding-bottom: 8px;
-
- overflow-x: hidden;
- overflow-y: scroll;
-}
diff --git a/todoblue/src/app/board/[board]/BoardColumn.tsx b/todoblue/src/app/board/[board]/BoardColumn.tsx
deleted file mode 100644
index 3e9c70e..0000000
--- a/todoblue/src/app/board/[board]/BoardColumn.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {TaskDisplay} from "@/app/board/[board]/TaskDisplay"
-import {TaskGroup} from "@/app/board/[board]/useBoardTaskArranger"
-import style from "./BoardColumn.module.css"
-
-
-export function BoardColumn({taskGroup}: {taskGroup: TaskGroup}) {
- return (
-
-
- {taskGroup.name}
-
-
- {taskGroup.tasks.map(task => )}
-
-
- )
-}
diff --git a/todoblue/src/app/board/[board]/BoardHeader.tsx b/todoblue/src/app/board/[board]/BoardHeader.tsx
index 22045bb..9c33ea1 100644
--- a/todoblue/src/app/board/[board]/BoardHeader.tsx
+++ b/todoblue/src/app/board/[board]/BoardHeader.tsx
@@ -2,7 +2,7 @@ import {useRouter} from "next/navigation"
import {ReactNode, useCallback} from "react"
import style from "./BoardHeader.module.css"
import {useManagedBoard} from "@/app/board/[board]/BoardManager"
-import {faArrowDownWideShort, faHouse, faPencil, faTableColumns} from "@fortawesome/free-solid-svg-icons"
+import {faArrowDownWideShort, faHouse, faPencil, faObjectGroup, faTableColumns} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import cn from "classnames"
@@ -20,6 +20,7 @@ export function BoardHeader({className}: {className?: string}) {
+
@@ -114,6 +115,20 @@ function RightButtonsArea({children}: {children: ReactNode}) {
)
}
+function ToggleSingleColumnButton() {
+ const {webSocketState, isSingleColumn, setSingleColumn} = useManagedBoard()
+
+ if(webSocketState != WebSocket.OPEN) {
+ return null;
+ }
+
+ return (
+
+ )
+}
+
function CycleGroupButton() {
const {webSocketState, nextGrouper} = useManagedBoard()
@@ -123,7 +138,7 @@ function CycleGroupButton() {
return (
)
}
diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css b/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css
index d01b718..fd03ea6 100644
--- a/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css
+++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css
@@ -1,19 +1,69 @@
.boardMainTaskGroups {
display: flex;
- justify-content: flex-start;
- flex-wrap: nowrap;
+ overflow-x: hidden;
+
+ --todoblue-column-min-width: 240px;
+ --todoblue-column-max-width: 480px;
+}
+
+.boardMainTaskGroupsSingleColumn {
+ flex-direction: column;
+
+ justify-content: flex-start;
+ align-items: stretch;
+
+ overflow-y: scroll;
+}
+
+.boardMainTaskGroupsMultiColumn {
+ flex-direction: row;
+
+ justify-content: flex-start;
+ align-items: flex-start;
- overflow-x: scroll;
overflow-y: hidden;
}
-.boardMainTaskGroups > div {
- flex-basis: 240px;
+.boardMainTaskGroupsMultiColumn .boardColumnContents {
+ overflow-y: scroll;
+}
+
+.boardColumn {
flex-shrink: 0;
flex-grow: 1;
- margin-right: auto;
- margin-left: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: stretch;
+ gap: 8px;
- max-width: 480px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.boardMainTaskGroupsSingleColumn .boardColumn {
+ width: var(--todoblue-column-max-width);
+}
+
+.boardMainTaskGroupsMultiColumn .boardColumn {
+ width: 248px;
+ max-width: var(--todoblue-column-max-width);
+ height: 100%;
+}
+
+.boardColumnContents {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding-left: 4px;
+ padding-right: 4px;
+ padding-bottom: 8px;
+}
+
+.boardMainTaskGroupsMultiColumn .boardColumnContents {
+ overflow-y: scroll;
+}
+
+.boardColumnContents > * {
+ flex-shrink: 0;
}
diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx
index 974b43c..86875eb 100644
--- a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx
+++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx
@@ -1,15 +1,33 @@
-import {BoardColumn} from "@/app/board/[board]/BoardColumn"
import {useManagedBoard} from "@/app/board/[board]/BoardManager"
+import {TaskDisplay} from "@/app/board/[board]/TaskDisplay"
+import {TaskGroup} from "@/app/board/[board]/useBoardTaskArranger"
import cn from "classnames"
import style from "./BoardMainTaskGroups.module.css"
export function BoardMainTaskGroups({className}: {className?: string}) {
- const {taskGroups} = useManagedBoard()
+ const {taskGroups, isSingleColumn} = useManagedBoard()
return (
-
+
{taskGroups.map((tg) => )}
)
}
+
+function BoardColumn({taskGroup}: {taskGroup: TaskGroup}) {
+ return (
+
+
+ {taskGroup.name}
+
+
+ {taskGroup.tasks.map(task => )}
+
+
+ )
+}
diff --git a/todoblue/src/app/board/[board]/TaskDisplay.module.css b/todoblue/src/app/board/[board]/TaskDisplay.module.css
index cd16657..7b59b68 100644
--- a/todoblue/src/app/board/[board]/TaskDisplay.module.css
+++ b/todoblue/src/app/board/[board]/TaskDisplay.module.css
@@ -2,7 +2,7 @@
display: grid;
align-items: center;
min-width: 240px;
- min-height: 44px;
+ min-height: 46px;
cursor: pointer;
}
diff --git a/todoblue/src/app/board/[board]/useBoard.tsx b/todoblue/src/app/board/[board]/useBoard.tsx
index 9d2bfa5..a16a173 100644
--- a/todoblue/src/app/board/[board]/useBoard.tsx
+++ b/todoblue/src/app/board/[board]/useBoard.tsx
@@ -8,7 +8,7 @@ import {useBoardWs} from "@/app/board/[board]/useBoardWs"
import {TaskGroup, useBoardTaskArranger} from "@/app/board/[board]/useBoardTaskArranger"
import {useBoardTitleEditor} from "@/app/board/[board]/useBoardTitleEditor"
import {useCycleState} from "@/app/useCycleState"
-import {Dispatch, SetStateAction} from "react"
+import {Dispatch, SetStateAction, useState} from "react"
export interface UseBoardReturns {
title: string,
@@ -32,6 +32,8 @@ export interface UseBoardReturns {
setEditedTaskText: (text: string) => void,
editedTask: Task,
setEditedTask: (task: Task) => void,
+ isSingleColumn: boolean,
+ setSingleColumn: Dispatch>,
}
export function useBoard(name: string): UseBoardReturns {
@@ -45,6 +47,8 @@ export function useBoard(name: string): UseBoardReturns {
const {editedTaskText, setEditedTaskText, editedTask, setEditedTask} = useBoardTaskEditor()
+ const [isSingleColumn, setSingleColumn] = useState(false)
+
return {
title,
tasksById,
@@ -67,5 +71,7 @@ export function useBoard(name: string): UseBoardReturns {
setEditedTaskText,
editedTask,
setEditedTask,
+ isSingleColumn,
+ setSingleColumn,
}
}