Skip to content

Commit

Permalink
feat: new layout for sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@thezjy @tiensonqin
thezjy authored and tiensonqin committed Apr 17, 2021
1 parent 2f948f5 commit 9fe925f
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 87 deletions.
26 changes: 10 additions & 16 deletions src/main/frontend/components/header.css
View file
Expand Up @@ -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 {
Expand Down Expand Up @@ -50,7 +45,7 @@
}

.cp__header-logo {
display: none;
display: none;
}

.cp__header-logo:hover,
Expand All @@ -68,7 +63,7 @@
}

.cp__right-menu-button {
display: block;
display: block;
}

@screen sm {
Expand All @@ -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;
}
2 changes: 1 addition & 1 deletion src/main/frontend/components/right_sidebar.cljs
View file
Expand Up @@ -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
Expand Down
58 changes: 29 additions & 29 deletions src/main/frontend/components/sidebar.cljs
View file
Expand Up @@ -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%"
Expand All @@ -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?
Expand All @@ -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
[]
Expand Down Expand Up @@ -229,7 +228,7 @@
:exit 300}}
links
;; (custom-context-menu-content)
))))
))))

(rum/defc new-block-mode < rum/reactive
[]
Expand Down Expand Up @@ -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)
Expand All @@ -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?) "<" ">")]
)]))))
)]))))
47 changes: 6 additions & 41 deletions src/main/frontend/components/sidebar.css
View file
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -175,12 +146,6 @@
transform: scale(0.8);
}

&.is-open {
display: block;
width: var(--ls-right-sidebar-width);
opacity: 1;
}

.page {
margin-top: 0;
}
Expand Down Expand Up @@ -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;
}

0 comments on commit 9fe925f

Please sign in to comment.