[refactor] improve main content layout .

resources/css/common.css

@@ -96,6 +96,10 @@
 
 html {
   font-family: var(--ls-font-family), Inter, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
+
+  /* FIXME: global revealjs.css ? */
+  height: unset !important;
+  overflow: auto !important;
 }
 
 @supports (font-variation-settings: normal) {
@@ -109,16 +113,14 @@ a svg {
 }
 
 html, body, #root, #draw {
-  height: 100%;
+  //height: 100%;
 }
 
 html, body {
-  background-color: #002b36;
-}
-
-body {
   color: #24292e;
   line-height: 1.5;
+  background-color: #002b36;
+  min-height: 100%;
 }
 
 .form-checkbox {
@@ -180,20 +182,6 @@ ol {
   min-height: 500px;
 }
 
-#sidebar-nav-wrapper {
-  margin-top: 0px;
-  border-right: 24px;
-  position: sticky;
-  top: 0;
-  transition: all 200ms ease-in 0s;
-  -webkit-transition: all 200ms ease-in 0s;
-}
-
-#sidebar-nav-wrapper.enter {
-  opacity: 1;
-  left: 0;
-}
-
 #journals {
   margin-bottom: 70vh;
 }
@@ -379,43 +367,6 @@ svg {
   overflow-y: scroll
 }
 
-#left-sidebar {
-  width: 240px;
-  height: 100%;
-  top: 0;
-  left: -240px;
-  position: absolute;
-  z-index: 11;
-  opacity: 0;
-  transition: all 0.25s;
-  -webkit-transition: all 0.25s;
-  background-color: #002b36;
-}
-
-#left-sidebar.enter {
-  opacity: 1;
-  left: 0;
-}
-
-#right-sidebar {
-  position: sticky;
-  top: 0;
-  transition: all 200ms ease-in 0s;
-  -webkit-transition: all 200ms ease-in 0s;
-  background-color: #D8E1E8;
-  background-color: var(--ls-secondary-background-color);
-  padding-bottom: 48px;
-}
-
-
-#right-sidebar.enter {
-  opacity: 1;
-  right: 0;
-}
-
-#right-sidebar .page {
-  margin-top: 0;
-}
 
 .lds-dual-ring {
   display: inline-block;
@@ -484,14 +435,21 @@ a.nav-item:hover, a.star-page:hover {
 }
 
 /* primary bg */
-.h-screen {
+#app-container {
   background-color: #FFF;
   background-color: var(--ls-primary-background-color);
+
+  position: relative;
 }
 
 #head {
   background-color: #FFF;
   background-color: var(--ls-primary-background-color);
+
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
 }
 
 #search_field {
@@ -573,18 +531,6 @@ input {
   margin-bottom: 0;
 }
 
-#right-sidebar .sidebar-item {
-  border-top: 1px solid;
-  border-top-color: #ccc;
-  border-top-color: var(--ls-border-color);
-  margin-bottom: 24px;
-  padding-top: 24px;
-}
-
-#right-sidebar .sidebar-item:first-child {
-  border-top: none;
-}
-
 #global-graph, #page-graph {
   min-height: 100% !important;
   height: 100%;
@@ -654,7 +600,6 @@ a.menu-link {
   color: var(--ls-primary-text-color);
 }
 
-
 a.menu-link:hover {
   color: var(--ls-link-text-hover-color);
 }
@@ -682,15 +627,6 @@ pre.code {
   color: var(--ls-primary-text-color);
 }
 
-/* Are these reachable? */
-#right-sidebar .non-block-editor textarea, #right-sidebar pre, #right-sidebar pre.code {
-  background: var(--ls-right-sidebar-code-bg-color);
-}
-
-#right-sidebar pre.CodeMirror-line {
-  background: #FFFFFF;
-}
-
 :not(pre) > code {
   color: var(--ls-page-inline-code-color);
   background: #eeeeee;
@@ -713,12 +649,12 @@ dt {
 }
 
 :root {
-  scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color) !important;
-  scrollbar-width: thin !important;
+  //scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color) !important;
+  //scrollbar-width: thin !important;
 }
 
 * {
-  scrollbar-width: thin !important;
+  //scrollbar-width: thin !important;
 }
 
 blockquote {
@@ -735,21 +671,21 @@ blockquote {
   color: var(--ls-page-blockquote-color);
 }
 
-.dark-theme ::-webkit-scrollbar, .dark-theme ::-webkit-scrollbar-track-piece {
-  background-color: var(--ls-scrollbar-background-color);
-  border: 4px solid;
-  border-color: var(--ls-scrollbar-background-color);
-}
-
-.dark-theme ::-webkit-scrollbar-thumb {
-  background-color: var(--ls-scrollbar-foreground-color);
-  background-clip: padding-box;
-  min-height: 28px;
-}
-
-.dark-theme ::-webkit-scrollbar-thumb:hover {
-  background-color: var(--ls-scrollbar-thumb-hover-color);
-}
+//.dark-theme ::-webkit-scrollbar, .dark-theme ::-webkit-scrollbar-track-piece {
+//  background-color: var(--ls-scrollbar-background-color);
+//  border: 4px solid;
+//  border-color: var(--ls-scrollbar-background-color);
+//}
+//
+//.dark-theme ::-webkit-scrollbar-thumb {
+//  background-color: var(--ls-scrollbar-foreground-color);
+//  background-clip: padding-box;
+//  min-height: 28px;
+//}
+//
+//.dark-theme ::-webkit-scrollbar-thumb:hover {
+//  background-color: var(--ls-scrollbar-thumb-hover-color);
+//}
 
 .svg-shadow {
   -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .7));
@@ -1219,10 +1155,6 @@ summary {
   min-width: 12rem;
 }
 
-#right-sidebar .references {
-  margin-left: 12px;
-}
-
 img.small {
   display: inline;
   width: 20px;
@@ -1399,11 +1331,6 @@ a.tag:hover {
   border-color: var(--ls-page-checkbox-border-color);
 }
 
-#right-sidebar .bg-base-2,
-#right-sidebar blockquote {
-  background-color: var(--ls-tertiary-background-color);
-}
-
 .white-theme a.right-sidebar-button {
   color: var(--ls-primary-text-color);
 }

src/main/frontend/components/block.cljs

@@ -1091,10 +1091,7 @@
                           (editor-handler/unhighlight-block!))}]
     [:div.flex.relative
      [:div.flex-1.flex-col.relative.block-content
-      (cond-> {:id (str "block-content-" uuid)
-               :style {:cursor "text"
-                       :min-height 24
-                       :max-width 560}}
+      (cond-> {:id (str "block-content-" uuid)}
         (not slide?)
         (merge attrs))
 

src/main/frontend/components/block.css

@@ -2,6 +2,10 @@
 }
 
 .block-content {
+  min-height: 24px;
+  max-width: 100%;
+  overflow: auto;
+  cursor: text;
 }
 
 .block-children {

src/main/frontend/components/header.css

@@ -1,64 +1,65 @@
 .cp__header {
-    @apply shadow z-10 h-16 pr-4;
+  @apply shadow z-10 h-12 pr-4;
 
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex: 0 0 auto;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
 }
 
 .cp__header-left-menu {
-    @apply px-4 mr-4;
-    border-right: 1px solid var(--ls-secondary-background-color);
-    color: var(--ls-link-text-color);
-    display: block;
-    height: 100%;
+  @apply px-4 mr-4;
+  border-right: 1px solid var(--ls-secondary-background-color);
+  color: var(--ls-link-text-color);
+  display: block;
+  height: 100%;
 }
+
 .cp__header-left-menu:focus {
-    @apply outline-none;
-    background: var(--ls-menu-hover-color);
+  @apply outline-none;
+  background: var(--ls-menu-hover-color);
 }
 
 .cp__header-logo {
-    @apply px-4 mr-3;
-    height: 100%;
+  @apply px-4 mr-3;
+  height: 100%;
 }
 
 .cp__header-logo,
 .cp__right-menu-button {
-    opacity: 0.7;
-    display: none;
+  opacity: 0.7;
+  display: none;
 }
 
 .cp__header-logo:hover,
 .cp__right-menu-button:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .cp__header-logo-img {
-    width: 24px;
-    height: 24px;
+  width: 24px;
+  height: 24px;
 }
 
 .cp__right-menu-button {
-    @apply ml-3;
+  @apply ml-3;
 }
 
 @screen sm {
-    .cp__header {
-        @apply h-12 shadow-none;
-    }
+  .cp__header {
+    @apply shadow-none;
+  }
 
-    .cp__header-left-menu {
-        display: none;
-    }
+  .cp__header-left-menu {
+    display: none;
+  }
 
-    .cp__header-logo {
-        display: flex;
-        align-items: center;
-    }
+  .cp__header-logo {
+    display: flex;
+    align-items: center;
+  }
 
-    .cp__right-menu-button {
-        display: block;
-    }
+  .cp__right-menu-button {
+    display: block;
+  }
 }

src/main/frontend/components/right_sidebar.cljs

@@ -225,36 +225,28 @@
         dark? (= "dark" theme)
         t (i18n/use-tongue)]
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div#right-sidebar.flex-col {:style {:height "100%"
-                                            :overflow "hidden"
-                                            :flex (if sidebar-open?
-                                                    "1 0 40%"
-                                                    "0 0 0px")}}
+      [:div#right-sidebar.cp__right-sidebar
+       {:class (if sidebar-open? "is-open")}
        (if sidebar-open?
-         [:div.hide-scrollbar {:style {:flex "1 1 auto"
-                        :padding 12
-                        :height "100%"
-                        :overflow-y "auto"
-                        :overflow-x "hidden"
-                        :box-sizing "content-box"}}
-          [:div.flex.flex-row.mb-2 {:key "right-sidebar-settings"}
-           [:div.mr-4.text-sm
-            [:a.right-sidebar-button {:on-click (fn [e]
+         [:div.cp__right-sidebar-inner
+          [:div.cp__right-sidebar-settings {:key "right-sidebar-settings"}
+           [:div.ml-4.text-sm
+            [:a.cp__right-sidebar-settings-btn {:on-click (fn [e]
                                                   (state/sidebar-add-block! repo "contents" :contents nil))}
              (t :right-side-bar/contents)]]
 
-           [:div.mr-4.text-sm
-            [:a.right-sidebar-button {:on-click (fn [_e]
+           [:div.ml-4.text-sm
+            [:a.cp__right-sidebar-settings-btn {:on-click (fn [_e]
                                                   (state/sidebar-add-block! repo "recent" :recent nil))}
              (t :right-side-bar/recent)]]
 
            (when config/publishing?
-             [:div.mr-4.text-sm
+             [:div.ml-4.text-sm
               [:a {:href (rfe/href :all-pages)}
                (t :all-pages)]])
 
-           [:div.mr-4.text-sm
-            [:a.right-sidebar-button {:on-click (fn []
+           [:div.ml-4.text-sm
+            [:a.cp__right-sidebar-settings-btn {:on-click (fn []
                                                   (when-let [page (get-current-page)]
                                                     (state/sidebar-add-block!
                                                      repo
@@ -263,16 +255,16 @@
                                                      page)))}
              (t :right-side-bar/page)]]
 
-           [:div.mr-4.text-sm
+           [:div.ml-4.text-sm
             (let [theme (if dark? "white" "dark")]
-              [:a.right-sidebar-button {:title (t :right-side-bar/switch-theme theme)
+              [:a.cp__right-sidebar-settings-btn {:title (t :right-side-bar/switch-theme theme)
                                         :on-click (fn []
                                                     (state/set-theme! theme))}
                (t :right-side-bar/theme (t (keyword theme)))])]
 
            (when-not config/publishing?
-             [:div.mr-4.text-sm
-              [:a.right-sidebar-button {:on-click (fn [_e]
+             [:div.ml-4.text-sm
+              [:a.cp__right-sidebar-settings-btn {:on-click (fn [_e]
                                                     (state/sidebar-add-block! repo "help" :help nil))}
                (t :right-side-bar/help)]])]
 

src/main/frontend/components/sidebar.cljs

@@ -52,7 +52,7 @@
         right-sidebar? (state/sub :ui/sidebar-open?)
         left-sidebar? (state/sub :ui/left-sidebar-open?)]
     (when left-sidebar?
-      [:nav.flex-1
+      [:nav.flex-1.left-sidebar-inner
        (nav-item "Journals" "/"
                  "M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M9 21h6"
                  (active? :home)
@@ -97,7 +97,7 @@
            :stroke-linejoin "round"
            :stroke-linecap "round"}]]]])
     [:div.flex-shrink-0.flex.items-center.px-4.h-16 {:style {:background-color "#002b36"}}
-     (repo/repos-dropdown false)]
+     (repo/repos-dropdown false nil)]
     [:div.flex-1.h-0.overflow-y-auto
      (sidebar-nav route-match close-fn)]]])
 
@@ -308,6 +308,7 @@
         current-repo (state/sub :git/current-repo)
         theme (state/sub :ui/theme)
         white? (= "white" (state/sub :ui/theme))
+        sidebar-open? (state/sub :ui/sidebar-open?)
         route-name (get-in route-match [:data :name])
         global-graph-pages? (= :graph route-name)
         logged? (:name me)
@@ -323,7 +324,8 @@
                                 :close-fn close-fn
                                 :route-match route-match})
 
-       [:div.cp__sidebar-layout.h-screen
+       [:div.#app-container.cp__sidebar-layout
+        {:class (if sidebar-open? "is-right-sidebar-open")}
         (header/header {:open-fn open-fn
                         :white? white?
                         :current-repo current-repo

src/main/frontend/components/sidebar.css

@@ -1,36 +1,146 @@
+#left-sidebar {
+  width: 240px;
+  height: 100%;
+  top: 0;
+  left: -240px;
+  position: absolute;
+  z-index: 11;
+  opacity: 0;
+  transition: all 0.25s;
+  -webkit-transition: all 0.25s;
+  background-color: #002b36;
+
+  .enter {
+    opacity: 1;
+    left: 0;
+  }
+}
+
+#left-bar {
+  .left-sidebar-inner {
+    padding-right: 15px;
+  }
+}
+
+.cp__right-sidebar {
+  position: fixed;
+  top: 3rem;
+  right: 0;
+  width: 40%;
+  height: calc(100vh - 3rem);
+  overflow: auto;
+  display: none;
+  z-index: 9;
+
+  box-sizing: border-box;
+  background-color: #D8E1E8;
+  background-color: var(--ls-secondary-background-color);
+  padding-bottom: 48px;
+
+  &-inner {
+    padding: 15px;
+  }
+
+  &-settings {
+    @apply flex flex-row mb-2;
+    margin: -15px;
+    margin-bottom: 0;
+
+    &-btn {
+      display: block;
+      padding: 10px 5px;
+    }
+  }
+
+  &.is-open {
+    display: block;
+  }
+
+  &.enter {
+    opacity: 1;
+    right: 0;
+  }
+
+  .page {
+    margin-top: 0;
+  }
+
+  .non-block-editor textarea, pre, pre.code {
+    background: var(--ls-right-sidebar-code-bg-color);
+  }
+
+  pre.CodeMirror-line {
+    background: #FFFFFF;
+  }
+
+  .references {
+    margin-left: 12px;
+  }
+
+  .sidebar-item {
+    border-top: 1px solid;
+    border-top-color: #ccc;
+    border-top-color: var(--ls-border-color);
+    margin-bottom: 24px;
+    padding-top: 24px;
+
+    &:first-child {
+      border-top: none;
+    }
+
+    .close {
+      transform: scale(.8);
+      transition: transform .1s;
+
+      &:hover {
+        transform: scale(1);
+      }
+    }
+  }
+}
+
 .cp__sidebar-layout {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 .cp__sidebar-main-layout {
-    flex: 1 1 0;
-    overflow-y: auto;
-    display: flex;
+  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: 40%;
+  }
 }
 
 .cp__sidebar-main-content-container {
-    position: relative;
-    flex: 1 1 65%;
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .cp__sidebar-main-content {
-    padding: 3rem 1.5rem;
-    margin: 0 auto;
-    max-width: 640px;
+  padding: 3rem 1.5rem;
+  max-width: 640px;
+  flex: 1;
 }
 
 @media (max-width: 640px) {
-    .cp__sidebar-main-content {
-        max-width: 100vw;
-    }
+  .cp__sidebar-main-content {
+    max-width: 100vw;
+  }
 }
 
 .cp__sidebar-main-content[data-is-full-width="true"] {
-    max-width: 100vw;
+  max-width: 100vw;
 }
 
 .cp__sidebar-main-content[data-is-global-graph-pages="true"] {
-    padding: 0;
+  padding: 0;
 }