<template> <section class="posts"> <PostsTimeline :hidden="posts.items == 0" /> <div class="posts__items"> <masonry :cols="{default: 2, 1020: 1}" :gutter="16" :columnClass="['masonrycolumn']"> <div v-for="(post, index) in posts.items" :key="post.index"> <PostsItem :post="post" class="posts__items-item" /> <Newsletter v-if="(index + 1) % 160 == 0 || (index + 1) == 80" /> <!--- <div v-for="(post, index) in posts.items" :key="post.index"> <PostsItem :post="post" class="posts__items-item" /> <Newsletter v-if="(index + 1) % 160 == 0 || (index + 1) == 80" /> </div> ---> </div> </masonry> <div v-if="posts.items == 0" class="posts__items-empty"> Nebyl nalezen žádný výsledek. </div> <div class="posts__more"> <Button @click.native="handlePostsShowMore" v-if="limit < posts.total" arrow="down" size="large" center>Starší články</Button> </div> </div> </section> </template> <script> import PostsItem from './PostsItem.vue'; import PostsTimeline from './PostsTimeline.vue'; import Newsletter from '@/components/newsletter/Newsletter.vue'; export default { components: { PostsItem, PostsTimeline, Newsletter, }, computed: { posts() { return this.$store.getters.filteredPosts; }, limit() { return this.$store.getters.filterLimit; } }, head() { const baseUrl = process.env.BASE_URL || 'https://www.piratipracuji.cz'; return { title: this.posts.items[0].title, meta: [ { hid: 'og:title', property: 'og:title', content: this.posts.items[0].title }, { hid: 'og:image', property: 'og:image', content: this.posts.items[0].thumbnail }, { hid: 'og:url', property: 'og:url', content: baseUrl }, ], }; }, methods: { handlePostsShowMore() { this.$store.commit('FILTER_INCREASE_LIMIT_SET'); }, } }; </script> <style lang="scss"> .masonrycolumn:first-of-type { z-index:2; background:#ffffff; } </style> <style lang="scss" scoped> .posts { display: flex; //background-color:#606060; &__items { flex: 1; width:100%; &-empty { text-align: center; padding-top: 5%; } &-more { display: flex; justify-content: center; } } } </style>