Add back layout changes/update db_manipulation

- we had removed these changes till we could deploy them by themselves
and run the db_manipulation

Co-authored-by: Alina Beck <alina.beck@mail.com>

neo4j/db_manipulation/add_image_aspect_ratio.sh

@@ -12,19 +12,11 @@ do
   sleep 1
 done
 
-shopt -s nullglob
+echo "
-for image in uploads/*; do
+  CALL apoc.periodic.iterate('
-  [ -e "$image" ] || continue
+  CALL apoc.load.csv("out.csv") yield map as row return row
-  IMAGE_WIDTH=$( identify -format '%w' "$image" )
+  ','
-  IMAGE_HEIGHT=$( identify -format '%h' "$image" )
+  MATCH (post:Post) where post.image = row.image
-  IMAGE_ASPECT_RATIO=$(echo | awk "{ print ${IMAGE_WIDTH}/${IMAGE_HEIGHT}}")
+  set post.imageAspectRatio = row.aspectRatio
-  
+  ', {batchSize:10000, iterateList:true, parallel:true});
- 
+" | cypher-shell
-  echo "$image"
-  echo "$IMAGE_ASPECT_RATIO"
-  echo "
-    match (post:Post {image: '/"${image}"'})
-    set post.imageAspectRatio = "${IMAGE_ASPECT_RATIO}"
-    return post;
-  " | cypher-shell
-done

webapp/components/MasonryGrid/MasonryGridItem.spec.js

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

webapp/components/MasonryGrid/MasonryGridItem.vue

@@ -5,6 +5,16 @@
 </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: {
@@ -14,7 +24,7 @@ export default {
   },
   data() {
     return {
-      rowSpan: 10,
+      rowSpan: this.imageAspectRatio ? getRowSpan(this.imageAspectRatio) : 8,
     }
   },
   methods: {
@@ -34,13 +44,7 @@ export default {
     },
   },
   mounted() {
-    const image = this.$el.querySelector('img')
+    this.calculateItemHeight()
-    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

@@ -99,6 +99,14 @@ export default {
       default: () => {},
     },
   },
+  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`
+    }
+  },
   computed: {
     ...mapGetters({
       user: 'auth/user',

webapp/pages/index.vue

@@ -21,10 +21,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%' }"
             @removePostFromList="deletePost"
             @pinPost="pinPost"
             @unpinPost="unpinPost"

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

@@ -19,7 +19,11 @@
     <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">
+        <masonry-grid-item
+          v-for="relatedPost in post.relatedContributions"
+          :key="relatedPost.id"
+          :imageAspectRatio="relatedPost.imageAspectRatio"
+        >
           <hc-post-card
             :post="relatedPost"
             :width="{ base: '100%', lg: 1 }"

webapp/pages/profile/_id/_slug.vue

@@ -232,7 +232,11 @@
           </ds-grid-item>
 
           <template v-if="posts.length">
-            <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%', md: '100%', xl: '50%' }"