From a69ec7511a3f11516c21ba3351f62c35d0132ee1 Mon Sep 17 00:00:00 2001 From: t1enne Date: Tue, 17 May 2022 08:41:39 +0200 Subject: [PATCH] Changed Layout a bit now we use less state for the layout. Chat and header are now sticky. Moved some css vars. --- web/components/ui/Content/Content.module.scss | 11 +---------- web/components/ui/Content/Content.tsx | 6 +++--- web/components/ui/Header/Header.module.scss | 3 +++ web/components/ui/Sidebar/Sidebar.module.scss | 4 ++++ web/styles/globals.scss | 7 ------- web/styles/variables.css | 5 +++++ 6 files changed, 16 insertions(+), 20 deletions(-) diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss index 396acd4d4..70cd848a1 100644 --- a/web/components/ui/Content/Content.module.scss +++ b/web/components/ui/Content/Content.module.scss @@ -1,26 +1,20 @@ .root { display: grid; - grid-template-columns: 1fr; + grid-template-columns: 1fr auto; } .mobileChat { display: block; - position: absolute; - background-color: white; top: 0px; width: 100%; - height: calc(50vh - var(--header-h)); } .leftCol { display: grid; - // -64px, which is the header - grid-template-rows: 50vh calc(50vh - var(--header-h)); } .lowerRow { position: relative; display: grid; - grid-template-rows: 1fr var(--header-h); } .pageContentSection { @@ -35,7 +29,4 @@ .mobileChat { display: none; } - .root[data-columns='2'] { - grid-template-columns: 1fr var(--chat-w); - } } diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 6e4ce2cd1..19cd30daa 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -45,7 +45,7 @@ export default function ContentComponent() { const total = 0; - const isShowingChatColumn = + const chatVisible = chatState === ChatState.Available && chatVisibility === ChatVisibilityState.Visible; // This is example content. It should be removed. @@ -65,7 +65,7 @@ export default function ContentComponent() { )); return ( - +
- {isShowingChatColumn && } + {chatVisible && }
); } diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss index ea02744be..e143e554a 100644 --- a/web/components/ui/Header/Header.module.scss +++ b/web/components/ui/Header/Header.module.scss @@ -1,9 +1,12 @@ .header { + position: sticky; + top: 0px; display: flex; align-items: center; justify-content: space-between; z-index: 1; padding: 0.5rem 1rem; + background-color: var(--default-bg-color); .logo { display: flex; align-items: center; diff --git a/web/components/ui/Sidebar/Sidebar.module.scss b/web/components/ui/Sidebar/Sidebar.module.scss index 4fd12c079..400e1a9a5 100644 --- a/web/components/ui/Sidebar/Sidebar.module.scss +++ b/web/components/ui/Sidebar/Sidebar.module.scss @@ -5,6 +5,10 @@ @media (min-width: 768px) { .root { + position: sticky; + top: var(--header-h); display: flex; + min-width: 300px !important; + max-height: calc(100vh - var(--header-h)); } } diff --git a/web/styles/globals.scss b/web/styles/globals.scss index 3b4a017d7..a14e70af5 100644 --- a/web/styles/globals.scss +++ b/web/styles/globals.scss @@ -1,12 +1,5 @@ // @import "~antd/dist/antd.dark"; -:root { - // chat variables - // --header-h: 64px; - --chat-w: 300px; - --chat-input-h: 40.5px; -} - html, body { padding: 0; diff --git a/web/styles/variables.css b/web/styles/variables.css index 7e81709ee..d3d12dcd2 100644 --- a/web/styles/variables.css +++ b/web/styles/variables.css @@ -78,4 +78,9 @@ --default-link-color: #6941c6; --default-bg-color: #1b1a26; --default-text-color: #f2f4f7; + + /* Layout variables */ + --header-h: 64px; + --chat-w: 300px; + --chat-input-h: 40.5px; }