enhance: scrollbar no longer limits to the main content

also, a sticky right topbar

resources/css/common.css

@@ -68,7 +68,6 @@ html[data-theme='dark'] {
   --ls-page-inline-code-color: var(--ls-primary-text-color);
   --ls-page-inline-code-bg-color: #01222a;
   --ls-scrollbar-foreground-color: rgba(255, 255, 255, 0.05);
-  --ls-scrollbar-background-color: rgba(30, 60, 67, 0.9);
   --ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
   --ls-head-text-color: var(--ls-link-text-color);
   --ls-icon-color: var(--ls-link-text-color);

src/main/frontend/components/header.css

@@ -1,12 +1,18 @@
 .cp__header {
-  @apply shadow z-10 h-12 pr-4;
+  @apply shadow z-10 h-12;
 
+  padding-right: 1rem;
   display: flex;
   align-items: center;
   flex: 0 0 auto;
   background-color: var(--ls-primary-background-color, #fff);
-
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  left: 0;
+  right: 0;
   user-select: none;
+  transition: width 0.3s;
 
   .it svg {
     transform: scale(0.8);

src/main/frontend/components/journal.cljs

@@ -113,7 +113,7 @@
 (rum/defc journals < rum/reactive
   [latest-journals]
   [:div#journals
-   (ui/infinite-list "main-content"
+   (ui/infinite-list "left-container"
                      (for [[journal-name format] latest-journals]
                        [:div.journal-item.content {:key journal-name}
                         (journal-cp [journal-name format])])

src/main/frontend/components/right_sidebar.cljs

@@ -27,8 +27,9 @@
 
 (rum/defc toggle
   []
-  [:a.opacity-50.hover:opacity-100.ml-4 {:on-click state/toggle-sidebar-open?!}
-   (svg/menu)])
+  (when-not (util/mobile?)
+    [:a.opacity-50.hover:opacity-100.ml-4 {:on-click state/toggle-sidebar-open?!}
+    (svg/menu)]))
 
 (rum/defc block-cp < rum/reactive
   [repo idx block]
@@ -239,10 +240,8 @@
                                           :else right-el-ratio)
                          right-el (js/document.getElementById "right-sidebar")]
                      (when right-el
-
-                       (.setProperty (.-style right-el)
-                                     "width"
-                                     (str (* right-el-ratio 100) "%")))))}}))
+                       (let [width (str (* right-el-ratio 100) "%")]
+                         (.setProperty (.-style right-el) "width" width)))))}}))
              (.styleCursor false)
              (.on "dragstart" #(.. js/document.documentElement -classList (add "is-resizing-buf")))
              (.on "dragend" #(.. js/document.documentElement -classList (remove "is-resizing-buf")))))
@@ -262,13 +261,13 @@
         theme (state/sub :ui/theme)
         t (i18n/use-tongue)]
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div#right-sidebar.cp__right-sidebar.h-screen.overflow-x-hidden
+      [:div#right-sidebar.cp__right-sidebar.h-screen
        {:class (if sidebar-open? "open" "closed")}
        (if sidebar-open?
          [:div.cp__right-sidebar-inner.flex.flex-col.h-full
 
           (sidebar-resizer)
-          [:div.flex.flex-row.justify-between.items-center.px-4.h-12
+          [:div.cp__right-sidebar-topbar.flex.flex-row.justify-between.items-center.px-4.h-12
            [:div.cp__right-sidebar-settings.hide-scrollbar {:key "right-sidebar-settings"}
             [:div.ml-4.text-sm
              [:a.cp__right-sidebar-settings-btn {:on-click (fn [e]
@@ -296,8 +295,10 @@
                                                              (state/sidebar-add-block! repo "help" :help nil))}
               (t :right-side-bar/help)]]]
 
-           (when sidebar-open? (toggle))]
-          [:.sidebar-item-list.overflow-y-auto.flex-1
+           (when sidebar-open?
+             [:div.mr-1 {:style {:z-index 999}}
+              (toggle)])]
+          [:.sidebar-item-list.flex-1
            (for [[idx [repo db-id block-type block-data]] (medley/indexed blocks)]
              (rum/with-key
                (sidebar-item repo idx db-id block-type block-data t)

src/main/frontend/components/sidebar.cljs

@@ -107,7 +107,7 @@
 (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.flex-1.overflow-y-auto.flex
+    [:div#main-content.cp__sidebar-main-layout.flex-1.flex
      [:div#sidebar-nav-wrapper.flex-col.pt-4.hidden.sm:block
       {:style {:flex (if (state/get-left-sidebar-open?)
                        "0 1 20%"
@@ -333,28 +333,28 @@
           :close-fn    close-fn
           :route-match route-match})
         [:div.#app-container.h-screen.flex
-         [[:div.flex-1.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)]]
+         [:div.flex-1.h-full.flex.flex-col.overflow-y-auto#left-container.relative
+          [(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)

src/main/frontend/components/sidebar.css

@@ -10,8 +10,15 @@
   }
 }
 
+#app-container {
+    flex: 0 0 100%;
+    transition: all 200ms ease-in 0s;
+}
+
 #main-content-container {
-  font-size: 1em;
+    font-size: 1em;
+    margin-top: 2rem;
+    padding: 1rem;
 }
 
 #left-sidebar {
@@ -115,6 +122,7 @@
     padding-top: 0;
     position: relative;
     min-height: 100%;
+    overflow-y: scroll;
 
     .resizer {
       position: absolute;
@@ -136,11 +144,21 @@
 
     &-btn {
       display: block;
-      padding: 10px 5px;
+      padding: 13px 5px;
       white-space: nowrap;
     }
   }
 
+  &-topbar {
+      position: sticky;
+      position: -webkit-sticky;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--ls-secondary-background-color, #d8e1e8);
+      z-index: 999;
+  }
+
   .page {
     margin-top: 0;
   }

src/main/frontend/components/theme.css

@@ -31,14 +31,6 @@ html {
     height: 8px;
   }
 
-  ::-webkit-scrollbar-thumb {
-    -webkit-border-radius: 100px;
-  }
-
-  ::-webkit-scrollbar-thumb:active {
-    -webkit-border-radius: 100px;
-  }
-
   ::-webkit-scrollbar-corner {
     background: transparent;
   }

src/main/frontend/util.cljc

@@ -1176,6 +1176,11 @@
      []
      (contains? (set (system-locales)) "zh-CN")))
 
+#?(:cljs
+   (defn get-element-width
+     [id]
+     (when-let [element (gdom/getElement id)]
+       (gobj/get element "offsetWidth"))))
 (comment
   (= (get-relative-path "journals/2020_11_18.org" "pages/grant_ideas.org")
      "../pages/grant_ideas.org")