Add Camp story

5 files changed, 148 insertions, 11 deletions

diff --git a/components/Posts/EmptyCampStory.vue b/components/Posts/EmptyCampStory.vue
new file mode 100644
index 0000000..57bea40
--- /dev/null
+++ b/components/Posts/EmptyCampStory.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <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/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;
diff --git a/pages/oboz/2020.vue b/pages/oboz/2020.vue
index e80259d..68a00d9 100644
--- a/pages/oboz/2020.vue
+++ b/pages/oboz/2020.vue
@@ -11,24 +11,76 @@
         <h3>7 PDH Watra</h3>
       </div>
     </div>
-    <day-countdown text="Do obozu zostało:" :end-date="new Date(2020, 6, 7)" />
+    <day-countdown
+      v-if="awaiting"
+      text="Do obozu zostało:"
+      :end-date="endDate"
+    />
+    <google-drive-link
+      v-else-if="photos"
+      text="Zobacz zdjęcia z obozu"
+      :link="photos"
+    />
     <camp-map
       src="https://maps.google.com/maps?q=Jezioro%20Spore&t=&z=13&ie=UTF8&iwloc=&output=embed"
     />
-    <h3 style="margin-top: 10vh">Tutaj niedługo znajdziesz relacje z obozu</h3>
-    <pure-post-list loading :posts="[]" style="margin-bottom: 30px" />
+    <div v-if="posts">
+      <h3 class="story" style="margin: 10vh 10vmin">
+        To się działo na obozie
+      </h3>
+      <pure-post-list :posts="posts" style="margin-bottom: 30px" />
+    </div>
+    <empty-camp-story v-else />
   </section>
 </template>
 
 <script>
+import axios from 'axios'
+
 import PurePostList from '~/components/Posts/PostList/PurePostList'
 import DayCountdown from '~/components/DayCountdown'
 import CampMap from '~/components/CampMap'
+import EmptyCampStory from '~/components/Posts/EmptyCampStory'
+import GoogleDriveLink from '~/components/GoogleDriveLink'
+
+import { parsePosts } from '~/components/Posts/PostList'
+
 export default {
   components: {
     PurePostList,
     DayCountdown,
     CampMap,
+    GoogleDriveLink,
+    EmptyCampStory,
+    PurePostList,
+  },
+  async asyncData() {
+    try {
+      let posts = await axios.get(
+        `https://puszcza.netlify.com/api/category/oboz2020.json`
+      )
+      console.log(posts)
+      return {
+        posts: parsePosts(posts.data),
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  },
+  data() {
+    return {
+      posts: null,
+      endDate: new Date(2020, 6, 7),
+    }
+  },
+  computed: {
+    days() {
+      let now = new Date(Date.now())
+      return Math.round((this.endDate.getTime() - now.getTime()) / 86400000)
+    },
+    awaiting() {
+      return this.days > 0
+    },
   },
 }
 </script>
@@ -105,4 +157,36 @@ h1 {
     content: '';
   }
 }
+
+.story::before,
+.story::after {
+  content: '';
+  background-image: url('/assets/tomahawk.svg');
+  background-size: contain;
+  width: 70px;
+  height: 70px;
+  display: block;
+  top: 30px;
+  margin: auto;
+  margin-bottom: 20px;
+}
+
+.story::after {
+  display: none;
+  -moz-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+  filter: FlipX;
+  -ms-filter: 'FlipX';
+}
+
+@media (min-width: 510px) {
+  .story::before,
+  .story::after {
+    display: inline-block;
+    position: relative;
+    margin: 0 10px;
+  }
+}
 </style>
diff --git a/static/_headers b/static/_headers
new file mode 100644
index 0000000..cb762ef
--- /dev/null
+++ b/static/_headers
@@ -0,0 +1 @@
+Access-Control-Allow-Origin: *
diff --git a/static/assets/tomahawk.svg b/static/assets/tomahawk.svg
new file mode 100644
index 0000000..7e49c2c
--- /dev/null
+++ b/static/assets/tomahawk.svg
@@ -0,0 +1,31 @@
+<svg width="79" height="78" viewBox="0 0 79 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<g clip-path="url(#clip0)">
+<path d="M37.9704 13.992C35.399 14.6342 33.8356 17.2408 34.4778 19.8122C35.1225 22.3836 37.7267 23.9471 40.2993 23.3049C42.8709 22.6602 56.8507 16.9502 56.2072 14.3788C55.5648 11.8074 40.5419 13.3497 37.9704 13.992Z" fill="#C44141"/>
+<path d="M40.3028 15.1008C37.7442 14.4047 35.1086 15.9142 34.4099 18.4715C33.7136 21.0288 35.2211 23.6659 37.7796 24.362C40.3381 25.0606 55.3247 26.9147 56.021 24.3574C56.7183 21.8001 42.8603 15.797 40.3028 15.1008Z" fill="#F85A5A"/>
+<path d="M20.8144 10.5863C22.72 8.74385 25.7603 8.79306 27.6026 10.6988L76.6506 61.3935C78.4931 63.297 78.4426 66.3372 76.5369 68.1793C74.6325 70.0218 71.5933 69.9703 69.751 68.0668H69.7498C69.7498 68.0647 69.7498 68.0647 69.7498 68.0647H69.7485L20.7018 17.3723C18.8594 15.4667 18.9109 12.4289 20.8144 10.5863Z" fill="#764242"/>
+<path d="M33.2378 11.9249C33.8518 12.5601 34.8645 12.5766 35.5021 11.9624C36.135 11.3482 36.1538 10.3357 35.5396 9.70039C34.9256 9.06519 33.9129 9.04868 33.2753 9.66288C32.6422 10.2771 32.6236 11.2897 33.2378 11.9249Z" fill="#94A1B1"/>
+<path d="M39.9161 18.8283C40.5303 19.4635 41.5441 19.4798 42.1781 18.8658C42.8133 18.2516 42.831 17.2389 42.2169 16.6037C41.6015 15.9685 40.5888 15.952 39.9548 16.5662C39.3193 17.1804 39.3019 18.1931 39.9161 18.8283Z" fill="#94A1B1"/>
+<path d="M1.19 34.0177L30.9383 14.1496L35.5397 9.70068L42.2122 16.5992L37.612 21.0482L39.8364 23.3477L30.636 32.2458L18.9863 52.4186C5.07186 47.2358 1.19 34.0177 1.19 34.0177Z" fill="#94A1B1"/>
+<path d="M20.458 49.8698L18.9858 52.4175C5.07158 47.2349 1.18987 34.0168 1.18987 34.0168L3.67936 32.355C4.57711 34.8679 8.88308 45.1606 20.458 49.8698Z" fill="#D0D5DB"/>
+<path d="M32.9378 30.0231L39.8362 23.3472L28.7462 11.8794L21.8452 18.5529L32.9378 30.0231Z" fill="#D0D5DB"/>
+<path d="M29.6749 22.0486C30.2893 22.6838 31.3019 22.7001 31.9394 22.0861C32.5723 21.4719 32.5911 20.457 31.9769 19.8216C31.3627 19.1887 30.35 19.1699 29.7124 19.7841C29.0796 20.4006 29.0607 21.4132 29.6749 22.0486Z" fill="#424953"/>
+<path d="M50.9928 39.4672L71.0134 60.1673L73.314 57.9431L53.2923 37.2427L50.9928 39.4672Z" fill="#E8563F"/>
+<path d="M46.3927 43.9159L66.4144 64.6162L73.3113 57.9425L53.2908 37.2422L46.3927 43.9159Z" fill="#B36053"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="0.893968" y="0.965332" width="77.402" height="78.2899" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1.18389"/>
+<feGaussianBlur stdDeviation="0.147987"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<clipPath id="clip0">
+<path d="M78 0.965332H1.18999V77.7753H78V0.965332Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>