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