diff --git a/todoblue/src/app/AppBody.module.css b/todoblue/src/app/AppBody.module.css new file mode 100644 index 0000000..cbbf4bf --- /dev/null +++ b/todoblue/src/app/AppBody.module.css @@ -0,0 +1,7 @@ +.appBody { + min-width: 100svw; + min-height: 100svh; + + width: 100svw; + height: 100svh; +} diff --git a/todoblue/src/app/AppBody.tsx b/todoblue/src/app/AppBody.tsx new file mode 100644 index 0000000..ded575f --- /dev/null +++ b/todoblue/src/app/AppBody.tsx @@ -0,0 +1,11 @@ +import {ReactNode} from "react" +import style from "./AppBody.module.css" + + +export function AppBody({children}: {children: ReactNode}) { + return ( + + {children} + + ) +} diff --git a/todoblue/src/app/board/[board]/BoardColumn.tsx b/todoblue/src/app/board/[board]/BoardColumn.tsx index bc80b0c..9d75ce3 100644 --- a/todoblue/src/app/board/[board]/BoardColumn.tsx +++ b/todoblue/src/app/board/[board]/BoardColumn.tsx @@ -9,7 +9,9 @@ export function BoardColumn({taskGroup}: {taskGroup: TaskGroup}) {

{taskGroup.name}

- {taskGroup.tasks.map(task => )} +
+ {taskGroup.tasks.map(task => )} +
) } diff --git a/todoblue/src/app/board/[board]/BoardHeader.tsx b/todoblue/src/app/board/[board]/BoardHeader.tsx index 44f90db..b4d8a31 100644 --- a/todoblue/src/app/board/[board]/BoardHeader.tsx +++ b/todoblue/src/app/board/[board]/BoardHeader.tsx @@ -7,11 +7,11 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import cn from "classnames" -export function BoardHeader() { +export function BoardHeader({className}: {className?: string}) { const {isEditingTitle} = useManagedBoard(); return ( -
+
{isEditingTitle ? : } @@ -36,16 +36,18 @@ function TitleArea({children}: {children: ReactNode}) { } function TitleInput() { - const {editTitle, setEditTitle} = useManagedBoard() + const {editTitle, setEditTitle, stopEditingTitle} = useManagedBoard() return ( - setEditTitle(e.target.value)} - value={editTitle} - /> +
+ setEditTitle(e.target.value)} + value={editTitle} + /> +
) } diff --git a/todoblue/src/app/board/[board]/BoardMain.tsx b/todoblue/src/app/board/[board]/BoardMain.tsx index a7d6486..039462a 100644 --- a/todoblue/src/app/board/[board]/BoardMain.tsx +++ b/todoblue/src/app/board/[board]/BoardMain.tsx @@ -1,22 +1,23 @@ -import {BoardMainTaskGroups} from "@/app/board/[board]/BoardMainTaskGroups" import {BoardMainIcon} from "@/app/board/[board]/BoardMainIcon" +import {BoardMainTaskGroups} from "@/app/board/[board]/BoardMainTaskGroups" import {useManagedBoard} from "@/app/board/[board]/BoardManager" +import {faArrowsSpin, faExclamationCircle, faGear} from "@fortawesome/free-solid-svg-icons" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" -import {faGear, faArrowsSpin, faExclamationCircle} from "@fortawesome/free-solid-svg-icons" +import cn from "classnames" -export function BoardMain() { +export function BoardMain({className}: {className?: string}) { const {websocketState} = useManagedBoard() switch(websocketState) { case undefined: - return } text={"Caricamento..."}/> + return } text={"Caricamento..."} className={className}/> case WebSocket.CONNECTING: - return } text={"Connessione..."}/> + return } text={"Connessione..."} className={className}/> case WebSocket.OPEN: - return + return case WebSocket.CLOSING: case WebSocket.CLOSED: - return } text={"Errore"} className={"red"}/> + return } text={"Errore"} className={cn("red", className)}/> } } diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css b/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css index 0c40b98..72e243d 100644 --- a/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css +++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css @@ -1,11 +1,21 @@ .boardMainTaskGroups { display: flex; gap: 8px; - justify-content: center; - flex-wrap: wrap; + justify-content: start; + flex-wrap: nowrap; + + overflow-x: scroll; + overflow-y: hidden; } .boardMainTaskGroups > div { flex-basis: 240px; flex-shrink: 0; } + +.boardMainTaskGroups > div > div { + display: flex; + flex-direction: column; + gap: 8px; + overflow-y: scroll; +} diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx index 04b5ec3..c40061a 100644 --- a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx +++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx @@ -1,13 +1,14 @@ import {BoardColumn} from "@/app/board/[board]/BoardColumn" import {useManagedBoard} from "@/app/board/[board]/BoardManager" +import cn from "classnames" import style from "./BoardMainTaskGroups.module.css" -export function BoardMainTaskGroups() { +export function BoardMainTaskGroups({className}: {className?: string}) { const {taskGroups} = useManagedBoard() return ( -
+
{taskGroups.map((tg) => )}
) diff --git a/todoblue/src/app/board/[board]/BoardTaskEditor.module.css b/todoblue/src/app/board/[board]/BoardTaskEditor.module.css new file mode 100644 index 0000000..f263c9e --- /dev/null +++ b/todoblue/src/app/board/[board]/BoardTaskEditor.module.css @@ -0,0 +1,14 @@ +.editorForm { + display: flex; + flex-direction: row; +} + +.editorTextInput { + width: 100%; + height: 100%; +} + +.editorSubmitButton { + width: 44px; + height: 44px; +} diff --git a/todoblue/src/app/board/[board]/BoardTaskEditor.tsx b/todoblue/src/app/board/[board]/BoardTaskEditor.tsx new file mode 100644 index 0000000..ee38fb5 --- /dev/null +++ b/todoblue/src/app/board/[board]/BoardTaskEditor.tsx @@ -0,0 +1,46 @@ +import {useManagedBoard} from "@/app/board/[board]/BoardManager" +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" +import cn from "classnames" +import {FormEvent, useCallback} from "react" +import style from "./BoardTaskEditor.module.css" +import {faAdd} from "@fortawesome/free-solid-svg-icons" + + +export function BoardTaskEditor({className}: {className?: string}) { + const {editedTask, send, setEditedTaskText} = useManagedBoard() + + const submitTask = useCallback((e: FormEvent) => { + e.preventDefault(); + send({"Task": [null, editedTask]}); + setEditedTaskText("") + }, [send, editedTask]) + + return ( +
+ + + + ) +} + +function EditorTextInput() { + const {editedTaskText, setEditedTaskText} = useManagedBoard(); + + return ( + setEditedTaskText(e.target.value)} + className={style.editorTextInput} + /> + ) +} + +function EditorSubmitButton() { + return ( + + ) +} diff --git a/todoblue/src/app/board/[board]/page.module.css b/todoblue/src/app/board/[board]/page.module.css new file mode 100644 index 0000000..6b40976 --- /dev/null +++ b/todoblue/src/app/board/[board]/page.module.css @@ -0,0 +1,35 @@ +.pageRoot { + display: grid; + + grid-template-areas: + "header" + "main" + "editor" + ; + grid-template-rows: auto 1fr 44px; + grid-row-gap: 8px; + + justify-content: stretch; + align-items: stretch; + + width: 100%; + height: 100%; + + padding: 8px; +} + +.pageHeader { + grid-area: header; +} + +.pageMain { + grid-area: main; + + overflow-x: scroll; +} + +.pageEditor { + grid-area: editor; + + min-height: 44px; +} diff --git a/todoblue/src/app/board/[board]/page.tsx b/todoblue/src/app/board/[board]/page.tsx index 31f9b21..07f2b89 100644 --- a/todoblue/src/app/board/[board]/page.tsx +++ b/todoblue/src/app/board/[board]/page.tsx @@ -3,15 +3,18 @@ import {BoardMain} from "@/app/board/[board]/BoardMain" import {BoardManager} from "@/app/board/[board]/BoardManager" import {BoardHeader} from "@/app/board/[board]/BoardHeader" -import {BoardTaskEditForm} from "@/app/board/[board]/BoardTaskEditForm" +import {BoardTaskEditor} from "@/app/board/[board]/BoardTaskEditor" +import style from "./page.module.css" export default function Page({params: {board}}: {params: {board: string}}) { return ( - - - +
+ + + +
) } diff --git a/todoblue/src/app/layout.css b/todoblue/src/app/layout.css new file mode 100644 index 0000000..27b01c7 --- /dev/null +++ b/todoblue/src/app/layout.css @@ -0,0 +1,6 @@ +@import "@steffo/bluelib/dist/base.root.css"; +@import "@steffo/bluelib/dist/classic.root.css"; +@import "@steffo/bluelib/dist/glass.root.css"; +@import "@steffo/bluelib/dist/colors-royalblue.root.css"; +@import "@steffo/bluelib/dist/fonts-fira-ghpages.root.css"; +@import '@fortawesome/fontawesome-svg-core/styles.css'; diff --git a/todoblue/src/app/layout.tsx b/todoblue/src/app/layout.tsx index fe4b9a7..b55c79a 100644 --- a/todoblue/src/app/layout.tsx +++ b/todoblue/src/app/layout.tsx @@ -1,12 +1,7 @@ // noinspection JSUnusedGlobalSymbols -import "@steffo/bluelib/dist/base.root.css" -import "@steffo/bluelib/dist/classic.root.css" -import "@steffo/bluelib/dist/glass.root.css" -import "@steffo/bluelib/dist/layouts-center.root.css" -import "@steffo/bluelib/dist/colors-royalblue.root.css" -import "@steffo/bluelib/dist/fonts-fira-ghpages.root.css" -import '@fortawesome/fontawesome-svg-core/styles.css'; +import "./layout.css"; +import {AppBody} from "@/app/AppBody" import { config } from '@fortawesome/fontawesome-svg-core'; config.autoAddCss = false; /* eslint-disable import/first */ @@ -23,17 +18,9 @@ export const metadata: NextMetadata = { export default function RootLayout({children}: { children: ReactNode }) { return ( - + {children} - - + ) } diff --git a/todoblue/src/app/page.module.css b/todoblue/src/app/page.module.css new file mode 100644 index 0000000..d95d4e4 --- /dev/null +++ b/todoblue/src/app/page.module.css @@ -0,0 +1,19 @@ +.pageRoot { + width: 100%; + height: 100%; + + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + + padding: 8px; +} + +.pageMain h2 { + margin-top: 0; +} + +.pageMain div { + max-width: 960px; +} diff --git a/todoblue/src/app/page.tsx b/todoblue/src/app/page.tsx index 141455c..f9838d6 100644 --- a/todoblue/src/app/page.tsx +++ b/todoblue/src/app/page.tsx @@ -1,15 +1,29 @@ import {CreatePrivateBoardPanel} from "@/app/CreatePrivateBoardPanel" import {CreatePublicBoardPanel} from "@/app/CreatePublicBoardPanel" import {default as React} from "react"; +import style from "./page.module.css" export default function Page() { - return <> -
+ return
+ + + +
+} + +function PageHeader() { + return ( +

{process.env.NEXT_PUBLIC_SITE_NAME ?? "Todoblue"}

-
+ ) +} + +function PageMain() { + return ( +

Crea un nuovo tabellone @@ -18,5 +32,17 @@ export default function Page() {

- + ) +} + +function PageFooter() { + return ( + + ) }