WIP: Update header for park view.

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="header layer">
+  <header v-if="show" class="header layer">
     <router-link :to="{
       path: hasBack
     }">
@@ -9,6 +9,15 @@
     </router-link>
     <h1 v-if="title">{{ title }}</h1>
   </header>
+  <header v-else-if="!show" class="header header--hidden">
+    <router-link :to="{
+        path: hasBack
+      }">
+      <span title="Back" class="back-btn" v-if="hasBack">
+        <Chevron class="rotate"/>
+      </span>
+    </router-link>
+  </header>
 </template>
 
 <script>
@@ -21,6 +30,10 @@ export default {
       type: String,
       default: ""
     },
+    show: {
+      type: Boolean,
+      default: true
+    },
     hasBack: {
       type: String,
       default: ""
@@ -45,29 +58,50 @@ export default {
   top: 0;
   width: 100%;
   z-index: 99;
+  transition: background .2s ease;
+
+  &--hidden {
+    background: transparent;
+    .back-btn {
+      background: white;
+      box-shadow: 0px 2px 5px 0px rgba(0,0,0,.25);
+      svg #Park-view-with-info {
+        fill: rgb(27, 201, 152) !important;
+      }
+    }
+  }
 
   > h1 {
     color: white;
   }
 }
 
 .back-btn {
-  width: 32px;
-  height: 32px;
   position: absolute;
-  top: 10%;
-  left: 1%;
   font-size: 3em;
   color: white;
-
+  top: 0;
+  line-height: 1.5em;
+  height: 2.5rem;
+  width: 2.5rem;
+  left: .25rem;
+  top: .25rem;
+  background: transparent;
+  border-radius: 100%;
+  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0);
+  transition: all .2s ease;
   svg {
     transform: rotate(180deg);
     width: auto;
     height: 18px;
+    position: relative;
+    left: -2px;
+    top: -2px;
 
     // Specific selection to target SVG element
     #Park-view-with-info {
       fill: white !important;
+      transition: fill .2s ease;
     }
   }
 }

src/components/ParkPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Header v-bind:title="parkName" v-bind:hasBack="backLink"/>
+    <Header v-bind:show="drawerState" v-bind:title="parkName" v-bind:hasBack="backLink"/>
     <div class="content">
       <Tmap v-if="park" :park="park" :drawerState="drawerState" @close-drawer="mapActive"/>
       <ParkDrawer @toggle-drawer="toggleDrawer" :park="park" ref="parkDrawer"/>
@@ -47,7 +47,7 @@ export default {
 
     toggleDrawer: function(event) {
       // event === true is drawer visible
-      this.drawerState = event;
+      this.drawerState = Boolean(event);
       if (event) {
         this.$log.info("ParkPage: Drawer opened");
       } else {

src/components/Tmap.vue

@@ -236,7 +236,7 @@ export default {
 
 #mapid {
   height: 100vh;
-  height: calc(var(--vh, 1vh) * 90);
+  height: calc(var(--vh, 1vh) * 100);
   width: 100%;
   z-index: 1;
 }

src/router/index.js

@@ -19,9 +19,7 @@ export default new Router({
             name: 'Parks',
             component: List,
             beforeEnter: (to, from, next) => {
-              console.log('called');
                 apiRequestPromise.then(() => {
-                  console.log('complete')
                   next();
                 })
             }

src/services/Park.service.js

@@ -14,9 +14,7 @@ export const parkService = {
  * empty if nothing found
  */
 function parks(page = 1) {
-    console.log(Vue.config);
     const url = `http://127.0.0.1:5000/api/v1/parks?page=${page}`;
-    console.log(url);
     return http.get(url)
         .then((resp) => {
             return resp.data;

src/services/bootstrap-park-data.js

@@ -9,10 +9,8 @@ export const apiRequestPromise = new Promise((resolve) => {
 });
 
 export default async function bootstrapDataPlugin(store) {
-	console.log(parkService);
 	await parkService.parks()
 		.then((allParksData) => {
-			console.log(allParksData);
 			store.commit(SET_ALL_PARKS, allParksData);
 			resolveApiRequest && resolveApiRequest();
 		});

src/store/getters.js

@@ -1,9 +1,9 @@
 const getters = {
-  get: (state, getters) => {
-    return getters.cartProducts.reduce((total, product) => {
-      return total + product.price * product.quantity
-    }, 0)
-  }
+  // get: (state, getters) => {
+  //   return getters.cartProducts.reduce((total, product) => {
+  //     return total + product.price * product.quantity
+  //   }, 0)
+  // }
 }
 
 export default getters;

src/store/index.js

@@ -18,7 +18,7 @@ export default new Vuex.Store({
   mutations,
   getters,
   plugins: [
-  	boostrapDataPlugin,
+    boostrapDataPlugin,
   ],
   strict: debug,
 })

src/styles/normalize.scss

@@ -4,8 +4,6 @@ body {
   @supports (font-variation-settings: normal) {
     font-family: 'Inter var', sans-serif;
   }
-  margin-top: 3rem;
-
 }
 
 h1, h2, h3, h4, h5 {
@@ -16,4 +14,11 @@ ul {
   list-style-type: none;
   display: inline;
   padding-inline-start: 0;
-}
+}
+
+// A couple of overwrites to style leaflet as we want it
+.leaflet-control-scale.leaflet-control,
+.leaflet-control-attribution.leaflet-control,
+.leaflet-top.leaflet-left {
+  display: none !important;
+}