CSS fixes and single column mode

todoblue/src/app/board/[board]/BoardColumn.module.css

@@ -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;
-}

todoblue/src/app/board/[board]/BoardColumn.tsx

@@ -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 (
-		<div className={style.boardColumn}>
-			<h3>
-				{taskGroup.name}
-			</h3>
-			<div className={style.boardColumnContents}>
-				{taskGroup.tasks.map(task => <TaskDisplay task={task} key={task.id}/>)}
-			</div>
-		</div>
-	)
-}

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}) {
 				<EditTitleButton/>
 			</LeftButtonsArea>
 			<RightButtonsArea>
+				<ToggleSingleColumnButton/>
 				<CycleGroupButton/>
 				<CycleSortButton/>
 			</RightButtonsArea>
@@ -114,6 +115,20 @@ function RightButtonsArea({children}: {children: ReactNode}) {
 	)
 }
 
+function ToggleSingleColumnButton() {
+	const {webSocketState, isSingleColumn, setSingleColumn} = useManagedBoard()
+
+	if(webSocketState != WebSocket.OPEN) {
+		return null;
+	}
+
+	return (
+		<button title={"Cambia numero di colonne"} onClick={() => setSingleColumn(prev => !prev)}>
+			<FontAwesomeIcon icon={faTableColumns}/>
+		</button>
+	)
+}
+
 function CycleGroupButton() {
 	const {webSocketState, nextGrouper} = useManagedBoard()
 
@@ -123,7 +138,7 @@ function CycleGroupButton() {
 
 	return (
 		<button title={"Cambia raggruppamento"} onClick={nextGrouper}>
-			<FontAwesomeIcon icon={faTableColumns}/>
+			<FontAwesomeIcon icon={faObjectGroup}/>
 		</button>
 	)
 }

todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css

@@ -1,19 +1,69 @@
 .boardMainTaskGroups {
 	display: flex;
-	justify-content: flex-start;
+	overflow-x: hidden;
-	flex-wrap: nowrap;
+
+	--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 {
+.boardMainTaskGroupsMultiColumn .boardColumnContents {
-	flex-basis: 240px;
+	overflow-y: scroll;
+}
+
+.boardColumn {
 	flex-shrink: 0;
 	flex-grow: 1;
 
-	margin-right: auto;
+	display: flex;
-	margin-left: auto;
+	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;
 }

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 (
-		<main className={cn(style.boardMainTaskGroups, className)}>
+		<main className={cn(className, {
+			[style.boardMainTaskGroups]: true,
+			[style.boardMainTaskGroupsMultiColumn]: !isSingleColumn,
+			[style.boardMainTaskGroupsSingleColumn]: isSingleColumn,
+		})}>
 			{taskGroups.map((tg) => <BoardColumn taskGroup={tg} key={tg.key}/>)}
 		</main>
 	)
 }
+
+function BoardColumn({taskGroup}: {taskGroup: TaskGroup}) {
+	return (
+		<div className={style.boardColumn}>
+			<h3>
+				{taskGroup.name}
+			</h3>
+			<div className={style.boardColumnContents}>
+				{taskGroup.tasks.map(task => <TaskDisplay task={task} key={task.id}/>)}
+			</div>
+		</div>
+	)
+}

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;
 }

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<SetStateAction<boolean>>,
 }
 
 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<boolean>(false)
+
     return {
 		title,
 		tasksById,
@@ -67,5 +71,7 @@ export function useBoard(name: string): UseBoardReturns {
 		setEditedTaskText,
 		editedTask,
 		setEditedTask,
+		isSingleColumn,
+		setSingleColumn,
 	}
 }