Make tiles on non-projects views smaller by default

owncloud · Jan 16, 2023 · e4f086d · e4f086d
1 parent 06cd00e
commit e4f086d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
     <oc-list class="oc-tiles oc-flex">
-      <li v-for="(resource, index) in data" :key="resource.id" class="oc-tiles-item">
+      <li
+        v-for="(resource, index) in data"
+        :key="resource.id"
+        class="oc-tiles-item"
+        :class="tileWidth === 'small' ? 'small-tiles' : ''"
+      >
         <oc-tile
           :ref="
             (el) => {
@@ -83,6 +88,10 @@ export default defineComponent({
     data: {
       type: Array as PropType<Resource[]>,
       default: () => []
+    },
+    tileWidth: {
+      type: String,
+      default: ''
     }
   },
   emits: ['fileClick', 'rowMounted'],
@@ -187,12 +196,18 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .oc-tiles {
-  flex-wrap: wrap;
-  gap: 15px;
-  justify-content: flex-start;
+  column-gap: 8px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 160px);
+  justify-content: space-between;
+  row-gap: 32px;
 
   .oc-tiles-item {
-    width: 252px;
+    width: 18rem;
+
+    &.small-tiles {
+      width: 12rem;
+    }
 
     @media (max-width: $oc-breakpoint-xsmall-max) {
       width: 100%;

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -48,6 +48,7 @@
           v-else-if="viewMode === ViewModeConstants.tilesView.name"
           :data="paginatedResources"
           class="oc-px-m oc-pt-l"
+          tile-width="small"
           @rowMounted="rowMounted"
           @fileClick="$_fileActions_triggerDefaultAction"
         >