skeleton for the dashboard3

src/prog/dashboard3/quasar.conf.js

@@ -43,11 +43,16 @@ module.exports = function (ctx) {
       components: [
         'QLayout',
         'QLayoutHeader',
+        'QLayoutFooter',
         'QLayoutDrawer',
         'QPageContainer',
         'QPage',
         'QToolbar',
         'QToolbarTitle',
+        'QTabs',
+        'QTab',
+        'QTabPane',
+        'QRouteTab',
         'QBtn',
         'QIcon',
         'QList',

src/prog/dashboard3/src/assets/css/domo.css

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'domo';
+  src: url('../font/domo.woff2') format('woff2'),
+       url('../font/domo.woff') format('woff'),
+       url('../font/domo.ttf') format('truetype');
+
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'domo';
+    src: url('../font/domo.svg?150644#domo') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "domo";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.icon-alarm:before { content: '\e800'; } /* '' */
+.icon-home:before { content: '\e801'; } /* '' */
+.icon-lightbulb-on-outline:before { content: '\e802'; } /* '' */
+.icon-settings:before { content: '\e803'; } /* '' */
+.icon-shutters:before { content: '\e804'; } /* '' */
+.icon-sprinklers:before { content: '\e805'; } /* '' */
+.icon-lightbulb:before { content: '\f0eb'; } /* '' */

src/prog/dashboard3/src/components/domo-tabs.vue

@@ -0,0 +1,25 @@
+<template>
+  <q-tabs
+    :inverted="$q.theme === 'ios'"
+    :style="$q.theme === 'ios' ? { background: 'rgba(255,255,255,0.95' } : null"
+  >
+    <q-route-tab default icon="home" to="/" exact slot="title"/>
+    <q-route-tab icon="ion-outlet" to="/outlets" exact slot="title"/>
+    <q-route-tab icon="icon-shutters" to="/shutters" exact slot="title"/>
+    <q-route-tab icon="icon-sprinklers" to="/sprinklers" exact slot="title"/>
+    <q-route-tab icon="alarm" to="/sequences" exact slot="title" />
+    <q-route-tab icon="settings" to="/settings" exact slot="title" />
+  </q-tabs>
+</template>
+
+<script>
+export default {
+  // name: 'ComponentName',
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style>
+</style>

src/prog/dashboard3/src/layouts/default.vue

@@ -1,82 +1,48 @@
 <template>
   <q-layout view="lHh Lpr lFf">
     <q-layout-header>
-      <q-toolbar
-        color="primary"
-        :glossy="$q.theme === 'mat'"
-        :inverted="$q.theme === 'ios'"
-      >
-        <q-btn
-          flat
-          dense
-          round
-          @click="leftDrawerOpen = !leftDrawerOpen"
-          aria-label="Menu"
-        >
-          <q-icon name="menu" />
-        </q-btn>
-
-        <q-toolbar-title>
-          Quasar App
-          <div slot="subtitle">Running on Quasar v{{ $q.version }}</div>
-        </q-toolbar-title>
+      <q-toolbar :inverted="$q.theme === 'ios'">
+        <q-toolbar-title> Domo </q-toolbar-title>
       </q-toolbar>
     </q-layout-header>
-
-    <q-layout-drawer
-      v-model="leftDrawerOpen"
-      :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null"
-    >
-      <q-list
-        no-border
-        link
-        inset-delimiter
-      >
-        <q-list-header>Essential Links</q-list-header>
-        <q-item @click.native="openURL('http://quasar-framework.org')">
-          <q-item-side icon="school" />
-          <q-item-main label="Docs" sublabel="quasar-framework.org" />
-        </q-item>
-        <q-item @click.native="openURL('https://github.com/quasarframework/')">
-          <q-item-side icon="code" />
-          <q-item-main label="GitHub" sublabel="github.com/quasarframework" />
-        </q-item>
-        <q-item @click.native="openURL('https://discord.gg/5TDhbDg')">
-          <q-item-side icon="chat" />
-          <q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg" />
-        </q-item>
-        <q-item @click.native="openURL('http://forum.quasar-framework.org')">
-          <q-item-side icon="record_voice_over" />
-          <q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
-        </q-item>
-        <q-item @click.native="openURL('https://twitter.com/quasarframework')">
-          <q-item-side icon="rss feed" />
-          <q-item-main label="Twitter" sublabel="@quasarframework" />
-        </q-item>
-      </q-list>
-    </q-layout-drawer>
-
+    <q-layout-footer reveal v-if="$q.theme === 'ios'">
+      <domo-tabs />
+    </q-layout-footer>
     <q-page-container>
+      <transition
+        enter-active-class="animated fadeIn"
+        leave-active-class="animated fadeOut"
+        mode="out-in"
+        :duration="300"
+        @leave="resetScroll"
+      >
         <router-view />
+      </transition>
     </q-page-container>
   </q-layout>
 </template>
 
 <script>
-import { openURL } from 'quasar'
-
+import DomoTabs from 'components/domo-tabs'
 export default {
   name: 'LayoutDefault',
+  components: {
+    DomoTabs
+  },
   data () {
     return {
-      leftDrawerOpen: this.$q.platform.is.desktop
     }
   },
   methods: {
-    openURL
+    resetScroll (el, done) {
+      document.documentElement.scrollTop = 0
+      document.body.scrollTop = 0
+      done()
+    }
   }
 }
 </script>
 
 <style>
+@import '~assets/css/domo.css';
 </style>

src/prog/dashboard3/src/pages/home.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+    <h1>Home</h1>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageHome'
+}
+</script>
+
+<style>
+</style>

src/prog/dashboard3/src/pages/index.vue

@@ -1,14 +0,0 @@
-<template>
-  <q-page class="flex flex-center">
-    <img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
-  </q-page>
-</template>
-
-<style>
-</style>
-
-<script>
-export default {
-  name: 'PageIndex'
-}
-</script>

src/prog/dashboard3/src/pages/outlets.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+    <h1>outlets</h1>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageOutlets'
+}
+</script>
+
+<style>
+</style>

src/prog/dashboard3/src/pages/sequences.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+    <h1>Sequences</h1>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageSequences'
+}
+</script>
+
+<style>
+</style>

src/prog/dashboard3/src/pages/settings.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+    <h1>Settings</h1>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageSettings'
+}
+</script>
+
+<style>
+</style>

src/prog/dashboard3/src/pages/shutters.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+    <h1>Shutters</h1>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageShutters'
+}
+</script>
+
+<style>
+</style>

src/prog/dashboard3/src/pages/sprinklers.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+    <h1>Sprinklers</h1>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageSprinklers'
+}
+</script>
+
+<style>
+</style>

src/prog/dashboard3/src/router/routes.js

@@ -4,7 +4,12 @@ export default [
     path: '/',
     component: () => import('layouts/default'),
     children: [
-      { path: '', component: () => import('pages/index') }
+      { path: '', component: () => import('pages/home') },
+      { path: '/outlets', component: () => import('pages/outlets') },
+      { path: '/shutters', component: () => import('pages/shutters') },
+      { path: '/sprinklers', component: () => import('pages/sprinklers') },
+      { path: '/sequences', component: () => import('pages/sequences') },
+      { path: '/settings', component: () => import('pages/settings') }
     ]
   },