✨ Dashboard respect ratio for thumbnails

frontend/src/app/main/ui/dashboard.scss

@@ -25,4 +25,6 @@
   position: relative;
   grid-row: 1 / span 2;
   padding: $s-16 $s-16 0 0;
+  overflow: hidden;
+  width: 100%;
 }

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -459,6 +459,7 @@
        [:button
         {:class (stl/css-case :selected selected? :library library-view?)
          :ref node-ref
+         :title (:name file)
          :draggable true
          :on-click on-select
          :on-key-down handle-key-down
@@ -634,20 +635,17 @@
          [:& loading-placeholder]
 
          (seq files)
-         [:ul
+         (for [slice (partition-all limit files)]
-          {:class (stl/css :grid-row)
+           [:ul {:class (stl/css :grid-row)}
-           :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
+            (when @dragging?
-
+              [:li {:class (stl/css :grid-item)}])
-          (when @dragging?
+            (for [item slice]
-            [:li {:class (stl/css :grid-item)}])
+              [:& grid-item
-
+               {:file item
-          (for [item files]
+                :key (:id item)
-            [:& grid-item
+                :navigate? true
-             {:file item
+                :origin origin
-              :key (:id item)
+                :library-view? library-view?}])])
-              :navigate? true
-              :origin origin
-              :library-view? library-view?}])]
 
          :else
          [:& empty-placeholder

frontend/src/app/main/ui/dashboard/grid.scss

@@ -6,17 +6,20 @@
 
 @import "refactor/common-refactor.scss";
 
+$thumbnail-default-width: $s-252; // Default width
+$thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3
+
 .dashboard-grid {
   font-size: $fs-14;
   height: 100%;
   overflow-y: auto;
-  overflow: hidden;
+  overflow-x: hidden;
 }
 
 .grid-row {
-  display: grid;
+  display: flex;
   width: 100%;
-  padding: 0 $s-12;
+  gap: 24px;
 }
 
 .grid-item {
@@ -24,9 +27,7 @@
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  flex: 1 0 $s-260;
+  margin: $s-12 0;
-  height: $s-232;
-  margin: $s-12 $s-16 $s-16 $s-8;
   position: relative;
   text-align: center;
 
@@ -38,17 +39,16 @@
   button {
     background-color: transparent;
     border: none;
-  }
+    padding: 0 $s-6;
-
-  @media #{$bp-max-1366} {
-    height: $s-200;
-    flex: 1 0 $s-232;
   }
 
   .grid-item-th {
     border-radius: $br-4;
     text-align: initial;
 
+    width: var(--th-width, #{$thumbnail-default-width});
+    height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
+
     img {
       object-fit: contain;
     }
@@ -58,7 +58,8 @@
     border-radius: $br-4;
     border: $br-2 solid $da-primary;
     text-align: initial;
-    max-height: $s-160;
+    width: calc(var(--th-width) + $s-12);
+    height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration});
   }
 
   &.overlay {
@@ -81,6 +82,7 @@
     display: grid;
     grid-template-columns: 1fr auto;
     cursor: pointer;
+    max-width: var(--th-width, $thumbnail-default-width);
   }
 
   .item-info {
@@ -261,8 +263,7 @@
   background-size: auto 80%;
   background-repeat: no-repeat;
 
-  height: $s-232;
+  height: 100%;
-  max-height: $s-160;
   overflow: hidden;
   position: relative;
   width: 100%;
@@ -294,7 +295,6 @@
 
 .grid-item.project-th.library {
   height: $s-612;
-  width: $s-300;
 }
 
 .grid-item-th.library {

frontend/src/app/main/ui/dashboard/libraries.cljs

@@ -51,10 +51,10 @@
 
     (if new-css-system
       [:*
-       [:header {:class (stl/css :dashboard-header) :ref rowref}
+       [:header {:class (stl/css :dashboard-header)}
         [:div#dashboard-libraries-title {:class (stl/css :dashboard-title)}
          [:h1 (tr "dashboard.libraries-title")]]]
-       [:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared)}
+       [:section {:class (stl/css :dashboard-container :no-bg :dashboard-shared)  :ref rowref}
         [:& grid {:files files
                   :project default-project
                   :origin :libraries

frontend/src/app/main/ui/dashboard/libraries.scss

@@ -17,10 +17,6 @@
   &.dashboard-projects {
     user-select: none;
   }
-  &.dashboard-shared {
-    width: calc(100vw - $s-320);
-    margin-right: $s-52;
-  }
 
   &.search {
     margin-top: $s-12;

frontend/src/app/main/ui/dashboard/placeholder.scss

@@ -10,9 +10,7 @@
 .grid-empty-placeholder {
   border-radius: $br-12;
   display: grid;
-  padding: $s-12;
+  padding: $s-12 0;
-  margin-right: $s-12;
-  height: $s-232;
 
   &.loader {
     justify-items: center;

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -246,7 +246,6 @@
                                   :edition? (= (:id project) edit-id)})
 
         [rowref limit] (hooks/use-dynamic-grid-item-width)
-
         on-nav
         (mf/use-fn
          (mf/deps project-id team-id)
@@ -344,7 +343,7 @@
 
     (if new-css-system
       [:article {:class (stl/css-case :dashboard-project-row true :first first?)}
-       [:header {:class (stl/css :project) :ref rowref}
+       [:header {:class (stl/css :project)}
         [:div {:class (stl/css :project-name-wrapper)}
          (if (:edition? @local)
            [:& inline-edition {:content (:name project)
@@ -403,12 +402,13 @@
             :on-key-down handle-menu-click}
            i/actions]]]]
 
-       [:& line-grid
+       [:div {:class (stl/css :grid-container) :ref rowref}
-        {:project project
+        [:& line-grid
-         :team team
+         {:project project
-         :files files
+          :team team
-         :create-fn create-file
+          :files files
-         :limit limit}]
+          :create-fn create-file
+          :limit limit}]]
 
        (when (and (> limit 0)
                   (> file-count limit))

frontend/src/app/main/ui/dashboard/projects.scss

@@ -145,6 +145,11 @@
     }
   }
 
+  .grid-container {
+    width: 100%;
+    padding: 0 $s-16;
+  }
+
   &:hover,
   &:focus,
   &:focus-within {

frontend/src/app/main/ui/hooks.cljs

@@ -1,3 +1,4 @@
+
 ;; This Source Code Form is subject to the terms of the Mozilla Public
 ;; License, v. 2.0. If a copy of the MPL was not distributed with this
 ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
@@ -350,9 +351,7 @@
 (defn use-dynamic-grid-item-width
   ([] (use-dynamic-grid-item-width nil))
   ([itemsize]
-   (let [;; NOTE: we pass a function to use-state for avoid repeatedly
+   (let [width*   (mf/use-state nil)
-         ;; lookup `:items-width` on storage on each render
-         width*   (mf/use-state #(:items-width @storage))
          width    (deref width*)
 
          rowref   (mf/use-ref)
@@ -365,20 +364,26 @@
          ratio    (if (some? width) (/ width itemsize) 0)
          nitems   (mth/floor ratio)
          limit    (mth/min 10 nitems)
-         limit    (mth/max 1 limit)]
+         limit    (mth/max 1 limit)
+
+         th-size (- (/ (- width (* (dec limit) 24)) limit) 12)]
+
+     (mf/with-effect
+       [th-size]
+       (when th-size
+         (let [node (mf/ref-val rowref)]
+           (.setProperty (.-style node) "--th-width" (str th-size "px")))))
 
      (mf/with-effect []
        (let [node (mf/ref-val rowref)
              mnt? (volatile! true)
              sub  (->> (wapi/observe-resize node)
-                       (rx/observe-on :af)
                        (rx/subs (fn [entries]
                                   (let [row       (first entries)
                                         row-rect  (.-contentRect ^js row)
                                         row-width (.-width ^js row-rect)]
                                     (when @mnt?
-                                      (reset! width* row-width)
+                                      (reset! width* row-width))))))]
-                                      (swap! storage assoc :items-width row-width))))))]
          (fn []
            (vreset! mnt? false)
            (rx/dispose! sub))))