Add Quick Panels skeleton view.

web/src/app.scss

@@ -10,8 +10,8 @@ body {
 h1, h2, h3 { font-family: 'Exo 2'; }
 
 h1 { font-size: 2rem; }
-h2 { font-size: 1.6rem; }
-h3 { font-size: 1.3rem; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.2rem; }
 
 #app {
   border: 0;

web/src/router.ts

@@ -3,6 +3,7 @@ import Router from 'vue-router';
 import Dashboard from './views/Dashboard.vue';
 import Measures from './views/Measures.vue';
 import UserAccount from './views/UserAccount.vue';
+import QuickPanels from './views/QuickPanels.vue';
 
 Vue.use(Router);
 
@@ -28,6 +29,11 @@ export default new Router({
       path: '/user-account',
       name: 'user-account',
       component: UserAccount
+    },
+    {
+      path: '/quick-panels',
+      name: 'quick-panels',
+      component: QuickPanels
     }
   ]
 });

web/src/views/NavBar.vue

@@ -12,6 +12,10 @@
       <fa-icon icon=pencil-ruler></fa-icon>
       <span class=expanded>Measures</span>
     </router-link>
+    <router-link to="/quick-panels">
+      <fa-icon icon=th-large></fa-icon>
+      <span class=expanded>Quick Panels</span>
+    </router-link>
     <router-link to="/user-account">
       <fa-icon icon=user></fa-icon>
       <span class=expanded>Your Account</span>

web/src/views/QuickPanels.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class=quick-panels>
+    <h1>Quick Panels</h1>
+  </div>
+</template>
+<script lang="ts" src="./quick-panels.ts"></script>
+<style scoped lang="scss" src="./quick-panels.scss"></style>

web/src/views/UserAccount.vue

@@ -1,6 +1,16 @@
 <template>
   <div class=user-account>
     <h1>Your Account</h1>
+    <section class=user-info>
+      <h2>About You</h2>
+    </section>
+    <section class=api-tokens>
+      <h2>API Tokens</h2>
+    </section>
+    <section class=device-data>
+      <h2>Data on this Device</h2>
+    </section>
   </div>
 </template>
 <script lang="ts" src="./user-account.ts"></script>
+<style scoped lang="scss" src="./user-account.scss"></style>

web/src/views/nav-bar.ts

@@ -1,10 +1,10 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faAngleDoubleLeft, faAngleDoubleRight,
-         faPencilRuler, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
+         faHome, faPencilRuler, faThLarge, faUser } from '@fortawesome/free-solid-svg-icons';
 // import UiIconButton from 'keen-ui/src/UiIconButton.vue';
 
-library.add(faAngleDoubleLeft, faAngleDoubleRight, faPencilRuler, faHome, faUser);
+library.add(faAngleDoubleLeft, faAngleDoubleRight, faHome, faPencilRuler, faThLarge, faUser);
 
 @Component({
   components: {

web/src/views/quick-panels.ts

@@ -0,0 +1,4 @@
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class QuickPanels extends Vue {}

web/src/views/user-account.scss

@@ -0,0 +1,5 @@
+.user-account {
+  section {
+    margin-top: 1rem;
+  }
+}