VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prepare layout for multiple panes

Browse Source
This commit is contained in:
marlon-erler
2024-07-22 19:43:23 +02:00
parent 18771b142c
commit 40030040a5
4 changed files with 48 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+16
View File
@@ -220,6 +220,9 @@ body[showing-chat] #chat-page-wrapper {
} }
#chat-page > div > #main { #chat-page > div > #main {
width: calc(100% - var(--ribbon-size)); width: calc(100% - var(--ribbon-size));
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
} }
#chat-page #main > div, #chat-page #main > div,
#chat-page > div > #main > div > .pane, #chat-page > div > #main > div > .pane,
@@ -230,6 +233,19 @@ body[showing-chat] #chat-page-wrapper {
} }
#chat-page > div > #main > div > .pane { #chat-page > div > #main > div > .pane {
flex-direction: column; flex-direction: column;
scroll-snap-align: center;
min-width: 100%;
}
@media (min-width: 1024px) {
#chat-page > div > #main > div > .pane {
min-width: unset;
}
#chat-page > div > #main > div > .pane.side {
max-width: 18rem;
}
}
#chat-page > div > #main > div > .pane:not(:last-child) {
border-right: 1px solid var(--border);
} }
#chat-page > div > #main > div > .pane > .content { #chat-page > div > #main > div > .pane > .content {
flex-direction: column; flex-direction: column;
dist/index.js
Vendored
+1 -1
View File
@@ -1843,7 +1843,7 @@
// src/View/ChatPages/taskPage.tsx // src/View/ChatPages/taskPage.tsx
function TaskPage(chatViewModel) { function TaskPage(chatViewModel) {
return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" })); return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane side" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" })), /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", { "subscribe:innerText": chatViewModel.primaryChannel })), /* @__PURE__ */ createElement("div", { class: "content" })));
} }
// src/View/chatPage.tsx // src/View/chatPage.tsx
src/View/ChatPages/taskPage.tsx
+8 -2
View File
@@ -7,11 +7,17 @@ import { translations } from "../translations";
export function TaskPage(chatViewModel: ChatViewModel) { export function TaskPage(chatViewModel: ChatViewModel) {
return ( return (
<div id="task-page"> <div id="task-page">
<div class="pane side">
<div class="toolbar"> <div class="toolbar">
<span subscribe:innerText={chatViewModel.primaryChannel}></span> <span subscribe:innerText={chatViewModel.primaryChannel}></span>
</div> </div>
<div class="content"> <div class="content"></div>
</div>
<div class="pane">
<div class="toolbar">
<span subscribe:innerText={chatViewModel.primaryChannel}></span>
</div>
<div class="content"></div>
</div> </div>
</div> </div>
); );
src/View/chatPage.css
+21
View File
@@ -43,6 +43,10 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #main { #chat-page > div > #main {
width: calc(100% - var(--ribbon-size)); width: calc(100% - var(--ribbon-size));
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
} }
#chat-page #main > div, #chat-page #main > div,
@@ -55,6 +59,23 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #main > div > .pane { #chat-page > div > #main > div > .pane {
flex-direction: column; flex-direction: column;
scroll-snap-align: center;
min-width: 100%;
}
@media (min-width: 1024px) {
#chat-page > div > #main > div > .pane {
min-width: unset;
}
#chat-page > div > #main > div > .pane.side {
max-width: 18rem;
}
}
#chat-page > div > #main > div > .pane:not(:last-child) {
border-right: 1px solid var(--border);
} }
#chat-page > div > #main > div > .pane > .content { #chat-page > div > #main > div > .pane > .content {