use imageAspectRatio to set an estimated initial height for grid items

webapp/components/MasonryGrid/MasonryGrid.vue

@@ -1,6 +1,5 @@
 <template>
   <ds-grid
-    :min-column-width="300"
     v-on:calculating-item-height="startCalculation"
     v-on:finished-calculating-item-height="endCalculation"
     :class="[itemsCalculating ? 'reset-grid-height' : '']"
@@ -22,13 +21,19 @@ export default {
     },
     endCalculation() {
       this.itemsCalculating -= 1
-      this.$emit('hidePlaceholder')
     },
   },
 }
 </script>
 
-<style>
+<style lang="scss">
+/* dirty fix to override broken styleguide inline-styles */
+.ds-grid {
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
+  gap: 16px !important;
+  grid-auto-rows: 20px;
+}
+
 .reset-grid-height {
   grid-auto-rows: auto !important;
   align-items: self-start;

webapp/components/MasonryGrid/MasonryGridItem.spec.js

@@ -1,5 +1,4 @@
-import { config, shallowMount } from '@vue/test-utils'
-
+import { config, mount } from '@vue/test-utils'
 import MasonryGridItem from './MasonryGridItem'
 
 const localVue = global.localVue
@@ -10,23 +9,22 @@ describe('MasonryGridItem', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallowMount(MasonryGridItem, { localVue })
-    wrapper.vm.$parent.$emit = jest.fn()
+    wrapper = mount(MasonryGridItem, { localVue })
   })
 
-  it('emits "calculating-item-height" when starting calculation', async () => {
+  it('parent emits "calculating-item-height" when starting calculation', async () => {
     wrapper.vm.calculateItemHeight()
     await wrapper.vm.$nextTick()
 
-    const firstCallArgument = wrapper.vm.$parent.$emit.mock.calls[0][0]
-    expect(firstCallArgument).toBe('calculating-item-height')
+    const firstEmittedFunction = wrapper.vm.$parent.__emittedByOrder[0]
+    expect(firstEmittedFunction.name).toBe('calculating-item-height')
   })
 
-  it('emits "finished-calculating-item-height" after the calculation', async () => {
+  it('parent emits "finished-calculating-item-height" after the calculation', async () => {
     wrapper.vm.calculateItemHeight()
     await wrapper.vm.$nextTick()
 
-    const secondCallArgument = wrapper.vm.$parent.$emit.mock.calls[1][0]
-    expect(secondCallArgument).toBe('finished-calculating-item-height')
+    const secondEmittedFunction = wrapper.vm.$parent.__emittedByOrder[1]
+    expect(secondEmittedFunction.name).toBe('finished-calculating-item-height')
   })
 })

webapp/components/MasonryGrid/MasonryGridItem.vue

@@ -5,15 +5,33 @@
 </template>
 
 <script>
+const landscapeRatio = 1.3
+const squareRatio = 1
+const portraitRatio = 0.7
+
+const getRowSpan = aspectRatio => {
+  if (aspectRatio >= landscapeRatio) return 13
+  else if (aspectRatio >= squareRatio) return 15
+  else if (aspectRatio >= portraitRatio) return 18
+  else return 25
+}
+
 export default {
+  props: {
+    imageAspectRatio: {
+      type: Number,
+      default: null,
+    },
+  },
   data() {
     return {
-      rowSpan: 10,
+      rowSpan: this.imageAspectRatio ? getRowSpan(this.imageAspectRatio) : 8,
     }
   },
   methods: {
     calculateItemHeight() {
       this.$parent.$emit('calculating-item-height')
+
       this.$nextTick(() => {
         const gridStyle = this.$parent.$el.style
         const rowHeight = parseInt(gridStyle.gridAutoRows)
@@ -27,13 +45,7 @@ export default {
     },
   },
   mounted() {
-    const image = this.$el.querySelector('img')
-    if (image) {
-      image.onload = () => this.calculateItemHeight()
-    } else {
-      // use timeout to make sure layout is set up before calculation
-      setTimeout(() => this.calculateItemHeight(), 0)
-    }
+    this.calculateItemHeight()
   },
 }
 </script>

webapp/components/PostCard/PostCard.vue

@@ -4,9 +4,6 @@
     :image="post.image | proxyApiUrl"
     :class="{ 'post-card': true, 'disabled-content': post.disabled, 'post--pinned': isPinned }"
   >
-    <ds-placeholder v-if="showPlaceholder && post.imageAspectRatio" class="placeholder-image">
-      I'm a placeholder
-    </ds-placeholder>
     <!-- Post Link Target -->
     <nuxt-link
       class="post-link"
@@ -16,7 +13,7 @@
     </nuxt-link>
     <ds-space margin-bottom="small" />
     <!-- Username, Image & Date of Post -->
-    <div>
+    <div class="user-wrapper">
       <client-only>
         <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
       </client-only>
@@ -101,15 +98,6 @@ export default {
       type: Object,
       default: () => {},
     },
-    showPlaceholder: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      imageLoading: true,
-    }
   },
   computed: {
     ...mapGetters({
@@ -133,11 +121,6 @@ export default {
     isPinned() {
       return this.post && this.post.pinnedBy
     },
-    cssVars() {
-      return {
-        '--height': this.post.imageAspectRatio + 'px',
-      }
-    },
   },
   methods: {
     async deletePostCallback() {
@@ -157,14 +140,20 @@ export default {
     unpinPost(post) {
       this.$emit('unpinPost', post)
     },
-    hidePlaceholder() {
-      this.imageLoading = false
-    },
+  },
+  mounted() {
+    const width = this.$el.offsetWidth
+    const height = width / this.post.imageAspectRatio
+    const imageElement = this.$el.querySelector('.ds-card-image')
+
+    if (imageElement) {
+      imageElement.style.height = `${height}px`
+    }
   },
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .ds-card-image img {
   width: 100%;
   max-height: 2000px;
@@ -179,9 +168,21 @@ export default {
   cursor: pointer;
   position: relative;
   z-index: 1;
+  justify-content: space-between;
 
-  /*.ds-card-footer {
-  }*/
+  > .ds-card-content {
+    flex-grow: 0;
+  }
+
+  /* workaround to avoid jumping layout when footer is rendered */
+  > .ds-card-footer {
+    height: 75px;
+  }
+
+  /* workaround to avoid jumping layout when hc-user is rendered */
+  .user-wrapper {
+    height: 36px;
+  }
 
   .content-menu {
     display: inline-block;
@@ -204,8 +205,4 @@ export default {
 .post--pinned {
   border: 1px solid $color-warning;
 }
-
-.placeholder-image {
-  height: var(--height);
-}
 </style>

webapp/components/User/User.vue

@@ -149,7 +149,6 @@ export default {
 
 <style scoped lang="scss">
 .avatar {
-  display: inline-block;
   float: left;
   margin-right: 4px;
   height: 100%;

webapp/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <masonry-grid @hidePlaceholder="hidePlaceholder">
+    <masonry-grid>
       <ds-grid-item v-show="hashtag" :row-span="2" column-span="fullWidth">
         <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
@@ -16,11 +16,13 @@
         </div>
       </ds-grid-item>
       <template v-if="hasResults">
-        <masonry-grid-item v-for="post in posts" :key="post.id">
+        <masonry-grid-item
+          v-for="post in posts"
+          :key="post.id"
+          :imageAspectRatio="post.imageAspectRatio"
+        >
           <hc-post-card
             :post="post"
-            :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
-            :showPlaceholder="showPlaceholder"
             @removePostFromList="deletePost"
             @pinPost="pinPost"
             @unpinPost="unpinPost"
@@ -84,7 +86,6 @@ export default {
       offset: 0,
       pageSize: 12,
       hashtag,
-      showPlaceholder: true,
     }
   },
   computed: {
@@ -206,9 +207,6 @@ export default {
         })
         .catch(error => this.$toast.error(error.message))
     },
-    hidePlaceholder() {
-      this.showPlaceholder = false
-    },
   },
   apollo: {
     Post: {