Merge pull request #25 from 19pdh/develop

Camp & images

13 files changed, 238 insertions, 39 deletions

diff --git a/components/CampMap.vue b/components/CampMap.vue
new file mode 100644
index 0000000..eae1fc0
--- /dev/null
+++ b/components/CampMap.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="mapouter">
+    <div class="gmap_canvas">
+      <iframe
+        id="gmap_canvas"
+        :src="src"
+        frameborder="0"
+        scrolling="no"
+        marginheight="0"
+        marginwidth="0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CampMap',
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style>
+.mapouter,
+.gmap_canvas,
+#gmap_canvas {
+  width: 100%;
+  height: 50vh;
+  max-height: 300px;
+}
+</style>
diff --git a/components/DayCountdown.vue b/components/DayCountdown.vue
new file mode 100644
index 0000000..9415917
--- /dev/null
+++ b/components/DayCountdown.vue
@@ -0,0 +1,47 @@
+<template>
+  <client-only>
+    <div class="countdown">
+      {{ text }} <span>{{ days }} dni</span>
+    </div>
+  </client-only>
+</template>
+
+<script>
+export default {
+  name: 'DayCountdown',
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    endDate: {
+      type: Date,
+      required: true,
+    },
+    startDate: {
+      type: Date,
+      default: () => new Date(Date.now()),
+    },
+  },
+  computed: {
+    days() {
+      return Math.round(
+        (this.endDate.getTime() - this.startDate.getTime()) / 86400000
+      )
+    },
+  },
+}
+</script>
+
+<style>
+.countdown {
+  background: #ffffff;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+  padding: 20px;
+  margin: 50px 10px;
+}
+
+.countdown span {
+  font-weight: 600;
+}
+</style>
diff --git a/components/GoogleDriveLink.vue b/components/GoogleDriveLink.vue
index c54c630..ada6eff 100644
--- a/components/GoogleDriveLink.vue
+++ b/components/GoogleDriveLink.vue
@@ -6,7 +6,7 @@
     <div class="text">
       <p v-html="text"></p>
     </div>
-    <a :href="link">
+    <a :href="link" target="_blank" rel="noopener">
       <plain-button text="Przejdź" />
     </a>
   </div>
@@ -21,13 +21,13 @@ export default {
   props: {
     text: {
       type: String,
-      required: true
+      required: true,
     },
     link: {
       type: String,
-      required: true
-    }
-  }
+      required: true,
+    },
+  },
 }
 </script>
 
diff --git a/components/JoinUs.vue b/components/JoinUs.vue
index a219d16..65431fa 100644
--- a/components/JoinUs.vue
+++ b/components/JoinUs.vue
@@ -21,12 +21,16 @@ export default {
 </script>
 
 <style scoped>
+.webp .joinus {
+  background-image: url('/assets/bg.webp');
+}
+
 .joinus {
   width: 100%;
 
   padding: 80px 20%;
 
-  background-image: url('/assets/bg.webp');
+  background-image: url('/assets/bg.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/components/ObozWidget.vue b/components/ObozWidget.vue
new file mode 100644
index 0000000..084feab
--- /dev/null
+++ b/components/ObozWidget.vue
@@ -0,0 +1,50 @@
+<template>
+  <section class="oboz-widget">
+    <nuxt-link to="/oboz/2020">
+      <img src="/assets/oboz.svg" />
+    </nuxt-link>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'ObozWidget'
+}
+</script>
+
+<style scoped>
+.webp .oboz-widget {
+  background-image: url('/assets/oboz.webp');
+}
+
+.oboz-widget {
+  width: 100%;
+
+  margin-top: 50px;
+  padding: 80px 20%;
+
+  background-image: url('/assets/oboz.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+img {
+  max-width: 60vmin;
+  transition: all 1s ease-in-out;
+}
+
+img:hover {
+  transform: scale(1.1);
+}
+
+@media (max-width: 500px) {
+  .oboz-widget {
+    padding: 80px 20px;
+  }
+}
+</style>
diff --git a/components/Posts/EmptyCampStory.vue b/components/Posts/EmptyCampStory.vue
new file mode 100644
index 0000000..b9ecd12
--- /dev/null
+++ b/components/Posts/EmptyCampStory.vue
@@ -0,0 +1,19 @@
+<template>
+  <div style="width: 100%">
+    <h3 style="margin: 10vh 10vmin 0 10vmin">
+      Tutaj niedługo znajdziesz relację z obozu
+    </h3>
+    <pure-post-list loading :posts="[]" style="margin-bottom: 30px" />
+  </div>
+</template>
+
+<script>
+import PurePostList from '~/components/Posts/PostList/PurePostList'
+
+export default {
+  name: 'EmptyCampStory',
+  components: {
+    PurePostList,
+  },
+}
+</script>
diff --git a/components/Posts/PostLink.stories.js b/components/Posts/PostLink.stories.js
index 9b12c29..5fdfb6f 100644
--- a/components/Posts/PostLink.stories.js
+++ b/components/Posts/PostLink.stories.js
@@ -7,7 +7,9 @@ export const postLink = {
   title: 'Test PostLink',
   description:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.',
-  route: '/kronika/2019/20/11/test'
+  route: '/kronika/2019/20/11/test',
+  image:
+    'https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
 }
 
 storiesOf('Posts/PostLink', module)
@@ -16,6 +18,13 @@ storiesOf('Posts/PostLink', module)
     return {
       components: { PostLink },
       template: `<post-link :title="title" :description="description" :route="route"/>`,
-      data: () => postLink
+      data: () => postLink,
+    }
+  })
+  .add('with image', () => {
+    return {
+      components: { PostLink },
+      template: `<post-link :title="title" :description="description" :route="route" :image="image"/>`,
+      data: () => postLink,
     }
   })
diff --git a/components/Posts/PostLink.vue b/components/Posts/PostLink.vue
index 8d0a669..3f80bae 100644
--- a/components/Posts/PostLink.vue
+++ b/components/Posts/PostLink.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="post-link">
     <a :href="route">
-      <div class="post-container">
-        <h4 class="post-title">{{ title }}</h4>
-        <p class="post-description">{{ shortenedDescription }}...</p>
+      <div>
+        <div class="image" :style="`background-image: url('${image}')`" />
+        <div class="post-container">
+          <h4 class="post-title">{{ title }}</h4>
+          <p class="post-description">{{ shortenedDescription }}...</p>
+        </div>
       </div>
     </a>
   </div>
@@ -15,23 +18,28 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
     },
     description: {
       type: String,
-      default: ''
+      default: '',
     },
     route: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
+    image: {
+      type: String,
+      required: false,
+      default: () => '/assets/og/default.jpg',
+    },
   },
   computed: {
     shortenedDescription() {
       const first30Words = this.description.split(' ').slice(0, 30)
       return first30Words.join(' ')
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -60,6 +68,7 @@ export default {
 .post-link .post-container {
   padding: 20px;
   height: 100%;
+  padding-top: 0;
 }
 
 .post-link .post-title {
@@ -71,4 +80,12 @@ export default {
   color: #484848;
   font-size: 0.9em;
 }
+
+.post-link .image {
+  height: 300px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  box-shadow: inset 0px 0px 100px rgba(0, 0, 0, 0.25);
+}
 </style>
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(),
     }
-  }
+  },
 }
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
index 4d17616..8724fa7 100644
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -26,33 +26,33 @@ import NavLink from './NavLink'
 export default {
   name: 'TheHeader',
   components: {
-    NavLink
+    NavLink,
   },
   props: {
     routes: {
       type: Array,
-      required: true
+      required: true,
     },
     title: {
       type: String,
-      required: true
+      required: true,
     },
     logo: {
       type: String,
       required: false,
-      default: () => ''
-    }
+      default: () => '',
+    },
   },
   data: function() {
     return {
-      showMenu: false
+      showMenu: false,
     }
   },
   methods: {
     toggleMenu() {
       this.showMenu = !this.showMenu
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -83,6 +83,7 @@ export default {
 }
 
 .title {
+  z-index: 99;
   font-size: 30px;
   flex-shrink: 0;
 
@@ -100,6 +101,7 @@ export default {
 }
 
 .links {
+  z-index: 98;
   display: flex;
   flex-direction: row;
   padding: 0;