Add day countdown

1 files changed, 22 insertions, 1 deletions

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;