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

update layout styles to support multiple panes

Browse Source
This commit is contained in:
marlon-erler
2024-07-22 13:29:08 +02:00
parent e8ab217be3
commit 343bd7ef01
5 changed files with 200 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/chatPage.css
+25 -24
View File
@@ -26,39 +26,40 @@ body[showing-chat] #chat-page-wrapper {
--ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles));
}
#chat-page #ribbon,
#chat-page .toolbar,
#chat-page #main,
#chat-page #main .content {
#chat-page > div,
#chat-page > div > #ribbon,
#chat-page > div > #main,
#chat-page > div > #main > div,
#chat-page > div > #main > div > .pane,
#chat-page > div > #main > div > .pane > .toolbar,
#chat-page > div > #main > div > .pane > .content {
display: flex;
}
#chat-page > div {
padding: 0px;
overflow: hidden;
display: flex;
}
#chat-page #main {
#chat-page > div > #main {
width: calc(100% - var(--ribbon-size));
display: flex;
flex-direction: column;
}
#chat-page #main > div,
#chat-page #main .content {
#chat-page > div > #main > div > .pane,
#chat-page > div > #main > div > .pane > .content {
width: 100%;
height: 100%;
flex: 1;
}
display: flex;
#chat-page > div > #main > div > .pane {
flex-direction: column;
}
#chat-page #main .content {
#chat-page > div > #main > div > .pane > .content {
flex-direction: column;
overflow: auto;
padding: var(--content-padding);
}
@@ -69,7 +70,7 @@ body[showing-chat] #chat-page-wrapper {
}
/* ribbon, toolbar */
#chat-page #ribbon {
#chat-page > div > #ribbon {
width: var(--ribbon-size);
border-right: 1px solid var(--border);
@@ -78,16 +79,16 @@ body[showing-chat] #chat-page-wrapper {
padding-bottom: var(--safe-area-bottom);
}
#chat-page #ribbon > span {
#chat-page > div > #ribbon > span {
height: 100%;
flex: 1;
overflow: auto;
justify-content: flex-end;
}
#chat-page #main .toolbar {
#chat-page > div > #main > div > .pane > .toolbar {
height: var(--ribbon-size);
border-bottom: 1px solid var(--border);
@@ -97,13 +98,13 @@ body[showing-chat] #chat-page-wrapper {
border-top: 1px solid var(--border);
}
#chat-page #ribbon,
#chat-page .toolbar {
#chat-page > div > #ribbon,
#chat-page > div > #main > div > .pane > .toolbar {
align-items: center;
}
#chat-page #ribbon > span,
#chat-page .toolbar > span {
#chat-page > div > #main > div > .pane > .toolbar > span {
display: flex;
flex-direction: column;
@@ -111,12 +112,12 @@ body[showing-chat] #chat-page-wrapper {
gap: var(--gap-between-tiles);
}
#chat-page #ribbon > span {
#chat-page > div > #ribbon > span {
width: 100%;
}
#chat-page #ribbon button,
#chat-page .toolbar button {
#chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane > .toolbar button {
padding: 0px;
width: 100%;
@@ -128,6 +129,6 @@ body[showing-chat] #chat-page-wrapper {
justify-content: center;
}
#chat-page #ribbon > button {
#chat-page > div > #ribbon > button {
margin-top: var(--gap-between-tiles);
}