Add day countdown

2 files changed, 30 insertions, 2 deletions

diff --git a/components/Posts/PostList/PurePostList.vue b/components/Posts/PostList/PurePostList.vue
index ace069f..2fe98cb 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>
@@ -52,6 +52,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/pages/oboz/2020.vue b/pages/oboz/2020.vue
index 335a24b..8915bec 100644
--- a/pages/oboz/2020.vue
+++ b/pages/oboz/2020.vue
@@ -8,6 +8,9 @@
         <h3>7 PDH Watra</h3>
       </div>
     </div>
+    <div class="countdown">
+      Do obozu zostało: <span>{{ days }} dni</span>
+    </div>
     <div class="mapouter">
       <div class="gmap_canvas">
         <iframe
@@ -30,6 +33,13 @@ import PurePostList from '~/components/Posts/PostList/PurePostList'
 export default {
   components: {
     PurePostList
+  },
+  computed: {
+    days() {
+      let now = new Date(Date.now())
+      let oboz = new Date(2020, 7, 6)
+      return Math.round((oboz.getTime() - now.getTime()) / 86400000)
+    }
   }
 }
 </script>
@@ -40,7 +50,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin: 15vmax 0;
+  margin: 15vmax 0 5vmax 0;
 }
 
 h1 {
@@ -60,6 +70,17 @@ h1 {
   margin: 10px;
 }
 
+.countdown {
+  background: #ffffff;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+  padding: 20px;
+  margin: 50px 10px;
+}
+
+.countdown span {
+  font-weight: 600;
+}
+
 @media (max-width: 480px) {
   .troops {
     flex-direction: column;