From 10e19700e59831c07a8a4bf29bddf405a3ae5297 Mon Sep 17 00:00:00 2001
From: Nick <github@ngpixel.com>
Date: Sun, 25 Aug 2019 14:23:56 -0400
Subject: [PATCH] fix: UI improvements

---
 .gitignore                                    |  6 +-
 client/components/admin/admin-system.vue      |  2 +-
 client/components/common/duration-picker.vue  | 13 ++-
 client/components/common/nav-header.vue       | 88 +++++++++----------
 client/components/common/page-delete.vue      |  2 +-
 client/components/common/search-results.vue   |  6 +-
 client/components/editor.vue                  |  1 +
 client/components/editor/editor-markdown.vue  | 20 ++---
 .../components/editor/editor-modal-media.vue  | 28 +++---
 .../editor/editor-modal-properties.vue        |  8 +-
 client/components/history.vue                 | 30 +++----
 client/themes/default/components/page.vue     | 19 ++--
 client/themes/default/scss/app.scss           |  6 +-
 server/views/legacy/master.pug                | 18 +---
 server/views/master.pug                       | 18 +---
 server/views/setup.pug                        | 18 +---
 16 files changed, 125 insertions(+), 158 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6e55106e..3ef2576e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,9 +18,9 @@ npm-debug.log*
 
 # Generated assets
 /assets
-server/views/master.pug
-server/views/legacy.pug
-server/views/setup.pug
+/server/views/master.pug
+/server/views/legacy/master.pug
+/server/views/setup.pug
 
 # Webpack
 .webpack-cache
diff --git a/client/components/admin/admin-system.vue b/client/components/admin/admin-system.vue
index 6b6ccd74..939473f7 100644
--- a/client/components/admin/admin-system.vue
+++ b/client/components/admin/admin-system.vue
@@ -28,7 +28,7 @@
                   v-list-item-action
                     v-list-item-action-text {{ $t('admin:system.published') }} {{ info.latestVersionReleaseDate | moment('from') }}
 
-              v-divider.mt-3
+            v-card.mt-4.animated.fadeInUp.wait-p2s
               v-subheader {{ $t('admin:system.hostInfo') }}
               v-list(two-line, dense)
                 v-list-item
diff --git a/client/components/common/duration-picker.vue b/client/components/common/duration-picker.vue
index 03375eff..c98148e9 100644
--- a/client/components/common/duration-picker.vue
+++ b/client/components/common/duration-picker.vue
@@ -7,42 +7,47 @@
       flat
       reverse
       v-model='minutes'
+      style='flex: 1 1 70px;'
     )
     .body-2.mx-3 {{$t('common:duration.minutes')}}
-    v-divider.mr-3()
+    v-divider.mr-3
     v-text-field(
       solo
       hide-details
       flat
       reverse
       v-model='hours'
+      style='flex: 1 1 70px;'
     )
     .body-2.mx-3 {{$t('common:duration.hours')}}
-    v-divider.mr-3()
+    v-divider.mr-3
     v-text-field(
       solo
       hide-details
       flat
       reverse
       v-model='days'
+      style='flex: 1 1 70px;'
     )
     .body-2.mx-3 {{$t('common:duration.days')}}
-    v-divider.mr-3()
+    v-divider.mr-3
     v-text-field(
       solo
       hide-details
       flat
       reverse
       v-model='months'
+      style='flex: 1 1 70px;'
     )
     .body-2.mx-3 {{$t('common:duration.months')}}
-    v-divider.mr-3()
+    v-divider.mr-3
     v-text-field(
       solo
       hide-details
       flat
       reverse
       v-model='years'
+      style='flex: 1 1 70px;'
     )
     .body-2.mx-3 {{$t('common:duration.years')}}
 </template>
diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue
index 40a0f83f..353ad02f 100644
--- a/client/components/common/nav-header.vue
+++ b/client/components/common/nav-header.vue
@@ -81,50 +81,50 @@
                 @keyup.down='searchMove(`down`)'
                 @keyup.up='searchMove(`up`)'
               )
-            v-menu(
-              v-model='searchAdvMenuShown'
-              left
-              offset-y
-              min-width='450'
-              :close-on-content-click='false'
-              nudge-bottom='7'
-              nudge-right='5'
-              v-if='searchIsShown'
-              )
-              template(v-slot:activator='{ on }')
-                v-btn.nav-header-search-adv(icon, color='grey darken-2', v-on='on')
-                  v-icon(color='white') mdi-chevron-down
-              v-card.radius-0(dark)
-                v-toolbar(flat, color='grey darken-4', dense)
-                  v-icon.mr-2 mdi-feature-search-outline
-                  v-subheader.pl-0 Advanced Search
-                  v-spacer
-                  v-chip(label, small, color='primary') Coming soon
-                v-card-text.pa-4
-                  v-checkbox.mt-0(
-                    label='Restrict to current language'
-                    color='white'
-                    v-model='searchRestrictLocale'
-                    hide-details
-                  )
-                  v-checkbox(
-                    label='Search below current path only'
-                    color='white'
-                    v-model='searchRestrictPath'
-                    hide-details
-                  )
-                v-divider
-                v-card-actions.grey.darken-3-d4
-                  v-container.pa-0(grid-list-md)
-                    v-layout(row)
-                      v-flex(xs6)
-                        v-btn(depressed, color='grey darken-3', block)
-                          v-icon(left) mdi-chevron-right
-                          span Save as defaults
-                      v-flex(xs6)
-                        v-btn(depressed, color='grey darken-3', block)
-                          v-icon(left) mdi-cached
-                          span Reset
+            //- v-menu(
+            //-   v-model='searchAdvMenuShown'
+            //-   left
+            //-   offset-y
+            //-   min-width='450'
+            //-   :close-on-content-click='false'
+            //-   nudge-bottom='7'
+            //-   nudge-right='5'
+            //-   v-if='searchIsShown'
+            //-   )
+            //-   template(v-slot:activator='{ on }')
+            //-     v-btn.nav-header-search-adv(icon, color='grey darken-2', v-on='on')
+            //-       v-icon(color='white') mdi-chevron-down
+            //-   v-card.radius-0(dark)
+            //-     v-toolbar(flat, color='grey darken-4', dense)
+            //-       v-icon.mr-2 mdi-feature-search-outline
+            //-       v-subheader.pl-0 Advanced Search
+            //-       v-spacer
+            //-       v-chip(label, small, color='primary') Coming soon
+            //-     v-card-text.pa-4
+            //-       v-checkbox.mt-0(
+            //-         label='Restrict to current language'
+            //-         color='white'
+            //-         v-model='searchRestrictLocale'
+            //-         hide-details
+            //-       )
+            //-       v-checkbox(
+            //-         label='Search below current path only'
+            //-         color='white'
+            //-         v-model='searchRestrictPath'
+            //-         hide-details
+            //-       )
+            //-     v-divider
+            //-     v-card-actions.grey.darken-3-d4
+            //-       v-container.pa-0(grid-list-md)
+            //-         v-layout(row)
+            //-           v-flex(xs6)
+            //-             v-btn(depressed, color='grey darken-3', block)
+            //-               v-icon(left) mdi-chevron-right
+            //-               span Save as defaults
+            //-           v-flex(xs6)
+            //-             v-btn(depressed, color='grey darken-3', block)
+            //-               v-icon(left) mdi-cached
+            //-               span Reset
       v-flex(xs6, md4)
         v-toolbar.nav-header-inner.pr-4(color='black', dark, flat)
           v-spacer
diff --git a/client/components/common/page-delete.vue b/client/components/common/page-delete.vue
index d614a821..46d5c057 100644
--- a/client/components/common/page-delete.vue
+++ b/client/components/common/page-delete.vue
@@ -1,6 +1,6 @@
 <template lang='pug'>
   v-dialog(v-model='isShown', max-width='550', persistent)
-    v-card.wiki-form
+    v-card
       .dialog-header.is-short.is-red
         v-icon.mr-2(color='white') mdi-file-document-box-remove-outline
         span {{$t('common:page.delete')}}
diff --git a/client/components/common/search-results.vue b/client/components/common/search-results.vue
index 003ba2f8..b222cbee 100644
--- a/client/components/common/search-results.vue
+++ b/client/components/common/search-results.vue
@@ -45,9 +45,9 @@
                 v-list-item-title(v-html='term')
             v-divider(v-if='idx < suggestions.length - 1')
       .text-xs-center.pt-5(v-if='search.length > 1')
-        v-btn.mx-2(outlined, color='orange', @click='search = ``', v-if='results.length > 0')
-          v-icon(left) mdi-content-save
-          span {{$t('common:header.searchCopyLink')}}
+        //- v-btn.mx-2(outlined, color='orange', @click='search = ``', v-if='results.length > 0')
+        //-   v-icon(left) mdi-content-save
+        //-   span {{$t('common:header.searchCopyLink')}}
         v-btn.mx-2(outlined, color='pink', @click='search = ``')
           v-icon(left) mdi-close
           span {{$t('common:header.searchClose')}}
diff --git a/client/components/editor.vue b/client/components/editor.vue
index 8edad1ab..5149590f 100644
--- a/client/components/editor.vue
+++ b/client/components/editor.vue
@@ -214,6 +214,7 @@ export default {
             })
             this.$store.set('editor/id', _.get(resp, 'page.id'))
             this.$store.set('editor/mode', 'update')
+            this.exitConfirmed = true
             window.location.assign(`/${this.$store.get('page/locale')}/${this.$store.get('page/path')}`)
           } else {
             throw new Error(_.get(resp, 'responseResult.message'))
diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index b459305e..4691956a 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -114,49 +114,49 @@
           span {{$t('editor:markup.insertLink')}}
         v-tooltip(right, color='teal')
           template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p1s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalMedia`)').mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p1s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalMedia`)').mx-0
               v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') mdi-folder-multiple-image
           span {{$t('editor:markup.insertAssets')}}
         v-tooltip(right, color='teal')
           template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)', disabled).mx-0
               v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-view-dashboard-outline
           span {{$t('editor:markup.insertBlock')}}
         v-tooltip(right, color='teal')
           template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p3s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p3s(icon, tile, v-on='on', dark, disabled).mx-0
               v-icon mdi-code-braces
           span {{$t('editor:markup.insertCodeBlock')}}
         v-tooltip(right, color='teal')
           template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p4s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p4s(icon, tile, v-on='on', dark, disabled).mx-0
               v-icon mdi-library-video
           span {{$t('editor:markup.insertVideoAudio')}}
         v-tooltip(right, color='teal')
           template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p5s(icon, tile, v-on='on', dark, disabled).mx-0
               v-icon mdi-chart-multiline
           span {{$t('editor:markup.insertDiagram')}}
         v-tooltip(right, color='teal')
           template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p6s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p6s(icon, tile, v-on='on', dark, disabled).mx-0
               v-icon mdi-function-variant
           span {{$t('editor:markup.insertMathExpression')}}
         v-tooltip(right, color='teal')
           template(v-slot:activator='{ on }')
-            v-btn.animated.fadeInLeft.wait-p7s(icon, tile, v-on='on', dark, disabled).mx-0
+            v-btn.mt-3.animated.fadeInLeft.wait-p7s(icon, tile, v-on='on', dark, disabled).mx-0
               v-icon mdi-table-plus
           span {{$t('editor:markup.tableHelper')}}
         template(v-if='$vuetify.breakpoint.mdAndUp')
           v-spacer
           v-tooltip(right, color='teal')
             template(v-slot:activator='{ on }')
-              v-btn.animated.fadeInLeft.wait-p8s(icon, tile, v-on='on', dark, @click='toggleFullscreen').mx-0
+              v-btn.mt-3.animated.fadeInLeft.wait-p8s(icon, tile, v-on='on', dark, @click='toggleFullscreen').mx-0
                 v-icon mdi-arrow-expand-all
             span {{$t('editor:markup.distractionFreeMode')}}
           v-tooltip(right, color='teal')
             template(v-slot:activator='{ on }')
-              v-btn.animated.fadeInLeft.wait-p9s(icon, tile, v-on='on', dark, @click='toggleHelp').mx-0
+              v-btn.mt-3.animated.fadeInLeft.wait-p9s(icon, tile, v-on='on', dark, @click='toggleHelp').mx-0
                 v-icon(:color='helpShown ? `teal` : ``') mdi-help-circle
             span {{$t('editor:markup.markdownFormattingHelp')}}
       .editor-markdown-editor
@@ -384,7 +384,7 @@ export default {
     }, 500),
     onCmPaste (cm, ev) {
       const clipItems = (ev.clipboardData || ev.originalEvent.clipboardData).items
-      for (const clipItem of clipItems) {
+      for (let clipItem of clipItems) {
         if (_.startsWith(clipItem.type, 'image/')) {
           const file = clipItem.getAsFile()
           const reader = new FileReader()
diff --git a/client/components/editor/editor-modal-media.vue b/client/components/editor/editor-modal-media.vue
index aada296f..2439f8ea 100644
--- a/client/components/editor/editor-modal-media.vue
+++ b/client/components/editor/editor-modal-media.vue
@@ -9,7 +9,7 @@
                 v-toolbar.radius-7(:color='$vuetify.theme.dark ? `teal` : `teal lighten-5`', dense, flat, height='44')
                   .body-2(:class='$vuetify.theme.dark ? `white--text` : `teal--text`') {{$t('editor:assets.title')}}
                   v-spacer
-                  v-btn(flat, icon, @click='refresh', tile, small)
+                  v-btn(text, icon, @click='refresh')
                     v-icon(:color='$vuetify.theme.dark ? `white` : `teal`') mdi-refresh
                 v-dialog(v-model='newFolderDialog', max-width='550')
                   template(v-slot:activator='{ on }')
@@ -18,7 +18,7 @@
                       span.hidden-sm-and-down(:class='$vuetify.theme.dark ? `teal--text text--lighten-3` : ``') {{$t('editor:assets.newFolder')}}
                   v-card
                     .dialog-header.is-short.subtitle-1 {{$t('editor:assets.newFolder')}}
-                    v-card-text
+                    v-card-text.pt-5
                       v-text-field.md2(
                         outlined
                         prepend-icon='mdi-folder-outline'
@@ -48,7 +48,7 @@
                   v-icon mdi-folder-upload
                 v-btn.btn-normalcase.mx-1(v-for='folder of folders', :key='folder.id', depressed,  color='grey darken-2', dark, @click='downFolder(folder)')
                   v-icon(left) mdi-folder
-                  span.caption {{ folder.name }}
+                  span.caption(style='text-transform: none;') {{ folder.name }}
                 v-divider.mt-2
               v-data-table(
                 :items='assets'
@@ -186,14 +186,14 @@
     //- RENAME DIALOG
 
     v-dialog(v-model='renameDialog', max-width='550', persistent)
-      v-card.wiki-form
+      v-card
         .dialog-header.is-short.is-orange
-          v-icon.mr-2(color='white') keyboard
+          v-icon.mr-2(color='white') mdi-keyboard
           span {{$t('editor:assets.renameAsset')}}
-        v-card-text
+        v-card-text.pt-5
           .body-2 {{$t('editor:assets.renameAssetSubtitle')}}
           v-text-field(
-            outline
+            outlined
             single-line
             :counter='255'
             v-model='renameAssetName'
@@ -202,24 +202,24 @@
           )
         v-card-chin
           v-spacer
-          v-btn(flat, @click='renameDialog = false', :disabled='renameAssetLoading') {{$t('common:actions.cancel')}}
-          v-btn(color='orange darken-3', @click='renameAsset', :loading='renameAssetLoading').white--text {{$t('common:actions.rename')}}
+          v-btn(text, @click='renameDialog = false', :disabled='renameAssetLoading') {{$t('common:actions.cancel')}}
+          v-btn.px-3(color='orange darken-3', @click='renameAsset', :loading='renameAssetLoading').white--text {{$t('common:actions.rename')}}
 
     //- DELETE DIALOG
 
     v-dialog(v-model='deleteDialog', max-width='550', persistent)
-      v-card.wiki-form
+      v-card
         .dialog-header.is-short.is-red
-          v-icon.mr-2(color='white') highlight_off
+          v-icon.mr-2(color='white') mdi-trash-can-outline
           span {{$t('editor:assets.deleteAsset')}}
-        v-card-text
+        v-card-text.pt-5
           .body-2 {{$t('editor:assets.deleteAssetConfirm')}}
           .body-2.red--text.text--darken-2 {{currentAsset.filename}}?
           .caption.mt-3 {{$t('editor:assets.deleteAssetWarn')}}
         v-card-chin
           v-spacer
-          v-btn(flat, @click='deleteDialog = false', :disabled='deleteAssetLoading') {{$t('common:actions.cancel')}}
-          v-btn(color='red darken-2', @click='deleteAsset', :loading='deleteAssetLoading').white--text {{$t('common:actions.delete')}}
+          v-btn(text, @click='deleteDialog = false', :disabled='deleteAssetLoading') {{$t('common:actions.cancel')}}
+          v-btn.px-3(color='red darken-2', @click='deleteAsset', :loading='deleteAssetLoading').white--text {{$t('common:actions.delete')}}
 </template>
 
 <script>
diff --git a/client/components/editor/editor-modal-properties.vue b/client/components/editor/editor-modal-properties.vue
index 2fa04216..e445decb 100644
--- a/client/components/editor/editor-modal-properties.vue
+++ b/client/components/editor/editor-modal-properties.vue
@@ -16,8 +16,8 @@
         )
         v-icon(left) mdi-check
         span {{ $t('common:actions.ok') }}
-    v-card.wiki-form(tile)
-      v-card-text
+    v-card(tile)
+      v-card-text.pt-5
         .overline.pb-5 {{$t('editor:props.pageInfo')}}
         v-text-field(
           ref='iptTitle'
@@ -35,7 +35,7 @@
           :hint='$t(`editor:props.shortDescriptionHint`)'
           )
       v-divider
-      v-card-text.grey(:class='darkMode ? `darken-3-d3` : `lighten-5`')
+      v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
         .overline.pb-5 {{$t('editor:props.pathCategorization')}}
         v-container.pa-0(fluid, grid-list-lg)
           v-layout(row, wrap)
@@ -73,7 +73,7 @@
           disabled
           )
       v-divider
-      v-card-text.pb-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
+      v-card-text.py-5.grey(:class='darkMode ? `darken-3-d5` : `lighten-4`')
         .overline.pb-5 {{$t('editor:props.publishState')}} #[v-chip.ml-3(label, color='grey', small, outlined).white--text coming soon]
         v-container.pa-0(fluid, grid-list-lg)
           v-layout(row, wrap)
diff --git a/client/components/history.vue b/client/components/history.vue
index fa199a46..d0c5bb56 100644
--- a/client/components/history.vue
+++ b/client/components/history.vue
@@ -36,12 +36,14 @@
                       v-if='diffSource === ph.versionId'
                       small
                       color='pink'
+                      label
                       )
                       .caption.white--text Source
                     v-chip.ml-0.mr-3(
                       v-if='diffTarget === ph.versionId'
                       small
                       color='pink'
+                      label
                       )
                       .caption.white--text Target
                     .caption(v-if='ph.actionType === `edit`') Edited by #[strong {{ ph.authorName }}]
@@ -49,32 +51,28 @@
                     .caption(v-else-if='ph.actionType === `initial`') Created by #[strong {{ ph.authorName }}]
                     .caption(v-else) Unknown Action by #[strong {{ ph.authorName }}]
                     v-spacer
-                    .caption {{ ph.createdAt | moment('calendar') }}
+                    .caption.mr-3 {{ ph.createdAt | moment('calendar') }}
                     v-menu(offset-x, left)
-                      v-btn(icon, slot='activator'): v-icon more_horiz
-                      v-list(dense).history-promptmenu
+                      template(v-slot:activator='{ on }')
+                        v-btn.mr-0(icon, v-on='on', small, tile): v-icon mdi-dots-horizontal
+                      v-list(dense, nav).history-promptmenu
                         v-list-item(@click='setDiffTarget(ph.versionId)')
-                          v-list-item-avatar: v-icon call_made
+                          v-list-item-avatar(size='24'): v-icon mdi-call-received
                           v-list-item-title Set as Differencing Target
-                        v-divider
                         v-list-item(@click='setDiffSource(ph.versionId)')
-                          v-list-item-avatar: v-icon call_received
+                          v-list-item-avatar(size='24'): v-icon mdi-call-made
                           v-list-item-title Set as Differencing Source
-                        v-divider
                         v-list-item
-                          v-list-item-avatar: v-icon code
+                          v-list-item-avatar(size='24'): v-icon mdi-code-tags
                           v-list-item-title View Source
-                        v-divider
                         v-list-item
-                          v-list-item-avatar: v-icon cloud_download
+                          v-list-item-avatar(size='24'): v-icon mdi-cloud-download-outline
                           v-list-item-title Download Version
-                        v-divider
                         v-list-item
-                          v-list-item-avatar: v-icon restore
+                          v-list-item-avatar(size='24'): v-icon mdi-history
                           v-list-item-title Restore
-                        v-divider
                         v-list-item
-                          v-list-item-avatar: v-icon call_split
+                          v-list-item-avatar(size='24'): v-icon mdi-source-branch
                           v-list-item-title Branch off from here
 
             v-btn.ma-0.radius-7(
@@ -223,11 +221,11 @@ export default {
     trailIcon(actionType) {
       switch (actionType) {
         case 'edit':
-          return 'edit'
+          return 'mdi-pencil'
         case 'move':
           return 'forward'
         case 'initial':
-          return 'add'
+          return 'mdi-plus'
         default:
           return 'warning'
       }
diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue
index b252d4ec..9a8099ba 100644
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -49,14 +49,14 @@
         v-divider
       v-container.grey.pa-0(fluid, :class='darkMode ? `darken-4-l3` : `lighten-4`')
         v-row(no-gutters, align-content='center', style='height: 90px;')
-          v-col.pl-4(offset-xl='2', offset-lg='3')
+          v-col.pl-4.page-col-content(offset-xl='2', offset-lg='3')
             .headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
             .caption.grey--text.text--darken-1 {{description}}
       v-divider
       v-container.pl-5.pt-4(fluid, grid-list-xl)
         v-layout(row)
           v-flex.page-col-sd(lg3, xl2, v-if='$vuetify.breakpoint.lgAndUp', style='margin-top: -90px;')
-            v-card(v-if='toc.length')
+            v-card.mb-5(v-if='toc.length')
               .overline.pa-5.pb-0(:class='darkMode ? `blue--text text--lighten-2` : `primary--text`') {{$t('common:page.toc')}}
               v-list.pb-3(dense, nav, :class='darkMode ? `darken-3-d3` : ``')
                 template(v-for='(tocItem, tocIdx) in toc')
@@ -70,7 +70,7 @@
                       v-list-item-title.px-3.caption.grey--text(:class='darkMode ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}}
                     //- v-divider(inset, v-if='tocIdx < toc.length - 1')
 
-            v-card.mt-5(v-if='tags.length > 0')
+            v-card.mb-5(v-if='tags.length > 0')
               .pa-5
                 .overline.teal--text.pb-2(:class='$vuetify.theme.dark ? `text--lighten-3` : ``') Tags
                 v-chip.mr-1(
@@ -83,7 +83,7 @@
                   v-icon(color='teal', left, small) mdi-label
                   span.teal--text.text--darken-2 {{tag.text}}
 
-            v-card.mt-5
+            v-card.mb-5
               .pa-5
                 .overline.indigo--text.d-flex.align-center(:class='$vuetify.theme.dark ? `text--lighten-3` : ``')
                   span {{$t('common:page.lastEditedBy')}}
@@ -96,7 +96,7 @@
                 .body-2.grey--text(:class='darkMode ? `` : `text--darken-3`') {{ authorName }}
                 .caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }}
 
-            v-card.mt-5
+            v-card.mb-5
               .pa-5
                 .overline.pb-2.yellow--text(:class='$vuetify.theme.dark ? `text--darken-3` : `text--darken-4`') Rating
                 .text-center
@@ -109,8 +109,8 @@
                   )
                   .caption.grey--text 5 votes
 
-            v-card.mt-5(flat)
-              v-toolbar(:color='darkMode ? `grey darken-3` : `grey lighten-3`', flat, dense)
+            v-card(flat)
+              v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense)
                 v-spacer
                 v-tooltip(bottom)
                   template(v-slot:activator='{ on }')
@@ -122,7 +122,7 @@
                   span {{$t('common:page.share')}}
                 v-tooltip(bottom)
                   template(v-slot:activator='{ on }')
-                    v-btn(icon, tile, v-on='on'): v-icon(color='grey') mdi-printer
+                    v-btn(icon, tile, v-on='on', @click='print'): v-icon(color='grey') mdi-printer
                   span {{$t('common:page.printFormat')}}
                 v-spacer
 
@@ -320,6 +320,9 @@ export default {
     upBtnScroll () {
       const scrollOffset = window.pageYOffset || document.documentElement.scrollTop
       this.upBtnShown = scrollOffset > window.innerHeight * 0.33
+    },
+    print () {
+      window.print()
     }
   }
 }
diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
index 5df9fe7f..2e050aaf 100644
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -654,16 +654,17 @@
   .nav-header,
   .v-navigation-drawer,
   .v-footer,
-  .v-btn--floating,
+  .v-btn--fab,
   .page-col-sd
   {
-    display: none;
+    display: none !important;
   }
 
   .page-col-content {
     flex-basis: 100% !important;
     flex-grow: 1 !important;
     max-width: 100% !important;
+    margin-left: 0 !important;
 
     > .v-toolbar {
       border: 1px solid mc('grey', '300') !important;
@@ -677,6 +678,7 @@
 
   .v-content {
     padding: 0 !important;
+    font-size: 14px;
   }
 
 
diff --git a/server/views/legacy/master.pug b/server/views/legacy/master.pug
index 2896ea00..ec294e55 100644
--- a/server/views/legacy/master.pug
+++ b/server/views/legacy/master.pug
@@ -43,16 +43,6 @@ html
 
     //- CSS
     
-      
-    link(
-      type='text/css'
-      rel='stylesheet'
-      href='/css/legacy.b8600c4bfa9b6d21f54c.css'
-      integrity='sha256-c43Iog8YvFPD9EQvD11jnxb0IYOFUtxYA2ABtJIQPmM= sha512-g1nj/OKi7ykTfsdrhgu4lqOqyKMZBvAGvjS98r9cXI96DaciNfgXtlLIGmR3wgQuGrV3n3rCs94BB6lK9OI7qA=='
-      crossorigin='use-credentials'
-    )
-      
-    
 
     script(
       crossorigin='anonymous'
@@ -64,18 +54,14 @@ html
       
     script(
       type='text/javascript'
-      src='/js/runtime.fc95297b6e8ae6e2e003.js'
-      integrity='sha256-6bZfGqlPATFeFRP90SGQYPuIILZahs+tXrS/eQdEUzc= sha512-tBIg4dA1HmUAT8xl3YuZu9eyiB1KWmSkI74kM2bi+BzZe12YXogJ5PHNzxb+Cnw6fjavInmnljB4X1QFzumrUw=='
-      crossorigin='use-credentials'
+      src='/js/runtime.js'
       )
       
     
       
     script(
       type='text/javascript'
-      src='/js/legacy.b8600c4bfa9b6d21f54c.js'
-      integrity='sha256-KYTyzCk08U1fUx2pAcphdJOBWcWNe3m4jAcIeeZJX2U= sha512-vOBKbPZkD3HfjP2MfM6O4yhXBXZ5WJNzukJVZMtQKw84yvUePUnJstJ6t90jy2NPO9UTaEpF3J2SNh+3DBofKQ=='
-      crossorigin='use-credentials'
+      src='/js/legacy.js'
       )
       
     
diff --git a/server/views/master.pug b/server/views/master.pug
index deadab0f..e43defcd 100644
--- a/server/views/master.pug
+++ b/server/views/master.pug
@@ -47,34 +47,20 @@ html(lang=siteConfig.lang)
 
     //- CSS
     
-      
-    link(
-      type='text/css'
-      rel='stylesheet'
-      href='/css/app.303f1e1fbb500ede4cef.css'
-      integrity='sha256-wmeXKjjPKSCWT+1pyn38uD5929SyTO0vx1rq3xjLFcE= sha512-Qjh++VFQQnL0y3E0WAzvHmpT9UwTwtQBoo9vwZu02OqxG9OXRGCEJWzRPLkn/fRVP6wrlBPMSz/DVaAaeUhW1w=='
-      crossorigin='use-credentials'
-    )
-      
-    
 
     //- JS
     
       
     script(
       type='text/javascript'
-      src='/js/runtime.fc95297b6e8ae6e2e003.js'
-      integrity='sha256-6bZfGqlPATFeFRP90SGQYPuIILZahs+tXrS/eQdEUzc= sha512-tBIg4dA1HmUAT8xl3YuZu9eyiB1KWmSkI74kM2bi+BzZe12YXogJ5PHNzxb+Cnw6fjavInmnljB4X1QFzumrUw=='
-      crossorigin='use-credentials'
+      src='/js/runtime.js'
       )
       
     
       
     script(
       type='text/javascript'
-      src='/js/app.303f1e1fbb500ede4cef.js'
-      integrity='sha256-cSXcjyRtFGAvQ5BnRPbLxcr3itR1X8wgcNO5RlvMLEU= sha512-dy3W6c8IlJpAfGpMi3FibzOI6g1o65CpsEWgIZU/Fl/l0ofUxrxXP3xpfNuAaLgmQfc5l+x3IomXmeM8OBEIUQ=='
-      crossorigin='use-credentials'
+      src='/js/app.js'
       )
       
     
diff --git a/server/views/setup.pug b/server/views/setup.pug
index 51932d1f..80e6da6f 100644
--- a/server/views/setup.pug
+++ b/server/views/setup.pug
@@ -23,34 +23,20 @@ html
 
     //- CSS
     
-      
-    link(
-      type='text/css'
-      rel='stylesheet'
-      href='/css/setup.35a646a90c01e5e5f6f5.css'
-      integrity='sha256-HNu607cPBzAhzYo8xjvM307b5k18J+Vr2OWTFlMuiIw= sha512-b0KTirC8Myjz1FnIYY9fFrYoexiVj7/3N3TeuHU+IfCx2ZM+uMilVoZPe4sBC+xXTuuJIoJWwgjH3ZI1Lt6eAQ=='
-      crossorigin='use-credentials'
-    )
-      
-    
 
     //- JS
     
       
     script(
       type='text/javascript'
-      src='/js/runtime.fc95297b6e8ae6e2e003.js'
-      integrity='sha256-6bZfGqlPATFeFRP90SGQYPuIILZahs+tXrS/eQdEUzc= sha512-tBIg4dA1HmUAT8xl3YuZu9eyiB1KWmSkI74kM2bi+BzZe12YXogJ5PHNzxb+Cnw6fjavInmnljB4X1QFzumrUw=='
-      crossorigin='use-credentials'
+      src='/js/runtime.js'
       )
       
     
       
     script(
       type='text/javascript'
-      src='/js/setup.35a646a90c01e5e5f6f5.js'
-      integrity='sha256-DS7oIW0jf1JjTIBH/NfUxFTx9ZCUd67yy0OdZ4+PqZc= sha512-dHe0IsiBCGYirAl+JqFIjQEtG/sV/QShDoppFskoqunXxGnzqM1zphxfRCX8ooKLaQrGfW9F8HNBVsUSK02HNg=='
-      crossorigin='use-credentials'
+      src='/js/setup.js'
       )