fix: align page elements including properties, references, etc.

src/main/frontend/components/block.cljs

@@ -2958,7 +2958,7 @@
        (when top?
          (dnd-separator-wrapper block children block-id slide? true false))
 
-       [:div.block-main-container.flex.flex-row.pr-2
+       [:div.block-main-container.flex.flex-row.pr-2.gap-1
         {:on-touch-start (fn [event uuid] (block-handler/on-touch-start event uuid))
          :on-touch-move (fn [event]
                           (block-handler/on-touch-move event block uuid edit? *show-left-menu? *show-right-menu?))

src/main/frontend/components/block.css

@@ -206,7 +206,7 @@
 }
 
 .block-control-wrap {
-  @apply h-[24px] mt-[1px] pr-[6px];
+  @apply h-[24px] mt-[1px];
 
   &.is-order-list {
     @apply mr-0 pr-0;

src/main/frontend/components/container.css

@@ -670,10 +670,6 @@
     background: none;
   }
 
-  .references {
-    @apply mx-[28px];
-  }
-
   .sidebar-drop-indicator {
     @apply relative;
     height: 8px;

src/main/frontend/components/db_based/page.cljs

@@ -44,11 +44,10 @@
                                              (str edit-input-id-prefix "-page")
                                              (assoc configure-opts :class-schema? false :page? true)))
          ;; default view for page-inner
-         [:div.ml-1.mb-4
-          (component-block/db-properties-cp {:editor-box editor/box}
-                                            page
-                                            (str edit-input-id-prefix "-page")
-                                            (assoc configure-opts :class-schema? false :page? true))])])))
+         (component-block/db-properties-cp {:editor-box editor/box}
+                                           page
+                                           (str edit-input-id-prefix "-page")
+                                           (assoc configure-opts :class-schema? false :page? true)))])))
 
 (rum/defc tags
   [page]
@@ -147,7 +146,6 @@
                            (swap! *hover? not)))}
            [:<>
             [:div.flex.flex-row.items-center.gap-1
-             [:a.flex.fade-link.ml-3 (ui/icon "info-circle")]
              (mode-switch types *mode)]
             [:div.absolute.right-1.top-1
              (shui/button

src/main/frontend/components/page.cljs

@@ -98,7 +98,7 @@
   (when page-e
     (let [long-page? (> (count (:block/_page page-e)) 300)
           hiccup (component-block/->hiccup blocks (assoc config :long-page? long-page?) {})]
-      [:div.page-blocks-inner {:style {:margin-left (if (or sidebar? whiteboard?) 0 -20)}}
+      [:div.page-blocks-inner {:style {:margin-left (if whiteboard? 0 -20)}}
        (rum/with-key
          (content/content (str (:block/uuid page-e))
                           {:hiccup   hiccup
@@ -508,7 +508,7 @@
 
          (if (and whiteboard-page? (not sidebar?))
            [:div ((state/get-component :whiteboard/tldraw-preview) (:block/uuid page))] ;; FIXME: this is not reactive
-           [:div.relative.grid.gap-4
+           [:div.relative.grid.gap-2
             (when (and (not sidebar?) (not block?))
               [:div.flex.flex-row.space-between
                (when (or (mobile-util/native-platform?) (util/mobile?))
@@ -532,8 +532,7 @@
                     (plugins/hook-ui-items :pagebar)]))])
 
             (when (and db-based? (not block?) (:block/tags page))
-              [:div.cursor-pointer
-               {:class (if sidebar? "ml-6" "ml-2")}
+              [:div.cursor-pointer.px-1
                (db-page/tags page)])
 
             (cond
@@ -556,34 +555,35 @@
              ;; blocks
              (page-blocks-cp repo page {:sidebar? sidebar? :whiteboard? whiteboard?})]])
 
-         (when today?
-           (today-queries repo today? sidebar?))
+         [:div {:style {:padding-left 9}}
+          (when today?
+            (today-queries repo today? sidebar?))
 
-         (when today?
-           (scheduled/scheduled-and-deadlines page-name))
+          (when today?
+            (scheduled/scheduled-and-deadlines page-name))
 
-         (when-not block?
-           (tagged-pages repo page page-original-name))
+          (when-not block?
+            (tagged-pages repo page page-original-name))
 
-               ;; referenced blocks
-         (when-not block-or-whiteboard?
-           (when (and page (not (false? linked-refs?)))
-             [:div {:key "page-references"}
-              (rum/with-key
-                (reference/references page)
-                (str route-page-name "-refs"))]))
+         ;; referenced blocks
+          (when-not block-or-whiteboard?
+            (when (and page (not (false? linked-refs?)))
+              [:div {:key "page-references"}
+               (rum/with-key
+                 (reference/references page)
+                 (str route-page-name "-refs"))]))
 
-         (when (contains? (:block/type page) "class")
-           (class-component/class-children page))
+          (when (contains? (:block/type page) "class")
+            (class-component/class-children page))
 
-         (when-not block-or-whiteboard?
-           (when (and (not journal?) (not db-based?))
-             (hierarchy/structures route-page-name)))
+          (when-not block-or-whiteboard?
+            (when (and (not journal?) (not db-based?))
+              (hierarchy/structures route-page-name)))
 
-         (when (and (not (false? unlinked-refs?))
-                    (not (or block-or-whiteboard? sidebar? home?)))
-           [:div {:key "page-unlinked-references"}
-            (reference/unlinked-references page)])]))))
+          (when (and (not (false? unlinked-refs?))
+                     (not (or block-or-whiteboard? sidebar? home?)))
+            [:div {:key "page-unlinked-references"}
+             (reference/unlinked-references page)])]]))))
 
 (rum/defc delay-skeleton
   [children]

src/main/frontend/components/page.css

@@ -229,7 +229,7 @@
 }
 
 .ls-page-title {
-  @apply rounded-sm -mx-1.5 px-2 pt-1.5;
+  @apply rounded-sm;
 
   &.title {
     @apply mb-3;
@@ -315,16 +315,6 @@ html.is-native-iphone-without-notch {
   }
 }
 
-.cp__right-sidebar  {
-  .add-button-link {
-    margin-left: 21px;
-  }
-
-  .page-info {
-    @apply mx-2;
-  }
-}
-
 html.is-native-android,
 html.is-native-ios {
   .cp__all_pages {
@@ -391,7 +381,7 @@ html.is-native-ios {
 }
 
 .page-info {
-  @apply ml-[-4px] border rounded-md;
+  @apply border rounded-md;
 
   &-inner {
     @apply py-2;

src/main/frontend/components/property.cljs

@@ -511,7 +511,7 @@
      [:a.fade-link.flex.add-property
       {:on-click (fn []
                    (state/pub-event! [:editor/new-property (merge opts {:block block})]))}
-      [:div.flex.flex-row.items-center {:style {:padding-left 1}}
+      [:div.flex.flex-row.items-center
        (ui/icon "plus" {:size 15})
        [:div.ml-1.text-sm "Add property"]]]]))
 

src/main/frontend/components/right_sidebar.cljs

@@ -259,7 +259,7 @@
                                                         :initial (not collapsed?)
                                                         :p-4     (not (contains? #{:page :block :contents :search :shortcut-settings} block-type))
                                                         :pt-4    (not (contains? #{:search :shortcut-settings} block-type))
-                                                        :p-1     (not (contains? #{:search :shortcut-settings} block-type))}])}
+                                                        :px-2    (not (contains? #{:search :shortcut-settings} block-type))}])}
               (inner-component component (not drag-from))]
              (when drag-from (drop-area idx))])]
          (drop-indicator idx drag-to)]))))