Added overview

Author: mugetsu

components/Footer/index.vue

@@ -1,20 +1,13 @@
 <template>
   <div class="wrap-footer">
     <footer>
-      <Search />
-      <!-- <p>© 2020 COVID-19 Tracker</p> -->
     </footer>
   </div>
 </template>
 
 <script>
-import Search from '~/components/Search'
-
 export default {
   name: 'Footer',
-  components: {
-    Search
-  },
   data() {
     return {}
   }
@@ -23,7 +16,7 @@ export default {
 
 <style lang="scss" scoped>
 .wrap-footer {
-  position: relative;
+  position: absolute;
   z-index: 1;
   padding: 0 16px;
   flex-shrink: 0;
@@ -35,5 +28,17 @@ export default {
     text-transform: uppercase;
     color: #ffffff;
   }
+
+  p {
+    // margin-bottom: 30px;
+  }
+
+  a {
+    display: inline-block;
+    font-weight: 400;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: #ffffff;
+  }
 }
 </style>

components/Map/index.vue

@@ -31,7 +31,7 @@ export default {
         zoom: 1.6
       })
 
-      map.addControl(new mapboxgl.NavigationControl())
+      // map.addControl(new mapboxgl.NavigationControl())
 
       const addLayers = map => {
         map.addSource('covid', {
@@ -55,11 +55,11 @@ export default {
             'circle-color': [
               'step',
               ['get', 'point_count'],
-              '#ffa332',
+              '#ffdb99',
               2,
-              '#ff9719',
+              '#ffc04c',
               4,
-              '#ff8c00'
+              '#ffa500'
             ],
             'circle-radius': [
               'step',
@@ -91,10 +91,10 @@ export default {
           source: 'covid',
           filter: ['!', ['has', 'point_count']],
           paint: {
-            'circle-color': '#ffa332',
+            'circle-color': '#ffa500',
             'circle-radius': 7,
             'circle-stroke-width': 1,
-            'circle-stroke-color': '#ffa332'
+            'circle-stroke-color': '#ffa500'
           }
         })
       }
@@ -168,16 +168,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-body {
-  margin: 0;
-  padding: 0;
-}
-
 #map {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
+  height: 100%;
 }
 
 /deep/ .popup {
@@ -189,7 +185,7 @@ body {
     }
     &.item_confirmed {
       span:last-child {
-        color: #ffa332;
+        color: #ffa500;
       }
     }
     &.item_recovered {

components/Search/index.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="search">
+  <div
+    class="search"
+    :class="{
+      'is-open': isOpen
+    }">
+    <div class="form">
+      <!-- <select>
+        <option value="">Test</option>
+      </select> -->
+    </div>
     <div
       class="icon"
       @click="onClick">
@@ -12,41 +21,64 @@
 export default {
   name: 'Search',
   data() {
-    return {}
+    return {
+      isOpen: false
+    }
   },
   methods: {
     onClick() {
+      this.isOpen = !this.isOpen
       console.log('clicked')
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.search {
+  position: absolute; 
+  z-index: 1;
+  bottom: 0;
+  width: 100%;
+  height: 0;
+  transition: .5s ease;
+
+  &.is-open {
+    // width: 80vw;
+
+    .icon {
+      // transform: translate3d(calc(-80vw + 32px), -50%, 0);
+    }
+  }
+}
+
+.form {
+  // position: absolute;
+  // z-index: 1;
+	// width: 100%;
+  // height: 100vh;
+  // background-color: #1e1e1e;
+	// box-shadow: 0px 0px 24px rgba(153, 0, 0, 1);
+  // overflow: hidden;
+  // background-color: rgba(39, 39, 39, 1);
+  // box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
+}
+
 .icon {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  z-index: 1;
+  transform: translate3d(0, -16px, 0);
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 100%;
-  margin: 16px auto;
   width: 64px;
   height: 64px;
   cursor: pointer;
-  background-color: rgba(39, 39, 39, 1);
+  background-color: rgba(153, 0, 0, 1);
   box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
-  animation: float-up 1s infinite alternate;
-
-  &:hover {
-    animation-play-state: paused;
-  }
-}
-
-@keyframes float-up {
-  0% {
-    transform: translate3d(0, 0px, 0);
-  }
-  100% {
-    transform: translate3d(0, 5px, 0);
-  }
+  transition: .5s ease;
 }
 </style>

layouts/default.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="wrapper">
-    <Header />
+    <!-- <Header /> -->
     <div class="main-content">
       <nuxt />
     </div>
-    <Footer />
+    <!-- <Footer /> -->
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import Header from '~/components/Header'
-import Footer from '~/components/Footer'
+// import Header from '~/components/Header'
+// import Footer from '~/components/Footer'
 
 export default {
-  components: {
-    Header,
-    Footer
-  },
+  // components: {
+  //   Header,
+  //   Footer
+  // },
   head () {
     return {
       title: 'COVID-19 Tracker',

package-lock.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.9.5",
     "@nuxtjs/pwa": "^3.0.0-beta.20",
+    "animated-number-vue": "^1.0.0",
     "babel-runtime": "^6.26.0",
     "cross-env": "^5.2.0",
     "mapbox-gl": "^1.8.1",