add masonry grid

webapp/components/PostCard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-flex-item :width="width">
+  <div ref="postCard" class="grid-item" v-bind:style="{ gridRowEnd: 'span ' + rowSpan }">
     <ds-card
       :image="post.image | proxyApiUrl"
       :class="{ 'post-card': true, 'disabled-content': post.disabled }"
@@ -35,7 +35,11 @@
           <hc-category
             v-for="category in post.categories"
             :key="category.id"
-            v-tooltip="{ content: category.name, placement: 'bottom-start', delay: { show: 500 } }"
+            v-tooltip="{
+              content: category.name,
+              placement: 'bottom-start',
+              delay: { show: 500 },
+            }"
             :icon="category.icon"
           />
         </div>
@@ -63,7 +67,7 @@
         </no-ssr>
       </template>
     </ds-card>
-  </ds-flex-item>
+  </div>
 </template>
 
 <script>
@@ -93,6 +97,11 @@ export default {
       default: () => {},
     },
   },
+  data() {
+    return {
+      rowSpan: 10,
+    }
+  },
   computed: {
     ...mapGetters({
       user: 'auth/user',
@@ -123,6 +132,25 @@ export default {
         this.$toast.error(err.message)
       }
     },
+    calculateItemHeight() {
+      const grid = document.querySelector('.masonry-grid')
+      const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'))
+      const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'))
+      grid.style.gridAutoRows = 'auto'
+      grid.style.alignItems = 'self-start'
+      const itemHeight = this.$refs.postCard.clientHeight
+      this.rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
+      grid.removeAttribute('style')
+    },
+  },
+  mounted() {
+    const image = this.$refs.postCard.querySelector('img')
+    if (image) {
+      image.onload = this.calculateItemHeight
+    } else {
+      // use timeout to make sure layout is set up before executing
+      setTimeout(this.calculateItemHeight, 0)
+    }
   },
 }
 </script>

webapp/pages/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <ds-flex :width="{ base: '100%' }" gutter="base">
-      <ds-flex-item>
+    <div class="masonry-grid">
+      <div class="grid-item grid-item--full-width">
         <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
-      </ds-flex-item>
-      <ds-flex-item>
+      </div>
+      <div class="grid-item grid-item--full-width">
         <div class="sorting-dropdown">
           <ds-select
             v-model="selected"
@@ -14,7 +14,7 @@
             @input="toggleOnlySorting"
           ></ds-select>
         </div>
-      </ds-flex-item>
+      </div>
       <hc-post-card
         v-for="post in posts"
         :key="post.id"
@@ -22,7 +22,7 @@
         :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
         @removePostFromList="deletePost(index, post.id)"
       />
-    </ds-flex>
+    </div>
     <no-ssr>
       <ds-button
         v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }"
@@ -168,6 +168,21 @@ export default {
 </script>
 
 <style lang="scss">
+.masonry-grid {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-auto-rows: 20px;
+}
+
+.grid-item {
+  grid-row-end: span 2;
+
+  &--full-width {
+    grid-column: 1 / -1;
+  }
+}
+
 .post-add-button {
   z-index: 100;
   position: fixed;
@@ -182,5 +197,6 @@ export default {
   position: relative;
   float: right;
   padding: 0 18px;
+  margin: 4px 0;
 }
 </style>