Merge pull request #24 from 19pdh/oboz

Oboz

7 files changed, 175 insertions, 10 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/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/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue
index c87b9dc..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>
@@ -53,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/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;