Merge pull request #2467 from Human-Connection/revert-layout-changes-imageAspectRatio

Revert layout changes image aspect ratio

webapp/components/MasonryGrid/MasonryGridItem.spec.js

@@ -1,4 +1,4 @@
-import { config, mount } from '@vue/test-utils'
+import { config, shallowMount } from '@vue/test-utils'
 import MasonryGridItem from './MasonryGridItem'
 
 const localVue = global.localVue
@@ -8,41 +8,24 @@ config.stubs['ds-grid-item'] = '<span><slot /></span>'
 describe('MasonryGridItem', () => {
   let wrapper
 
-  describe('given an imageAspectRatio', () => {
-    it('sets the initial rowSpan to 13 when the ratio is higher than 1.3', () => {
-      const propsData = { imageAspectRatio: 2 }
-      wrapper = mount(MasonryGridItem, { localVue, propsData })
-
-      expect(wrapper.vm.rowSpan).toBe(13)
-    })
-
-    it('sets the initial rowSpan to 15 when the ratio is between 1.3 and 1', () => {
-      const propsData = { imageAspectRatio: 1.1 }
-      wrapper = mount(MasonryGridItem, { localVue, propsData })
-
-      expect(wrapper.vm.rowSpan).toBe(15)
-    })
-
-    it('sets the initial rowSpan to 18 when the ratio is between 1 and 0.7', () => {
-      const propsData = { imageAspectRatio: 0.7 }
-      wrapper = mount(MasonryGridItem, { localVue, propsData })
-
-      expect(wrapper.vm.rowSpan).toBe(18)
-    })
-
-    it('sets the initial rowSpan to 25 when the ratio is lower than 0.7', () => {
-      const propsData = { imageAspectRatio: 0.3 }
-      wrapper = mount(MasonryGridItem, { localVue, propsData })
-
-      expect(wrapper.vm.rowSpan).toBe(25)
-    })
+  beforeEach(() => {
+    wrapper = shallowMount(MasonryGridItem, { localVue })
+    wrapper.vm.$parent.$emit = jest.fn()
   })
 
-  describe('given no aspect ratio', () => {
-    it('sets the initial rowSpan to 8 when not given an imageAspectRatio', () => {
-      wrapper = mount(MasonryGridItem, { localVue })
+  it('emits "calculating-item-height" when starting calculation', async () => {
+    wrapper.vm.calculateItemHeight()
+    await wrapper.vm.$nextTick()
 
-      expect(wrapper.vm.rowSpan).toBe(8)
-    })
+    const firstCallArgument = wrapper.vm.$parent.$emit.mock.calls[0][0]
+    expect(firstCallArgument).toBe('calculating-item-height')
+  })
+
+  it('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')
   })
 })

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%' }"