fix(ui): fixed new page button relative to left sidebar container

logseq · Jan 6, 2022 · 3a04cf8 · 3a04cf8
1 parent 8a9f64e
commit 3a04cf8
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/resources/css/common.css b/resources/css/common.css
@@ -859,28 +859,6 @@ h1.title {
   margin-right: 12px;
 }
 
-.left-sidebar-inner .recent .page-icon,
-.left-sidebar-inner .favorites .page-icon {
-  margin-right: 8px;
-  width: 1.1em;
-  text-align: center;
-  display: inline-block;
-  color: #aaa;
-}
-
-.favorites li.favorite-item,
-.recent    li.recent-item {
-  margin: 0.1rem 0;
-}
-
-.left-sidebar-inner > .wrap {
-  height: 100%;
-}
-
-.left-sidebar-inner .flex-column-spacer {
-  flex: 1 1 0%;
-}
-
 .block-highlight,
 .content .selected {
   transition: background-color 0.15s;

diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs
@@ -269,10 +269,8 @@
 
         (recent-pages t)
 
-        [:div.flex-column-spacer]                           ;; Push following objects to the bottom
-
-        [:nav.px-2.space-y-1 {:aria-label "Sidebar"
-                              :class      "new-page"}
+        [:nav.px-2 {:aria-label "Sidebar"
+                    :class      "new-page"}
          (when-not config/publishing?
            [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md
             {:on-click (fn []

diff --git a/src/main/frontend/components/sidebar.css b/src/main/frontend/components/sidebar.css
@@ -64,15 +64,24 @@
   z-index: 3;
 
   > .wrap {
-    margin-top: 50px;
     height: calc(100vh - var(--ls-headbar-inner-top-padding) - 50px);
+    margin-top: 40px;
+    padding-bottom: 60px;
     overflow-y: auto;
   }
 
   .dropdown-wrapper {
     min-width: 180px;
   }
 
+  .page-icon {
+    margin-right: 8px;
+    width: 1.1em;
+    text-align: center;
+    display: inline-block;
+    color: #aaa;
+  }
+
   a.item {
     user-select: none;
     transition: none;
@@ -87,7 +96,7 @@
   }
 
   .nav-content-item {
-    padding: 32px 0 0 0;
+    padding: 18px 0 0 0;
 
     > .header {
       display: flex;
@@ -181,10 +190,28 @@
     }
   }
 
+  .new-page {
+    position: absolute;
+    background-color: var(--ls-primary-background-color);
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding-bottom: 8px;
+    padding-top: 8px;
+  }
+
   @screen sm {
     background-color: var(--ls-secondary-background-color);
     width: var(--ls-left-sidebar-width);
     padding-top: 0;
+
+    > .wrap {
+      margin-top: 50px;
+    }
+
+    .new-page {
+      background-color: var(--ls-secondary-background-color);
+    }
   }
 }