fix(ux): property layout switch to flex

src/main/frontend/components/property.cljs

@@ -78,7 +78,7 @@
                           (map (fn [type]
                                  {:label (property-config/property-type-label type)
                                   :value type})))]
-    [:div {:class "flex items-center col-span-1"}
+    [:div {:class "flex items-center"}
      (shui/select
       (cond->
        {:default-open (boolean default-open?)
@@ -266,17 +266,18 @@
                             :icon-value icon
                             :del-btn? (boolean icon)}))]
 
-         (shui/trigger-as
-          :button.property-m
-          (-> (when-not config/publishing?
-                {:on-click (fn [^js e]
-                             (shui/popup-show! (.-target e) content-fn
-                                               {:as-dropdown? true :auto-focus? true
-                                                :content-props {:onEscapeKeyDown #(.preventDefault %)}}))})
-              (assoc :class "flex items-center"))
-          (if icon
-            (icon-component/icon icon {:size 15 :color? true})
-            (property-icon property nil)))))
+         [:div.property-icon
+          (shui/trigger-as
+           :button.property-m
+           (-> (when-not config/publishing?
+                 {:on-click (fn [^js e]
+                              (shui/popup-show! (.-target e) content-fn
+                                                {:as-dropdown? true :auto-focus? true
+                                                 :content-props {:onEscapeKeyDown #(.preventDefault %)}}))})
+               (assoc :class "flex items-center"))
+           (if icon
+             (icon-component/icon icon {:size 15 :color? true})
+             (property-icon property nil)))]))
 
      (if config/publishing?
        [:a.property-k.flex.select-none.jtrigger
@@ -338,13 +339,13 @@
     [:div.ls-property-input.flex.flex-1.flex-row.items-center.flex-wrap.gap-1
      {:ref #(reset! *ref %)}
      (if property-key
-       [:div.ls-property-add.grid.grid-cols-4.gap-1.flex.flex-1.flex-row.items-center
-        [:div.flex.flex-row.items-center.col-span-1.property-key.gap-1
+       [:div.ls-property-add.gap-1.flex.flex-1.flex-row.items-center
+        [:div.flex.flex-row.items-center.property-key.gap-1
          (when-not (:db/id property) (property-icon property (:type @*property-schema)))
          (if (:db/id property)                              ; property exists already
            (property-key-cp block property opts)
            [:div property-key])]
-        [:div.col-span-3.flex.flex-row {:on-pointer-down (fn [e] (util/stop-propagation e))}
+        [:div.flex.flex-row {:on-pointer-down (fn [e] (util/stop-propagation e))}
          (when (not= @*show-new-property-config? :adding-property)
            (cond
              @*show-new-property-config?
@@ -388,7 +389,7 @@
        :on-click (fn [e]
                    (state/pub-event! [:editor/new-property (merge opts {:block block
                                                                         :target (.-target e)})]))}
-      [:div.flex.flex-row.items-center
+      [:div.flex.flex-row.items-center.shrink-0
        (ui/icon "plus" {:size 16})
        [:div.ml-1 "Add property"]]]]))
 
@@ -431,19 +432,19 @@
         [:div {:key (str "property-pair-" (:db/id block) "-" (:db/id property))
                :class (cond
                         (and (= (:db/ident property) :logseq.property.class/properties) (seq v))
-                        "property-pair !flex flex-col"
+                        "property-pair !flex !flex-col"
                         (or date? datetime? checkbox?)
                         "property-pair items-center"
                         :else
                         "property-pair items-start")}
          (if (seq sortable-opts)
-           (dnd/sortable-item (assoc sortable-opts :class "property-key col-span-1") property-key-cp')
-           [:div.property-key.col-span-1 property-key-cp'])
+           (dnd/sortable-item (assoc sortable-opts :class "property-key") property-key-cp')
+           [:div.property-key property-key-cp'])
 
          (let [class-properties? (= (:db/ident property) :logseq.property.class/properties)
                property-desc (when-not (= (:db/ident property) :logseq.property/description)
                                (:logseq.property/description property))]
-           [:div.property-value-container.col-span-3.flex.flex-row.gap-1.items-center
+           [:div.property-value-container.flex.flex-row.gap-1.items-center
             (cond-> {}
               class-properties? (assoc :class (if (:logseq.property.class/properties block)
                                                 "ml-2 -mt-1"
@@ -575,7 +576,10 @@
                           ;; other position
                           (when-not (or (and (:sidebar? opts) (= (:id opts) (str (:block/uuid block))))
                                         show-empty-and-hidden-properties?)
-                            (outliner-property/property-with-other-position? ent)))))))
+                            (outliner-property/property-with-other-position? ent))
+
+                          (and (:gallery-view? opts)
+                               (contains? #{:logseq.property.class/properties} (:db/ident ent))))))))
                   properties))
         {:keys [all-classes classes-properties]} (outliner-property/get-block-classes-properties (db/get-db) (:db/id block))
         classes-properties-set (set classes-properties)

src/main/frontend/components/property.css

@@ -44,10 +44,8 @@
 }
 
 .ls-properties-area {
-  @apply grid;
-
   .property-pair {
-    @apply grid grid-cols-4 gap-1;
+    @apply flex flex-row flex-wrap space-x-1;
 
     .jtrigger {
       @apply relative;
@@ -179,7 +177,7 @@
 
 .positioned-properties, .property-value-inner {
   .select-item {
-    @apply flex items-center;
+    @apply flex items-center shrink-0;
   }
 
   .ls-icon-priorityLvlUrgent {
@@ -262,6 +260,8 @@ a.control-link {
 }
 
 .property-value-container {
+  @apply flex-1 shrink-0;
+  min-width: 100px;
   min-height: 29px;
 }
 
@@ -271,6 +271,7 @@ a.control-link {
 
 .property-key {
   /* Same height with one-line block container */
+  min-width: 160px;
   min-height: 29px;
 
   h1.title, h2.title {
@@ -287,8 +288,26 @@ a.control-link {
   }
 }
 
+.ls-card-item {
+    .property-key, .property-value-container {
+        min-width: initial;
+    }
+}
+
 .property-key-inner {
-  @apply flex flex-row items-center gap-1 relative;
+  @apply flex flex-row items-start gap-1 relative;
+
+  .property-icon {
+    @apply flex items-center;
+    height: 28px;
+
+    button {
+      margin-top: -1px;
+    }
+  }
+  .editor-inner {
+    width: 120px;
+  }
 }
 
 .property-select {
@@ -324,7 +343,7 @@ a.control-link {
   }
 
   .inner-wrap {
-    @apply flex items-center w-full justify-between;
+    @apply flex items-center w-full justify-between gap-1 flex-wrap;
 
     > strong {
       @apply flex items-center gap-1 font-normal opacity-90;

src/main/frontend/components/property/value.cljs

@@ -1056,7 +1056,7 @@
                           (interpose [:span.opacity-50.text-sm " > "]
                                      (concat
                                       (map (fn [{title :block/title :as ancestor}]
-                                             [:a {:on-click #(route-handler/redirect-to-page! (:block/uuid ancestor))} title])
+                                             [:a.whitespace-nowrap {:on-click #(route-handler/redirect-to-page! (:block/uuid ancestor))} title])
                                            page-ancestors)
                                       [value-cp]))]
                          value-cp)))]]

src/main/frontend/components/views.cljs

@@ -1074,7 +1074,9 @@
   [:div.ls-card-item
    {:key (str "view-card-" (:db/id view-entity) "-" (:db/id block))}
    [:div.-ml-4
-    (block-container (assoc config :id (str (:block/uuid block))) block)]])
+    (block-container (assoc config
+                            :id (str (:block/uuid block))
+                            :gallery-view? true) block)]])
 
 (rum/defcs gallery-view < rum/static mixins/container-id
   [state config view-entity blocks]
@@ -1082,12 +1084,11 @@
     [:div.ls-cards
      (when (seq blocks)
        (ui/virtualized-grid
-         {:total-count (count blocks)
-          :custom-scroll-parent (gdom/getElement "main-content-container")
-          :item-content (fn [idx]
-                          (when-let [block (nth blocks idx)]
-                            (gallery-card-item view-entity block config')))})
-       )]))
+        {:total-count (count blocks)
+         :custom-scroll-parent (gdom/getElement "main-content-container")
+         :item-content (fn [idx]
+                         (when-let [block (nth blocks idx)]
+                           (gallery-card-item view-entity block config')))}))]))
 
 (defn- run-effects!
   [{:keys [data columns state data-fns]} input input-filters set-input-filters!]