fix: UI improvements

.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

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

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>

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

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')}}

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')}}

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'))

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()

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>

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)