ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

use masonry grid for related posts

Browse Source
This commit is contained in:
Alina Beck 2019-09-04 16:51:08 +01:00
parent d81bbec00a
commit d1beed50d7
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
webapp/pages/post/_id/_slug/more-info.vue
View File

@ -33,19 +33,18 @@
</div>
</template>
<h3>{{ $t('post.moreInfo.titleOfRelatedContributionsSection') }}</h3>
<ds-section style="margin: 0 -1.5rem; padding: 1.5rem;">
<ds-flex v-if="post.relatedContributions && post.relatedContributions.length" gutter="small">
<hc-post-card
v-for="relatedPost in post.relatedContributions"
:key="relatedPost.id"
:post="relatedPost"
:width="{ base: '100%', lg: 1 }"
@removePostFromList="removePostFromList"
/>
</ds-flex>
<ds-section>
<masonry-grid v-if="post.relatedContributions && post.relatedContributions.length">
<masonry-grid-item v-for="relatedPost in post.relatedContributions" :key="relatedPost.id">
<hc-post-card
:post="relatedPost"
:width="{ base: '100%', lg: 1 }"
@removePostFromList="removePostFromList"
/>
</masonry-grid-item>
</masonry-grid>
<hc-empty v-else margin="large" icon="file" message="No related Posts" />
</ds-section>
<ds-space margin-bottom="large" />
</ds-card>
</template>
@ -53,6 +52,8 @@
import HcPostCard from '~/components/PostCard'
import HcEmpty from '~/components/Empty.vue'
import { relatedContributions } from '~/graphql/PostQuery'
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
export default {
transition: {
@ -62,6 +63,8 @@ export default {
components: {
HcPostCard,
HcEmpty,
MasonryGrid,
MasonryGridItem,
},
computed: {
post() {