From fb4f487abddca99ad1165d1ef3060e8019782a74 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 9 Dec 2019 16:54:27 +0100
Subject: [PATCH] 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
---
 .../MasonryGrid/MasonryGridItem.vue           | 21 +++++++------------
 webapp/components/PostCard/PostCard.vue       |  9 --------
 webapp/pages/index.vue                        |  7 ++-----
 webapp/pages/post/_id/_slug/more-info.vue     |  6 +-----
 webapp/pages/profile/_id/_slug.vue            |  6 +-----
 5 files changed, 12 insertions(+), 37 deletions(-)

diff --git a/webapp/components/MasonryGrid/MasonryGridItem.vue b/webapp/components/MasonryGrid/MasonryGridItem.vue
index 91fb8a1d8..937da8f1f 100644
--- a/webapp/components/MasonryGrid/MasonryGridItem.vue
+++ b/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>
diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index 79ba9e8f0..60444c816 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/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>
 
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 3cd669bfe..723232a2f 100644
--- a/webapp/pages/index.vue
+++ b/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"
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index 2297800a2..fa690c354 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/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 }"
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index b343b018e..fd38aaf2c 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/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%' }"