pass imageAspectRatio to MasonryGridItems on user and more info page

This commit is contained in:
Alina Beck 2019-12-02 16:25:39 +03:00
parent bf7042c423
commit c75c8c6d2d
4 changed files with 13 additions and 5 deletions

View File

@ -143,7 +143,7 @@ export default {
},
mounted() {
const width = this.$el.offsetWidth
const height = Math.min((width / this.post.imageAspectRatio), 2000)
const height = Math.min(width / this.post.imageAspectRatio, 2000)
const imageElement = this.$el.querySelector('.ds-card-image')
if (imageElement) {

View File

@ -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 }"

View File

@ -115,7 +115,7 @@ describe('ProfileSlug', () => {
})
it('displays a loading spinner below the posts list', () => {
expect(wrapper.find('.user-profile-posts-list .ds-spinner').exists()).toBe(true)
expect(wrapper.find('.ds-spinner').exists()).toBe(true)
})
})
})

View File

@ -168,7 +168,7 @@
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
<masonry-grid class="user-profile-posts-list">
<masonry-grid>
<ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth">
<ds-card class="ds-tab-nav">
<ul class="Tabs">
@ -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%' }"