🐛 Fix several issues in dashboard screens scroll

backend/src/uxbox/services/mutations/files.clj

@@ -41,8 +41,8 @@
 
 (s/def ::is-shared ::us/boolean)
 (s/def ::create-file
-  (s/keys :req-un [::profile-id ::name ::project-id ::is-shared]
+  (s/keys :req-un [::profile-id ::name ::project-id]
-          :opt-un [::id]))
+          :opt-un [::id ::is-shared]))
 
 (sm/defmutation ::create-file
   [{:keys [profile-id project-id] :as params}]
@@ -61,7 +61,9 @@
                :can-edit true}))
 
 (defn create-file
-  [conn {:keys [id profile-id name project-id is-shared] :as params}]
+  [conn {:keys [id profile-id name project-id is-shared]
+         :or {is-shared false}
+         :as params}]
   (let [id      (or id (uuid/next))
         file (db/insert! conn :file
                          {:id id

frontend/resources/styles/main-default.scss

@@ -23,11 +23,12 @@
 //#################################################
 
 @import 'common/base';
-@import 'main/layouts/main-layout';
 @import 'main/layouts/login';
+@import 'main/layouts/main-layout';
 @import 'main/layouts/projects-page';
 @import 'main/layouts/libraries-page';
 @import 'main/layouts/recent-files-page';
+@import 'main/layouts/search-page';
 @import "main/layouts/not-found";
 @import "main/layouts/viewer";
 

frontend/resources/styles/main/layouts/libraries-page.scss

@@ -1,5 +1,6 @@
 .libraries-page {
-    padding: 1rem;
+  padding: 1rem;
-    height: 100%;
+  background-color: $color-white;
-    background-color: $color-white;
+  flex: 1 0 0;
+  overflow-y: auto;
 }

frontend/resources/styles/main/layouts/main-layout.scss

@@ -31,6 +31,8 @@
 
 .dashboard-content {
   background-color: lighten($color-gray-10, 5%);
+  display: flex;
+  flex-direction: column;
 }
 
 .verify-token {

frontend/resources/styles/main/layouts/projects-page.scss

@@ -1,5 +1,6 @@
 .projects-page {
-    padding: 1rem;
+  padding: 1rem;
-    height: 100%;
+  background-color: $color-white;
-    background-color: $color-white;
+  flex: 1 0 0;
+  overflow-y: auto;
 }

frontend/resources/styles/main/layouts/recent-files-page.scss

@@ -1,41 +1,41 @@
 .recent-files-page {
-    overflow: scroll;
+  background-color: $color-white;
-    height: 100%;
+  flex: 1 0 0;
-    background-color: $color-white;
+  overflow-y: auto;
 }
 
 .recent-files-row {
-    padding: 1rem;
+  padding: 1rem;
-    border-top: 1px solid $color-gray-10;
+  border-top: 1px solid $color-gray-10;
 
-    &.first {
+  &.first {
-        border-top: none;
+    border-top: none;
-    }
+  }
 }
 
 .recent-files-row-title {
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    margin-left: $medium;
+  margin-left: $medium;
-    margin-top: $medium;
+  margin-top: $medium;
 }
 
 .recent-files-row-title-name, .recent-files-row-title-info {
-    font-size: 15px;
+  font-size: 15px;
-    line-height: 1rem;
+  line-height: 1rem;
-    font-weight: unset;
+  font-weight: unset;
 }
 
 .recent-files-row-title-name {
-    color: black;
+  color: black;
-    margin-right: $medium;
+  margin-right: $medium;
 }
 
 .recent-files-row-title-info {
-    color: $color-gray-30
+  color: $color-gray-30
 }
 
 .recent-files-empty {
-    margin: 30px;
+  margin: 30px;
-    font-size: 20px
+  font-size: 20px
 }

frontend/resources/styles/main/layouts/search-page.scss

@@ -1,3 +1,6 @@
 .search-page {
-    padding: 1rem;
+  padding: 1rem;
+  background-color: $color-white;
+  flex: 1 0 0;
+  overflow-y: auto;
 }

frontend/resources/styles/main/partials/dashboard-grid.scss

@@ -6,10 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .dashboard-grid {
-  display: flex;
-  flex-direction: column;
   font-size: $fs14;
-  height: 100%;
 
   .dashboard-title {
     position: relative;
@@ -68,284 +65,277 @@
 
   }
 
-  .dashboard-grid-content {
+  .dashboard-grid-row {
     display: flex;
-    height: 100%;
+    flex-wrap: wrap;
     width: 100%;
+    align-content: flex-start;
+  }
 
-    .dashboard-grid-row {
+  .grid-item {
-      display: flex;
+    align-items: center;
-      flex-wrap: wrap;
+    border: 1px solid lighten($color-gray-20, 13%);
+    border-radius: $br-small;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    height: 200px;
+    margin: $medium;
+    max-width: 300px;
+    min-width: 260px;
+    position: relative;
+    text-align: center;
+    width: 18%;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+
+    & .overlay {
+      border-radius: 4px;
+      border: 2px solid $color-primary;
+      height: 100%;
+      opacity: 0;
+      pointer-events: none;
+      position: absolute;
       width: 100%;
-      align-content: flex-start;
+      z-index: 1;
+    }
+    &:hover .overlay {
+      display: block;
+      opacity: 1;
     }
 
-    .grid-item {
+    &.small-item {
-      align-items: center;
+      max-width: 12%;
-      border: 1px solid lighten($color-gray-20, 13%);
+      min-width: 190px;
-      border-radius: $br-small;
+      padding: $medium;
-      cursor: pointer;
+      justify-content: center;
+    }
+
+    .grid-item-icon {
+      width:90px;
+      height:90px;
+    }
+
+    .item-info {
+      bottom: 0;
       display: flex;
       flex-direction: column;
-      flex-shrink: 0;
+      left: 0;
-      height: 200px;
+      padding: $small;
-      margin: $medium;
+      position: absolute;
-      max-width: 300px;
+      text-align: left;
-      min-width: 260px;
+      width: 100%;
-      position: relative;
-      text-align: center;
-      width: 18%;
-      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
 
-      & .overlay {
+      h3 {
-        border-radius: 4px;
+        color: $color-gray-60;
-        border: 2px solid $color-primary;
+        font-size: $fs15;
-        height: 100%;
+        font-weight: 400;
-        opacity: 0;
+        overflow: hidden;
-        pointer-events: none;
+        padding: 0;
-        position: absolute;
+        padding-right: $small;
+        text-overflow: ellipsis;
         width: 100%;
-        z-index: 1;
+        white-space: nowrap;
-      }
-      &:hover .overlay {
-        display: block;
-        opacity: 1;
       }
 
-      &.small-item {
+      span.date {
-        max-width: 12%;
+        color: $color-gray-20;
-        min-width: 190px;
+        font-size: $fs12;
-        padding: $medium;
+        overflow: hidden;
-        justify-content: center;
+        text-overflow: ellipsis;
-      }
-
-      .grid-item-icon {
-        width:90px;
-        height:90px;
-      }
-
-      .item-info {
-        bottom: 0;
-        display: flex;
-        flex-direction: column;
-        left: 0;
-        padding: $small;
-        position: absolute;
-        text-align: left;
         width: 100%;
-
-        h3 {
-          color: $color-gray-60;
-          font-size: $fs15;
-          font-weight: 400;
-          overflow: hidden;
-          padding: 0;
-          padding-right: $small;
-          text-overflow: ellipsis;
-          width: 100%;
-          white-space: nowrap;
-        }
-
-        span.date {
-          color: $color-gray-20;
-          font-size: $fs12;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          width: 100%;
-        }
-
       }
 
-      .item-badge {
+    }
-          background-color: $color-white;
-          border: 1px solid $color-gray-20;
-          border-radius: 4px;
-          position: absolute;
-          top: $x-small;
-          right: $x-small;
-          height: 32px;
-          width: 32px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
 
-          svg {
+    .item-badge {
-            fill: $color-gray-30;
-            height: 16px;
-            width: 16px;
-          }
-      }
-
-      &.add-file {
-        border: 1px dashed $color-gray-20;
-        justify-content: center;
-        box-shadow: none;
-
-        span {
-          color: $color-gray-60;
-          font-size: $fs15;
-        }
-
-        &:hover {
-          background-color: $color-white;
-          border: 2px solid $color-primary;
-        }
-
-      }
-
-      // PROJECTS, ELEMENTS & ICONS GRID
-      &.project-th {
         background-color: $color-white;
-        // border: 2px solid $color-gray-10;
+        border: 1px solid $color-gray-20;
-
+        border-radius: 4px;
-        &:hover {
+        position: absolute;
-          border-color: $color-primary;
+        top: $x-small;
-
+        right: $x-small;
-          .project-th-actions {
+        height: 32px;
-            display: flex;
+        width: 32px;
-          }
+        display: flex;
-        }
+        align-items: center;
-
+        justify-content: center;
-        .project-th-actions {
-          align-items: center;
-          bottom: 0;
-          display: none;
-          left: 0;
-          justify-content: flex-end;
-          padding: $small;
-          position: absolute;
-          width: 100%;
-
-          svg {
-            fill: $color-gray-20;
-            height: 14px;
-            margin-right: $x-small;
-            width: 14px;
-          }
-
-          span {
-            color: $color-black;
-          }
-
-          .project-th-icon {
-            align-items: center;
-            display: flex;
-            margin-right: $small;
-
-            &.menu {
-              margin-right: 0;
-
-              svg {
-                fill: $color-gray-30;
-                margin-right: 0;
-              }
-
-              &:hover {
-                transform: scale(1.4);
-
-                svg {
-                  fill: $color-primary-dark;
-                }
-
-              }
-
-            }
-
-            &.delete {
-              margin-right: 0;
-
-              svg {
-                fill: $color-gray-30;
-                margin-right: 0;
-              }
-
-              &:hover {
-                transform: scale(1.4);
-
-                svg {
-                  fill: $color-danger;
-                }
-
-              }
-
-            }
-
-            &.edit {
-              margin-right: 0;
-
-              svg {
-                fill: $color-gray-30;
-              }
-
-              &:hover {
-                transform: scale(1.4);
-
-                svg {
-                  fill: $color-gray-60;
-                }
-
-              }
-
-            }
-
-          }
-
-        }
-
-        .project-th-actions.force-display {
-          display: flex;
-        }
-
-      }
-
-      // IMAGES SECTION
-      &.images-th {
-        border: 1px dashed $color-gray-20;
-        border-bottom: 2px solid lighten($color-gray-20, 12%);
-
-        &:hover {
-          border-color: $color-primary;
-        }
-
-      }
-
-      .grid-item-image {
 
         svg {
-          max-height: 100px;
+          fill: $color-gray-30;
-          max-width: 100px;
+          height: 16px;
-          min-height: 40px;
+          width: 16px;
-          min-width: 40px;
-          width: 8vw;
         }
+    }
 
+    &.add-file {
+      border: 1px dashed $color-gray-20;
+      justify-content: center;
+      box-shadow: none;
+
+      span {
+        color: $color-gray-60;
+        font-size: $fs15;
       }
 
-      .color-swatch {
+      &:hover {
-        border-top-left-radius: $br-medium;
+        background-color: $color-white;
-        border-top-right-radius: $br-medium;
+        border: 2px solid $color-primary;
-        height: 25%;
+      }
+
+    }
+
+    // PROJECTS, ELEMENTS & ICONS GRID
+    &.project-th {
+      background-color: $color-white;
+      // border: 2px solid $color-gray-10;
+
+      &:hover {
+        border-color: $color-primary;
+
+        .project-th-actions {
+          display: flex;
+        }
+      }
+
+      .project-th-actions {
+        align-items: center;
+        bottom: 0;
+        display: none;
         left: 0;
+        justify-content: flex-end;
+        padding: $small;
         position: absolute;
-        top: 0;
         width: 100%;
-      }
 
-      .color-data {
+        svg {
-        color: $color-gray-30;
+          fill: $color-gray-20;
-        margin-top: 15px;
+          height: 14px;
-      }
+          margin-right: $x-small;
-
+          width: 14px;
-      .input-checkbox {
-        margin: 0;
-        position: absolute;
-        top: 10px;
-        right: 5px;
-
-        label {
-          margin: 0;
         }
 
+        span {
+          color: $color-black;
+        }
+
+        .project-th-icon {
+          align-items: center;
+          display: flex;
+          margin-right: $small;
+
+          &.menu {
+            margin-right: 0;
+
+            svg {
+              fill: $color-gray-30;
+              margin-right: 0;
+            }
+
+            &:hover {
+              transform: scale(1.4);
+
+              svg {
+                fill: $color-primary-dark;
+              }
+
+            }
+
+          }
+
+          &.delete {
+            margin-right: 0;
+
+            svg {
+              fill: $color-gray-30;
+              margin-right: 0;
+            }
+
+            &:hover {
+              transform: scale(1.4);
+
+              svg {
+                fill: $color-danger;
+              }
+
+            }
+
+          }
+
+          &.edit {
+            margin-right: 0;
+
+            svg {
+              fill: $color-gray-30;
+            }
+
+            &:hover {
+              transform: scale(1.4);
+
+              svg {
+                fill: $color-gray-60;
+              }
+
+            }
+
+          }
+
+        }
+
+      }
+
+      .project-th-actions.force-display {
+        display: flex;
+      }
+
+    }
+
+    // IMAGES SECTION
+    &.images-th {
+      border: 1px dashed $color-gray-20;
+      border-bottom: 2px solid lighten($color-gray-20, 12%);
+
+      &:hover {
+        border-color: $color-primary;
+      }
+
+    }
+
+    .grid-item-image {
+
+      svg {
+        max-height: 100px;
+        max-width: 100px;
+        min-height: 40px;
+        min-width: 40px;
+        width: 8vw;
+      }
+
+    }
+
+    .color-swatch {
+      border-top-left-radius: $br-medium;
+      border-top-right-radius: $br-medium;
+      height: 25%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+    .color-data {
+      color: $color-gray-30;
+      margin-top: 15px;
+    }
+
+    .input-checkbox {
+      margin: 0;
+      position: absolute;
+      top: 10px;
+      right: 5px;
+
+      label {
+        margin: 0;
       }
 
     }
@@ -476,7 +466,6 @@
     height: fit-content;
     margin: $size-4;
     padding: 3rem;
-    width: 100%;
 
     .grid-files-desc {
       color: $color-gray-60;

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

@@ -141,7 +141,6 @@
                     (dom/prevent-default %)
                     (st/emit! (dsh/create-file id)))]
     [:section.dashboard-grid
-     [:div.dashboard-grid-content
       (if (> (count files) 0)
         [:div.dashboard-grid-row
          (when (not hide-new?)
@@ -152,4 +151,4 @@
         [:div.grid-files-empty
          [:div.grid-files-desc (t locale "dashboard.grid.empty-files")]
          [:div.grid-files-link
-          [:a.btn-secondary.btn-small {:on-click on-click} (t locale "ds.new-file")]]])]]))
+          [:a.btn-secondary.btn-small {:on-click on-click} (t locale "ds.new-file")]]])]))

frontend/src/uxbox/main/ui/dashboard/search.cljs

@@ -33,7 +33,6 @@
 
     [:section.search-page
       [:section.dashboard-grid
-       [:div.dashboard-grid-content
         (cond
           (empty? search-term)
           [:div.grid-files-empty
@@ -48,5 +47,5 @@
            [:div.grid-files-desc (t locale "dashboard.search.no-matches-for" search-term)]]
 
           :else
-          [:& grid { :files search-result :hide-new? true}])]]]))
+          [:& grid { :files search-result :hide-new? true}])]]))