running-tools

commit c2cfb4d1ad815f3a197c56503f79ae8443cf686a
parent 68434df4fa43313ed84f591e7b508c5afa3f7f54
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Fri, 13 Aug 2021 15:39:52 -0700

Improve navigation

Diffstat:
M
src/App.vue
 | 
25
+++++++++++++++++++++----
A
src/assets/chevron-left.svg
 | 
0

M
src/assets/global.css
 | 
11
+++++++++++
M
src/router/index.js
 | 
21
+++++++++++++++++++++
M
src/views/Home.vue
 | 
15
+++++++++++++++

5 files changed, 68 insertions(+), 4 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -1,10 +1,19 @@
 <template>
   <div id="app">
     <header>
-      <h1>
+      <router-link :to="{ name: $route.meta.back }" v-if="$route.meta.back"
+        class="icon" title="Back">
+        <img alt="" src="@/assets/chevron-left.svg"/>
+      </router-link>
+
+      <h1 v-if="$route.meta.title">
+        {{ $route.meta.title }}
+      </h1>
+      <h1 v-else>
         running-calculator
       </h1>
     </header>
+
     <div id="route-content">
       <router-view/>
     </div>
@@ -15,12 +24,20 @@
 header {
   background-color: hsl(30, 100%, 50%);
   padding: 0.5em;
-  text-align: center;
+  display: grid;
+  grid-template-columns: 2em 1fr auto 1fr 2em;
+  grid-template-rows: auto;
+}
+header a {
+  grid-column: 1;
+  margin: auto;
+  height: 2em;
+  width: 2em;
 }
-.title {
+h1 {
+  grid-column: 3;
   font-size: 2em;
   font-weight: bold;
-  text-align: center;
   text-decoration: none;
   color: #000000;
 }
diff --git a/src/assets/chevron-left.svg b/src/assets/chevron-left.svg
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -11,6 +11,17 @@ input, select {
   padding: 0.2em;
 }
 
+/* styles for icons */
+.icon {
+  border: none;
+  background-color: #00000000;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.icon img {
+  width: 100%;
+  height: 100%;
+}
 
 /* default styles for mobile devices */
 @media only screen and (max-width: 800px) {
diff --git a/src/router/index.js b/src/router/index.js
@@ -15,6 +15,10 @@ const routes = [
     path: '/home',
     name: 'home',
     component: Home,
+    meta: {
+      title: null,
+      back: null,
+    },
   },
   {
     path: '/calculate',
@@ -24,11 +28,19 @@ const routes = [
     path: '/calculate/paces',
     name: 'calculate-paces',
     component: PaceCalculator,
+    meta: {
+      title: 'Pace Calculator',
+      back: 'home',
+    },
   },
   {
     path: '/calculate/units',
     name: 'calculate-units',
     component: UnitCalculator,
+    meta: {
+      title: 'Unit Calculator',
+      back: 'home',
+    },
   },
 ];
 
@@ -36,4 +48,13 @@ const router = new VueRouter({
   routes
 });
 
+router.afterEach((to, from) => {
+  if (to.meta.title) {
+    document.title = `${to.meta.title} - running-calculator`;
+  }
+  else {
+    document.title = 'running-calculator';
+  }
+});
+
 export default router;
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="home">
+    <router-link :to="{ name: 'calculate-paces' }">
+      Pace Calculator
+    </router-link>
+    <router-link :to="{ name: 'calculate-units' }">
+      Unit Calculator
+    </router-link>
   </div>
 </template>
 
@@ -9,3 +15,12 @@ export default {
   components: { },
 }
 </script>
+
+<style scoped>
+.home {
+  text-align: center;
+}
+a {
+  margin: 0px 10px;
+}
+</style>