fix: setup editors add + page view responsive

client/themes/default/components/app.vue

@@ -1,9 +1,18 @@
 <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

@@ -1,6 +1,8 @@
 /* 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;
   }
 }