fix: setup editors add + page view responsive

client/components/common/nav-header.vue

@@ -32,13 +32,13 @@
         v-list-tile(avatar, @click='')
           v-list-tile-avatar: v-icon(color='blue-grey') burst_mode
           v-list-tile-content Images & Files
-    v-toolbar-title
+    v-toolbar-title.ml-2
       span.subheading {{title}}
     v-spacer
     transition(name='navHeaderSearch')
       v-text-field(
         ref='searchField',
-        v-if='searchIsShown',
+        v-if='searchIsShown && $vuetify.breakpoint.mdAndUp',
         v-model='search',
         clearable,
         color='white',
@@ -61,6 +61,8 @@
     .navHeaderLoading.mr-3
       v-progress-circular(indeterminate, color='blue', :size='22', :width='2' v-show='isLoading')
     slot(name='actions')
+    v-btn(v-if='searchIsShown && $vuetify.breakpoint.smAndDown', icon)
+      v-icon(color='grey') search
     v-tooltip(bottom)
       v-btn(icon, href='/a', slot='activator')
         v-icon(color='grey') settings

client/scss/base/material.scss

@@ -309,6 +309,16 @@ $material-colors: (
 	'800': #37474f,
 	'900': #263238,
 	'1000': #11171a
+  ),
+
+  'theme': (
+    'primary': #1976D2,
+    'secondary': #424242,
+    'accent': #82B1FF,
+    'error': #FF5252,
+    'info': #2196F3,
+    'success': #4CAF50,
+    'warning': #FFC107
   )
 );
 

client/themes/default/components/app.vue

 <template lang="pug">
   v-app
     nav-header
-    v-navigation-drawer.primary(dark, app, clipped, permanent)
+    v-navigation-drawer.primary(
+      dark
+      app
+      clipped
+      :mini-variant='$vuetify.breakpoint.md || $vuetify.breakpoint.sm'
+      mini-variant-width='80'
+      mobile-break-point='600'
+      :temporary='$vuetify.breakpoint.xs'
+      v-model='navShown'
+      )
       v-list(dense)
-        v-list-tile.pt-2
+        v-list-tile.pt-2(href='/')
           v-list-tile-avatar: v-icon home
           v-list-tile-title Home
         v-divider.my-2
@@ -20,7 +29,10 @@
 
     v-content
       v-toolbar(color='grey lighten-3', flat, dense)
-        v-breadcrumbs.pl-0(divider='/')
+        v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
+          v-icon(color='grey darken-2', left) menu
+          span Navigation
+        v-breadcrumbs.pl-0(v-else, divider='/')
           v-breadcrumbs-item Universe
           v-breadcrumbs-item Galaxy
           v-breadcrumbs-item Solar System
@@ -28,21 +40,24 @@
 
       v-divider
       v-layout(row)
-        v-flex(xs10)
+        v-flex(xs12, lg9, xl10)
           v-toolbar(color='grey lighten-4', flat, :height='90')
             div
               .headline.grey--text.text--darken-3 {{title}}
               .caption.grey--text.text--darken-1 {{description}}
           .contents
             slot(name='contents')
-        v-flex(xs2, fill-height)
+        v-flex(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
           v-toolbar(color='grey lighten-4', flat, :height='90')
             div
               .caption.grey--text.text--lighten-1 Last edited by
               .body-2.grey--text.text--darken-3 John Doe
               .caption.grey--text.text--darken-1 Monday at 12:34 PM
             v-spacer
-            v-icon edit
+            v-tooltip(bottom)
+              v-btn(icon, slot='activator')
+                v-icon(color='grey') edit
+              span Edit Page
           v-list.grey.lighten-3(dense)
             v-subheader.pl-4 Table of contents
             v-list-tile
@@ -79,6 +94,22 @@ export default {
       type: String,
       default: ''
     }
+  },
+  data() {
+    return {
+      navOpen: false
+    }
+  },
+  computed: {
+    navShown: {
+      get() { return this.navOpen || this.$vuetify.breakpoint.smAndUp },
+      set(val) { this.navOpen = val }
+    }
+  },
+  methods: {
+    toggleNavigation () {
+      this.navOpen = !this.navOpen
+    }
   }
 }
 </script>

client/themes/default/scss/app.scss

 /* THEME SPECIFIC STYLES */
 
 .contents {
+  color: mc('grey', '800');
+
   h1 {
     padding-left: 16px;
     color: mc('blue', '800');
@@ -14,7 +16,7 @@
       left: 0;
       width: 100%;
       height: 2px;
-      background: linear-gradient(to right, mc('blue', '500'), rgba(mc('blue', '500'), 0));
+      background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
     }
 
     & + h2 {
@@ -41,5 +43,6 @@
   p {
     padding: 16px 16px 0 16px;
     margin: 0;
+    text-align: justify;
   }
 }

server/db/migrations/2.0.0.js

@@ -44,9 +44,8 @@ exports.up = knex => {
     .createTable('editors', table => {
       table.increments('id').primary()
       table.string('key').notNullable().unique()
-      table.string('title').notNullable()
       table.boolean('isEnabled').notNullable().defaultTo(false)
-      table.jsonb('config')
+      table.jsonb('config').notNullable()
     })
     // GROUPS ------------------------------
     .createTable('groups', table => {

server/models/editors.js

@@ -36,10 +36,10 @@ module.exports = class Editor extends Model {
       const dbEditors = await WIKI.models.editors.query()
 
       // -> Fetch definitions from disk
-      const editorDirs = await fs.readdir(path.join(WIKI.SERVERPATH, 'modules/editors'))
+      const editorDirs = await fs.readdir(path.join(WIKI.SERVERPATH, 'modules/editor'))
       let diskEditors = []
       for (let dir of editorDirs) {
-        const def = await fs.readFile(path.join(WIKI.SERVERPATH, 'modules/editors', dir, 'definition.yml'), 'utf8')
+        const def = await fs.readFile(path.join(WIKI.SERVERPATH, 'modules/editor', dir, 'definition.yml'), 'utf8')
         diskEditors.push(yaml.safeLoad(def))
       }
       WIKI.data.editors = diskEditors.map(editor => ({
@@ -72,7 +72,7 @@ module.exports = class Editor extends Model {
         }
       }
       if (newEditors.length > 0) {
-        await WIKI.models.storage.query().insert(newEditors)
+        await WIKI.models.editors.query().insert(newEditors)
         WIKI.logger.info(`Loaded ${newEditors.length} new editors: [ OK ]`)
       } else {
         WIKI.logger.info(`No new editors found: [ SKIPPED ]`)