styling

VueApp/src/App.vue

@@ -61,9 +61,15 @@ export default {
 <style>
 @import '../node_modules/bootstrap/dist/css/bootstrap.css';
   .navbar {
-    background-color: #D0CFCF
+    background-color: #D0CFCF;
+    position: sticky;
   }
   .btn-margin {
     margin-top: 8px
   }
+  body {
+    background-image: url('../static/Mountains.png');
+    background-blend-mode: hard-light;
+    background-position: top;
+  }
 </style>

VueApp/src/components/ElevationGraph.vue

@@ -24,19 +24,11 @@
         elevationService: null,
         chartData: null,
         chartOptions: {
-          hAxis: {
-            title: 'Elevations'
-          },
-          vAxis: {
-            title: 'Feet'
-          },
-          legend: 'none',
-          bar: {
-            groupWidth: '100%'
-          },
-          chartArea: {
-            top: 20
-          }
+          backgroundColor: { fill: 'transparent' },
+          vAxis: { textStyle: { color: '#FFF' } },
+          bar: { groupWidth: '100%' },
+          chartArea: { top: 20 },
+          legend: 'none'
         }
       }
     },
@@ -59,10 +51,10 @@
           if (status === 'OK') {
             elevations.forEach((e, i) =>
               Math.abs(e.elevation - elevations[i + 1].elevation) > 1
-                ? this.chartData.push(['', e.elevation, '#CC001E'])
+                ? this.chartData.push(['', e.elevation, '#CAE9FF'])
                 : Math.abs(e.elevation - elevations[i + 1].elevation) > 0.5
-                  ? this.chartData.push(['', e.elevation, '#A00018'])
-                  : this.chartData.push(['', e.elevation, '#700010'])
+                  ? this.chartData.push(['', e.elevation, '#2E9FE1'])
+                  : this.chartData.push(['', e.elevation, '#004E64'])
             )
           }
         })

VueApp/src/components/GoogleMap.vue

@@ -16,7 +16,7 @@
       :center="center"
       :zoom="16"
       mapTypeId="terrain"
-      style="width: 100%;  height: 500px;"
+      style="width: 100%;  height: 600px;"
     ></gmap-map>
   </div>
 </template>
@@ -93,7 +93,6 @@
         this.listenForDirections()
       },
       listenForDirections () {
-        console.log('direction listener')
         this.directionsDisplay.addListener('directions_changed', () => {
           this.emitRoute()
         })

VueApp/src/components/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="text-center">
     <h1 class="welcome">Welcome!</h1>
     <h4 v-if="!authenticated">
         Please log in to continue.
@@ -19,9 +19,9 @@
   }
 </script>
 
-<style>
+<style scoped>
   a {
-    cursor: pointer;
+    cursor: pointer
   }
 </style>
 

VueApp/src/components/Main.vue

@@ -38,8 +38,8 @@
 <style scoped>
   body {
     display: grid;
-    grid-template-rows: 3fr 1fr;
-    grid-template-columns: 1fr 2fr 2fr 1fr;
+    grid-template-rows: 4fr 1fr;
+    grid-template-columns: 1fr minmax(100px, 3fr) minmax(100px, 3fr) 1fr;
     grid-template-areas:
       "map     map    map     map "
       "....   info    info    ....";