From 9fe925f9fc62442513e8137ecae6c50233a844b4 Mon Sep 17 00:00:00 2001 From: Junyu Zhan Date: Fri, 9 Apr 2021 18:08:31 +0800 Subject: [PATCH] feat: new layout for sidebar --- src/main/frontend/components/header.css | 26 ++++----- .../frontend/components/right_sidebar.cljs | 2 +- src/main/frontend/components/sidebar.cljs | 58 +++++++++---------- src/main/frontend/components/sidebar.css | 47 ++------------- 4 files changed, 46 insertions(+), 87 deletions(-) diff --git a/src/main/frontend/components/header.css b/src/main/frontend/components/header.css index 238ad6fe2b1..f1b2a7d677f 100644 --- a/src/main/frontend/components/header.css +++ b/src/main/frontend/components/header.css @@ -6,15 +6,10 @@ flex: 0 0 auto; background-color: var(--ls-primary-background-color, #fff); - position: fixed; - width: 100%; - top: 0; - left: 0; - user-select: none; .it svg { - transform: scale(0.8); + transform: scale(0.8); } .repos { @@ -50,7 +45,7 @@ } .cp__header-logo { - display: none; + display: none; } .cp__header-logo:hover, @@ -68,7 +63,7 @@ } .cp__right-menu-button { - display: block; + display: block; } @screen sm { @@ -86,13 +81,12 @@ } } - #repo-name { - @apply md:max-w-none; - vertical-align: middle; - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 7ch; + @apply md:max-w-none; + vertical-align: middle; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 7ch; } diff --git a/src/main/frontend/components/right_sidebar.cljs b/src/main/frontend/components/right_sidebar.cljs index afef0dc7ab6..4cab329fd07 100644 --- a/src/main/frontend/components/right_sidebar.cljs +++ b/src/main/frontend/components/right_sidebar.cljs @@ -254,7 +254,7 @@ theme (state/sub :ui/theme) t (i18n/use-tongue)] (rum/with-context [[t] i18n/*tongue-context*] - [:div#right-sidebar.cp__right-sidebar + [:div#right-sidebar.cp__right-sidebar.h-screen.overflow-y-auto.overflow-x-hidden {:class (if sidebar-open? "is-open")} (if sidebar-open? [:div.cp__right-sidebar-inner diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs index 5e761a12ca4..61271ca78df 100644 --- a/src/main/frontend/components/sidebar.cljs +++ b/src/main/frontend/components/sidebar.cljs @@ -104,10 +104,10 @@ [:div.flex-1.h-0.overflow-y-auto (sidebar-nav route-match close-fn)]]]) -(rum/defc sidebar-main +(rum/defc main [{:keys [route-match global-graph-pages? logged? home? route-name indexeddb-support? white? db-restoring? main-content]}] (rum/with-context [[t] i18n/*tongue-context*] - [:div#main-content.cp__sidebar-main-layout + [:div#main-content.cp__sidebar-main-layout.flex-1.overflow-y-auto.flex [:div#sidebar-nav-wrapper.flex-col.pt-4.hidden.sm:block {:style {:flex (if (state/get-left-sidebar-open?) "0 1 20%" @@ -116,7 +116,7 @@ (if white? "#f0f8ff" "#073642"))}} (when (state/sub :ui/left-sidebar-open?) (sidebar-nav route-match nil))] - [:div#main-content-container.cp__sidebar-main-content-container + [:div#main-content-container.w-full.flex.justify-center [:div.cp__sidebar-main-content {:data-is-global-graph-pages global-graph-pages? :data-is-full-width (or global-graph-pages? @@ -133,8 +133,7 @@ :else [:div {:class (if global-graph-pages? "" (util/hiccup->class "max-w-7xl.mx-auto")) :style {:margin-bottom (if global-graph-pages? 0 120)}} - main-content])]] - (right-sidebar/sidebar)])) + main-content])]]])) (defn get-default-home-if-valid [] @@ -229,7 +228,7 @@ :exit 300}} links ;; (custom-context-menu-content) -)))) + )))) (rum/defc new-block-mode < rum/reactive [] @@ -333,28 +332,29 @@ {:open? open? :close-fn close-fn :route-match route-match}) - [:div.#app-container.cp__sidebar-layout - {:class (if sidebar-open? "is-right-sidebar-open") - :style {:padding-bottom (if global-graph-pages? 0 30)}} - (header/header {:open-fn open-fn - :white? white? - :current-repo current-repo - :logged? logged? - :page? page? - :route-match route-match - :me me - :default-home default-home - :new-block-mode new-block-mode}) - - (sidebar-main {:route-match route-match - :global-graph-pages? global-graph-pages? - :logged? logged? - :home? home? - :route-name route-name - :indexeddb-support? indexeddb-support? - :white? white? - :db-restoring? db-restoring? - :main-content main-content})] + [:div.#app-container.h-screen.flex + [[:div.w-full.h-full.flex.flex-col + [(header/header {:open-fn open-fn + :white? white? + :current-repo current-repo + :logged? logged? + :page? page? + :route-match route-match + :me me + :default-home default-home + :new-block-mode new-block-mode}) + + (main {:route-match route-match + :global-graph-pages? global-graph-pages? + :logged? logged? + :home? home? + :route-name route-name + :indexeddb-support? indexeddb-support? + :white? white? + :db-restoring? db-restoring? + :main-content main-content})]] + (right-sidebar/sidebar)]] + (ui/notification) (ui/modal) @@ -371,4 +371,4 @@ ;; :on-click (fn [] ;; (state/set-left-sidebar-open! (not (state/get-left-sidebar-open?))))} ;; (if (state/sub :ui/left-sidebar-open?) "<" ">")] -)])))) + )])))) diff --git a/src/main/frontend/components/sidebar.css b/src/main/frontend/components/sidebar.css index 713a406a995..56bf644e72a 100644 --- a/src/main/frontend/components/sidebar.css +++ b/src/main/frontend/components/sidebar.css @@ -56,33 +56,10 @@ margin: -15px; } -.cp__sidebar-layout { - display: flex; - flex-direction: column; - min-height: 100vh; -} - .cp__sidebar-main-layout { - overflow-y: auto; - display: flex; background-color: var(--ls-primary-background-color); } -.cp__sidebar-layout.is-right-sidebar-open { - .cp__sidebar-main-layout { - margin-right: var(--ls-right-sidebar-width); - } -} - -.cp__sidebar-main-content-container { - position: relative; - flex: 1; - display: flex; - width: 100%; - align-items: center; - justify-content: center; -} - .cp__sidebar-main-content { padding: 5rem 1.5rem; max-width: var(--ls-main-content-max-width); @@ -120,21 +97,15 @@ } .cp__right-sidebar { - position: fixed; - top: 3rem; - right: 0; width: 0; - opacity: 0.5; - height: calc(100vh - 3rem); - overflow-x: hidden; - overflow-y: auto; z-index: var(--ls-z-index-level-1); transition: width 0.3s, opacity 0.2s; border-radius: var(--ls-border-radius-low) 0 0 0; - - box-sizing: border-box; background-color: var(--ls-secondary-background-color, #d8e1e8); - padding-bottom: 48px; + + &.is-open { + width: var(--ls-right-sidebar-width); + } &::-webkit-scrollbar { display: none; @@ -175,12 +146,6 @@ transform: scale(0.8); } - &.is-open { - display: block; - width: var(--ls-right-sidebar-width); - opacity: 1; - } - .page { margin-top: 0; } @@ -221,10 +186,10 @@ } } -.cp__sidebar-main-content[data-is-full-width="true"] { +.cp__sidebar-main-content[data-is-full-width='true'] { max-width: 100vw; } -.cp__sidebar-main-content[data-is-global-graph-pages="true"] { +.cp__sidebar-main-content[data-is-global-graph-pages='true'] { padding: 0; }