Merge pull request #25 from 19pdh/develop

Camp & images

4 files changed, 29 insertions, 14 deletions

diff --git a/components/Posts/PostList/PurePostList.stories.js b/components/Posts/PostList/PurePostList.stories.js
index e2c39de..a159982 100644
--- a/components/Posts/PostList/PurePostList.stories.js
+++ b/components/Posts/PostList/PurePostList.stories.js
@@ -4,27 +4,33 @@ import { postLink } from '../PostLink.stories'
 
 import PurePostList from './PurePostList'
 
-export const posts = Array(5).fill(postLink)
+const postLinkNoImage = { ...postLink }
+delete postLinkNoImage['image']
+
+export const posts = [
+  ...Array(3).fill(postLinkNoImage),
+  ...Array(5).fill(postLink),
+]
 
 storiesOf('Posts/PurePostList', module)
   .add('default', () => {
     return {
       components: { PurePostList },
       template: `<pure-post-list :posts="posts"/>`,
-      data: () => ({ posts })
+      data: () => ({ posts }),
     }
   })
   .add('loading', () => {
     return {
       components: { PurePostList },
       template: `<pure-post-list :posts="posts" loading/>`,
-      data: () => ({ posts: [] })
+      data: () => ({ posts: [] }),
     }
   })
   .add('no posts', () => {
     return {
       components: { PurePostList },
       template: `<pure-post-list :posts="posts"/>`,
-      data: () => ({ posts: [] })
+      data: () => ({ posts: [] }),
     }
   })
diff --git a/components/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue
index ace069f..210973e 100644
--- a/components/Posts/PostList/PurePostList.vue
+++ b/components/Posts/PostList/PurePostList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="post-list">
-    <div v-if="loading" class="post-list-container">
+    <div v-if="loading" class="post-list-container loading">
       <div class="loading-post" v-for="(_, index) in 4" :key="index"></div>
     </div>
     <div v-else-if="!posts" class="no-posts">Brak wpisów</div>
@@ -12,6 +12,7 @@
           :route="post.route"
           :title="post.title"
           :description="post.description"
+          :image="post.image"
         />
       </div>
     </transition>
@@ -27,14 +28,14 @@ export default {
   props: {
     posts: {
       type: Array,
-      required: true
+      required: true,
     },
     loading: {
       type: Boolean,
       required: false,
-      default: () => false
-    }
-  }
+      default: () => false,
+    },
+  },
 }
 </script>
 
@@ -52,6 +53,13 @@ export default {
   justify-content: center;
 }
 
+@media (max-width: 920px) {
+  .post-list-container.loading div:nth-child(1),
+  .post-list-container.loading div:nth-child(2) {
+    display: none;
+  }
+}
+
 @keyframes loading {
   0%,
   100% {
diff --git a/components/Posts/PostList/index.js b/components/Posts/PostList/index.js
index 11d44ff..7e0b1f4 100644
--- a/components/Posts/PostList/index.js
+++ b/components/Posts/PostList/index.js
@@ -12,11 +12,12 @@ export const getPosts = async () => {
   }
 }
 
-export const parsePosts = posts =>
-  posts.map(post => ({
+export const parsePosts = (posts) =>
+  posts.map((post) => ({
     title: post.content.meta.title,
+    image: post.content.meta.image,
     description: post.content.description,
-    route: post.route
+    route: post.route,
   }))
 
 export default PostList
diff --git a/components/Posts/PostList/parentMixin.js b/components/Posts/PostList/parentMixin.js
index e5b06ed..801d51c 100644
--- a/components/Posts/PostList/parentMixin.js
+++ b/components/Posts/PostList/parentMixin.js
@@ -3,7 +3,7 @@ import { getPosts } from './index'
 export default {
   async asyncData() {
     return {
-      posts: await getPosts()
+      posts: await getPosts(),
     }
-  }
+  },
 }