adding latest

src/router/index.js

@@ -8,7 +8,7 @@ const routes = [
   {
     path: "/",
     name: "Home",
-    component: Home
+    component: Home,
   },
   {
     path: "/about",
@@ -17,44 +17,50 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
+      import(/* webpackChunkName: "about" */ "../views/About.vue"),
   },
   {
     path: "/login",
     name: "Login",
     component: () =>
-      import(/* webpackChunkName: "login" */ "../components/LoginFull.vue")
+      import(/* webpackChunkName: "login" */ "../components/LoginFull.vue"),
   },
   {
     path: "/hello",
     name: "Hello",
     component: () =>
-      import(/* webpackChunkName: "hello" */ "../components/HelloWorld.vue")
+      import(/* webpackChunkName: "hello" */ "../components/HelloWorld.vue"),
   },
   {
     path: "/triangle",
     name: "Triangle",
     component: () =>
-      import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue")
+      import(/* webpackChunkName: "triangle" */ "../views/Triangle.vue"),
   },
   {
     path: "/backgrounds",
     name: "Backgrounds",
     component: () =>
-      import(/* webpackChunkName: "backgrounds" */ "../views/Backgrounds.vue")
+      import(/* webpackChunkName: "backgrounds" */ "../views/Backgrounds.vue"),
   },
   {
     path: "/playground",
     name: "Playground",
     component: () =>
-      import(/* webpackChunkName: "playground" */ "../views/Playground.vue")
+      import(/* webpackChunkName: "playground" */ "../views/Playground.vue"),
   },
   {
     path: "/spacewheel",
     name: "SpaceWheel",
     component: () =>
-      import(/* webpackChunkName: "spaceweel" */ "../views/SpaceWheel.vue")
-  }
+      import(/* webpackChunkName: "spaceweel" */ "../views/SpaceWheel.vue"),
+  },
+  {
+    path: "/picaro",
+    name: "Picaro",
+    component: () =>
+      import(/* webpackChunkName: "spaceweel" */ "../views/Picaro.vue"),
+  },
 ];
 
 const router = new VueRouter({

src/views/Picaro.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-container fluid class="ma-0 pa-0 full-screen d-flex">
+    <img
+      src="../assets/images/BG_04.jpg"
+      class="d-flex align-end ma-0 pa-0 background-image"
+    />
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+@import "~vuetify/src/styles/styles.sass";
+
+.full-screen {
+  height: calc(100vh - 64px);
+}
+
+.background-image {
+  position: absolute;
+  height: calc(100vh);
+  // width: calc(100wh);
+  @media #{map-get($display-breakpoints, 'md-and-up')} {
+    top: -64px;
+    object-fit: cover;
+  }
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    top: -56px;
+  }
+}
+</style>

src/views/SpaceWheel.vue

@@ -18,7 +18,7 @@
       </v-col>
     </v-row>
     <v-row class="mt-10">
-      <v-col class="d-flex align-center justify-center">
+      <v-col class="d-flex align-center justify-center align-content-center">
         <h1 class="white--text display-2">
           <font-awesome-icon :icon="['fas', 'space-shuttle']" />
           Space Wheel

src/views/stripe-appbar/Random.vue

@@ -14,7 +14,10 @@
           <router-link :to="{ name: 'SpaceWheel' }" class="routerLink">
             Spacewheel
           </router-link>
-          <li>Item two</li>
+          <br>
+          <router-link :to="{ name: 'Picaro' }" class="routerLink">
+            Picaro
+          </router-link>
         </v-card>
       </v-col>
     </v-row>

temp.md

@@ -796,7 +796,24 @@ We can set two different appbars which can change on the viewport.
 
 You should use `<v-row>`, `<v-col>` and `<v-spacer>` inside the `<v-app-bar>`. You can use the helper classes `hidden-sm-and-down` etc to display a row for different viewports.
 
-<!-- TODO insert link to appbar of base-template -->
+Example of a dynamic appbar:
+<https://git.panaetius.co.uk/web-development/base-examples/src/branch/develop/src/components/Appbar.vue>
+
+### Subcomponents
+
+You can use `<v-toolbar-title>` for a title in the appbar:
+
+```html
+<v-toolbar-title class="title">
+  <p class="mb-0">Savvy Firebase Tutorial</p>
+</v-toolbar-title>
+```
+
+You can use `<v-app-bar-nav-icon>` for a hamburger button (for mobile layouts):
+
+```html
+<v-app-bar-nav-icon class="d-flex"></v-app-bar-nav-icon>
+```
 
 ## To Do
 
@@ -817,3 +834,7 @@ Do buttons: <https://www.gatsbyjs.org>
 
 Doc setting an image as background without transparent appbar
 Should show how to dynamically change height and left/right based on viewport (shorter appbar on small)
+
+Tomorrow:
+
+- Finish appbar (modal to popout)