- starting add Categories

- improved layout drawer

src/components/Header.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+
         <q-layout-header>
             <q-toolbar
                     color="primary"
@@ -40,10 +41,9 @@
 
         </q-layout-header>
 
-
         <q-layout-drawer side="left"
                          v-model="leftDrawerOpen"
-                         :content-class="['bg-grey-3', 'q-pa-sm']"
+                         :content-class="['bg-grey-1', 'q-pa-sm']"
                          :content-style="{padding: '0px'}"
         >
             <drawer></drawer>
@@ -60,6 +60,7 @@
   import messagePopover from '../layouts/toolbar/messagePopover/messagePopover.vue'
 
   import { GlobalStore } from '@modules'
+  import { rescodes } from '../store/Modules/rescodes'
 
   @Component({
     components: {
@@ -78,12 +79,14 @@
       { label: 'Spanish', icon: 'fa-flag-es', value: 'es' },
       { label: 'Italian', icon: 'fa-facebook', value: 'it' }
     ]
-    get leftDrawerOpen () {
+
+    get leftDrawerOpen() {
       return GlobalStore.state.leftDrawerOpen
     }
-    set leftDrawerOpen (value) {
+
+    set leftDrawerOpen(value) {
       GlobalStore.state.leftDrawerOpen = value
-      localStorage.setItem('leftDrawerOpen', value.toString())
+      localStorage.setItem(rescodes.localStorage.leftDrawerOpen, value.toString())
     }
 
     get lang() {
@@ -111,17 +114,23 @@
 
 </script>
 
-<style>
+<style lang="scss">
     .layout-padding {
         padding: 1em 4em;
     }
 
+    .item-content {
+        font-size: 0.8rem;
+        font-weight: 350;
+    }
+
     @media screen and (max-width: 600px) {
         .layout-padding {
             padding: 1.5em .5em;
         }
     }
 
+    /*
     @-webkit-keyframes moveFromLeftFade {
         from {
             opacity: 0.3;
@@ -137,6 +146,21 @@
         }
     }
 
+    @-webkit-keyframes moveFromTopFade {
+        from {
+            opacity: 0.3;
+            -webkit-transform: translateY(0%);
+        }
+    }
+    @keyframes moveFromTopFade {
+        from {
+            opacity: 0.3;
+            -webkit-transform: translateY(0%);
+            transform: translateY(-50%);
+        }
+    }
+
+
     @-webkit-keyframes moveToRight {
         from {
         }
@@ -175,6 +199,25 @@
         }
     }
 
+    @-webkit-keyframes moveToBottom {
+        from {
+        }
+        to {
+            opacity: .5;
+            -webkit-transform: translateY(-100%);
+        }
+    }
+
+    @keyframes moveToBottom {
+        from {
+        }
+        to {
+            opacity: .5;
+            -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+        }
+    }
+
     @-webkit-keyframes moveFromRight {
         from {
             opacity: .7;
@@ -189,17 +232,18 @@
             transform: translateX(100%);
         }
     }
+    */
 
     .drawer-closer .item-content {
-        margin-left: 50px !important;
+        margin-left: 20px !important;
     }
 
     .drawer-content .list-label {
-        line-height: 45px;
+        line-height: 25px;
     }
 
     .drawer-content .item {
-        height: 45px;
+        height: 25px;
     }
 
     .router-link-active .item-primary {
@@ -280,7 +324,7 @@
     }
 
     .toolbar {
-        min-height: 40px;
+        min-height: 30px;
     }
 
     .right-itens a, .right-itens button {
@@ -299,4 +343,6 @@
     .fa-flag-it:before {
         content: url('../statics/icons/flag_it.svg');
     }
+
 </style>
+

src/components/categories/category/category.scss

@@ -0,0 +1,3 @@
+.mycard {
+  visibility: hidden;
+}

src/components/categories/category/category.ts

@@ -0,0 +1,62 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+import { GlobalStore } from '@store'
+
+import VueIdb from 'vue-idb'
+
+Vue.use(VueIdb)
+
+require('./category.scss')
+
+@Component({})
+export default class Category extends Vue {
+  idb = null
+  category: string = ''
+  $t: any
+
+  created() {
+    this.createdb()
+
+    this.caricaCat()
+  }
+
+  createdb() {
+    // Inserisci la Categoria nel DB
+    this.idb = new VueIdb({
+      version: 1,
+      database: 'test',
+      schemas: [
+        { categories: '++id, sub_categ_id, descr_it' }
+      ]
+    })
+
+  }
+
+
+  caricaCat() {
+    let mythis = this
+    this.idb.open().then(function () {
+
+      return mythis.idb.categories
+        .toArray()
+
+    }).then(function () {
+
+      console.log('FINE LOAD')
+    })
+  }
+
+  insertCategory(): any {
+    let mythis = this
+
+    this.idb.open().then(function () {
+      console.log('Inserisci Cat: ', mythis.category)
+      return mythis.idb.categories.add({ descr_it: mythis.category })
+
+    }).then(function () {
+
+      console.log('FINE')
+    })
+  }
+
+}

src/components/categories/category/category.vue

@@ -0,0 +1,16 @@
+<template>
+    <q-page>
+        <div class="panel">
+            <p class="caption">Category:</p>
+
+            <q-input v-model="category" inverted float-label="Inserisci la Categoria"
+                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+                     v-on:keyup.enter="insertCategory"/>
+
+        </div>
+    </q-page>
+
+
+</template>
+<script lang="ts" src="./category.ts">
+</script>