From 5483c46ca1a089b83721e5ae7cf0f5087776d5f7 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Tue, 23 Jul 2024 01:48:27 +0200 Subject: [PATCH] improve taskPage layout --- dist/index.css | 25 +++++++++++++++++++------ dist/index.js | 9 ++++++--- src/View/ChatPages/taskPage.tsx | 12 +++++++----- src/View/chatPage.css | 28 ++++++++++++++++++++++------ 4 files changed, 54 insertions(+), 20 deletions(-) diff --git a/dist/index.css b/dist/index.css index 841602e4..669d2f88 100644 --- a/dist/index.css +++ b/dist/index.css @@ -286,14 +286,15 @@ body[showing-chat] #chat-page-wrapper { #chat-page > div > #ribbon > span { height: 100%; flex: 1; - overflow: auto; + overflow-y: auto; justify-content: flex-end; } #chat-page > div > #main > div > .pane > .toolbar { height: var(--ribbon-size); border-bottom: 1px solid var(--border); + overflow-y: hidden; overflow-x: auto; - padding-left: var(--content-padding); + padding: var(--gap-between-tiles); border-top: 1px solid var(--border); } #chat-page > div > #ribbon, @@ -301,14 +302,23 @@ body[showing-chat] #chat-page-wrapper { align-items: center; } #chat-page #ribbon > span, -#chat-page > div > #main > div > .pane > .toolbar > span { +#chat-page > div > #main > div > .pane > .toolbar { display: flex; - flex-direction: column; + flex-direction: row; + align-items: center; + justify-content: start; padding: var(--gap-between-tiles); gap: var(--gap-between-tiles); } -#chat-page > div > #ribbon > span { - width: 100%; +#chat-page > div > #main > div > .pane > .toolbar > span { + padding-left: var(--content-padding); +} +#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) { + height: 100%; + flex: 1; +} +#chat-page #ribbon > span { + flex-direction: column; } #chat-page > div > #ribbon button, #chat-page > div > #main > div > .pane > .toolbar button { @@ -320,6 +330,9 @@ body[showing-chat] #chat-page-wrapper { align-items: center; justify-content: center; } +#chat-page > div > #ribbon > span { + width: 100%; +} #chat-page > div > #ribbon > button { margin-top: var(--gap-between-tiles); } diff --git a/dist/index.js b/dist/index.js index d39faf3c..14a1d33d 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1964,7 +1964,7 @@ // src/View/ChatPages/taskPage.tsx function TaskPage(taskPageViewModel) { taskPageViewModel.loadData(); - return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane side" }, /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement( + return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane side" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement( "input", { "bind:value": taskPageViewModel.newBoardNameInput, @@ -1980,12 +1980,15 @@ "toggle:disabled": taskPageViewModel.cannotCreateBoard }, /* @__PURE__ */ createElement("span", { class: "icon" }, "add") - )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement( + ))), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement( "div", { class: "grid gap", style: "grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))", - "children:append": [taskPageViewModel.boardViewModels, BoardInfoToEntry] + "children:append": [ + taskPageViewModel.boardViewModels, + BoardInfoToEntry + ] } ))), /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" }))); } diff --git a/src/View/ChatPages/taskPage.tsx b/src/View/ChatPages/taskPage.tsx index ad5a32f2..08c06712 100644 --- a/src/View/ChatPages/taskPage.tsx +++ b/src/View/ChatPages/taskPage.tsx @@ -10,7 +10,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) { return (
-
+
add
- -
- +
+
diff --git a/src/View/chatPage.css b/src/View/chatPage.css index a7329eef..cb7ce181 100644 --- a/src/View/chatPage.css +++ b/src/View/chatPage.css @@ -104,7 +104,7 @@ body[showing-chat] #chat-page-wrapper { height: 100%; flex: 1; - overflow: auto; + overflow-y: auto; justify-content: flex-end; } @@ -113,9 +113,10 @@ body[showing-chat] #chat-page-wrapper { height: var(--ribbon-size); border-bottom: 1px solid var(--border); + overflow-y: hidden; overflow-x: auto; - padding-left: var(--content-padding); + padding: var(--gap-between-tiles); border-top: 1px solid var(--border); } @@ -125,16 +126,27 @@ body[showing-chat] #chat-page-wrapper { } #chat-page #ribbon > span, -#chat-page > div > #main > div > .pane > .toolbar > span { +#chat-page > div > #main > div > .pane > .toolbar { display: flex; - flex-direction: column; + flex-direction: row; + align-items: center; + justify-content: start; padding: var(--gap-between-tiles); gap: var(--gap-between-tiles); } -#chat-page > div > #ribbon > span { - width: 100%; +#chat-page > div > #main > div > .pane > .toolbar > span { + padding-left: var(--content-padding); +} + +#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) { + height: 100%; + flex: 1; +} + +#chat-page #ribbon > span { + flex-direction: column; } #chat-page > div > #ribbon button, @@ -150,6 +162,10 @@ body[showing-chat] #chat-page-wrapper { justify-content: center; } +#chat-page > div > #ribbon > span { + width: 100%; +} + #chat-page > div > #ribbon > button { margin-top: var(--gap-between-tiles); }