Revert layout changes for imageAspectRatio

- we still add the imageAspectRatio for new posts, but we don't do
anything with the layout until we figure out how to add
imageAspectRatios for every post with an image in the database without
causing a big downtime

webapp/components/MasonryGrid/MasonryGridItem.vue

@@ -5,17 +5,6 @@
 </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: {
@@ -25,7 +14,7 @@ export default {
   },
   data() {
     return {
-      rowSpan: this.imageAspectRatio ? getRowSpan(this.imageAspectRatio) : 8,
+      rowSpan: 10,
     }
   },
   methods: {
@@ -45,7 +34,13 @@ export default {
     },
   },
   mounted() {
-    this.calculateItemHeight()
+    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)
+    }
   },
 }
 </script>

webapp/components/PostCard/PostCard.vue

@@ -141,15 +141,6 @@ export default {
       this.$emit('unpinPost', post)
     },
   },
-  mounted() {
-    const width = this.$el.offsetWidth
-    const height = Math.min(width / this.post.imageAspectRatio, 2000)
-    const imageElement = this.$el.querySelector('.ds-card-image')
-
-    if (imageElement) {
-      imageElement.style.height = `${height}px`
-    }
-  },
 }
 </script>
 

webapp/pages/index.vue

@@ -21,13 +21,10 @@
         </div>
       </ds-grid-item>
       <template v-if="hasResults">
-        <masonry-grid-item
-          v-for="post in posts"
-          :key="post.id"
-          :imageAspectRatio="post.imageAspectRatio"
-        >
+        <masonry-grid-item v-for="post in posts" :key="post.id">
           <hc-post-card
             :post="post"
+            :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
             @removePostFromList="deletePost"
             @pinPost="pinPost"
             @unpinPost="unpinPost"

webapp/pages/post/_id/_slug/more-info.vue

@@ -19,11 +19,7 @@
     <h3>{{ $t('post.moreInfo.titleOfRelatedContributionsSection') }}</h3>
     <ds-section>
       <masonry-grid v-if="post.relatedContributions && post.relatedContributions.length">
-        <masonry-grid-item
-          v-for="relatedPost in post.relatedContributions"
-          :key="relatedPost.id"
-          :imageAspectRatio="relatedPost.imageAspectRatio"
-        >
+        <masonry-grid-item v-for="relatedPost in post.relatedContributions" :key="relatedPost.id">
           <hc-post-card
             :post="relatedPost"
             :width="{ base: '100%', lg: 1 }"

webapp/pages/profile/_id/_slug.vue

@@ -232,11 +232,7 @@
           </ds-grid-item>
 
           <template v-if="posts.length">
-            <masonry-grid-item
-              v-for="post in posts"
-              :key="post.id"
-              :imageAspectRatio="post.imageAspectRatio"
-            >
+            <masonry-grid-item v-for="post in posts" :key="post.id">
               <hc-post-card
                 :post="post"
                 :width="{ base: '100%', md: '100%', xl: '50%' }"