fix: nav notify positioning + timeout indicator

client/client-app.js

@@ -207,6 +207,7 @@ Vue.component('page-source', () => import(/* webpackChunkName: "source" */ './co
 Vue.component('loader', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/loader.vue'))
 Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.vue'))
 Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))
+Vue.component('notify', () => import(/* webpackMode: "eager" */ './components/common/notify.vue'))
 Vue.component('page-selector', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/page-selector.vue'))
 Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
 Vue.component('register', () => import(/* webpackChunkName: "register" */ './components/register.vue'))

client/components/admin.vue

@@ -104,6 +104,7 @@
         router-view
 
     nav-footer
+    notify
     search-results
 </template>
 

client/components/common/nav-header.vue

@@ -321,6 +321,8 @@ export default {
 <style lang='scss'>
 
 .nav-header {
+  z-index: 1000;
+
   .v-toolbar__extension {
     padding: 0;
 

client/components/common/notify.vue

@@ -0,0 +1,58 @@
+<template lang='pug'>
+  v-snackbar.nav-notify(
+    :color='notification.style'
+    top
+    multi-line
+    auto-height
+    v-model='notificationState'
+    )
+    .text-xs-left
+      v-icon.mr-3(dark) {{ notification.icon }}
+      span {{ notification.message }}
+</template>
+
+<script>
+import { get, sync } from 'vuex-pathify'
+
+export default {
+  data() {
+    return { }
+  },
+  computed: {
+    notification: get('notification'),
+    notificationState: sync('notification@isActive')
+  }
+}
+</script>
+
+<style lang='scss'>
+.nav-notify {
+  top: 60px;
+  z-index: 999;
+
+  .v-snack__content {
+    position: relative;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 2px;
+      background-color: rgba(255,255,255,.4);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      animation: nav-notify-anim 6s linear;
+    }
+  }
+}
+
+@keyframes nav-notify-anim {
+  0% {
+    width: 100%;
+  }
+  100% {
+    width: 0%;
+  }
+}
+</style>

client/components/common/page-delete.vue

@@ -92,17 +92,25 @@ export default {
 
 <style lang='scss'>
   body.page-deleted-pending {
+    perspective: 50vw;
+    height: 100vh;
+    overflow: hidden;
+
     .application {
       background-color: mc('grey', '900');
     }
     .application--wrap {
+      transform-style: preserve-3d;
       transform: translateZ(-5vw) rotateX(2deg);
       border-radius: 7px;
       overflow: hidden;
     }
   }
   body.page-deleted {
+    perspective: 50vw;
+
     .application--wrap {
+      transform-style: preserve-3d;
       transform: translateZ(-1000vw) rotateX(60deg);
       opacity: 0;
     }

client/components/editor.vue

@@ -39,16 +39,7 @@
       component(:is='activeModal')
 
     loader(v-model='dialogProgress', :title='$t(`editor:save.processing`)', :subtitle='$t(`editor:save.pleaseWait`)')
-    v-snackbar(
+    notify
-      :color='notification.style'
-      bottom,
-      right,
-      multi-line,
-      v-model='notificationState'
-    )
-      .text-xs-left
-        v-icon.mr-3(dark) {{ notification.icon }}
-        span {{ notification.message }}
 </template>
 
 <script>
@@ -134,8 +125,6 @@ export default {
     darkMode: get('site/dark'),
     activeModal: sync('editor/activeModal'),
     mode: get('editor/mode'),
-    notification: get('notification'),
-    notificationState: sync('notification@isActive'),
     welcomeMode() { return this.mode === `create` && this.path === `home` },
     currentPageTitle: get('page/title')
   },

client/components/history.vue

@@ -103,6 +103,7 @@
                 v-card.mt-3(light, v-html='diffHTML')
 
     nav-footer
+    notify
     search-results
 </template>
 

client/components/login.vue

@@ -130,6 +130,7 @@
 
     loader(v-model='isLoading', :color='loaderColor', :title='loaderTitle', :subtitle='$t(`auth:pleaseWait`)')
     nav-footer(color='grey darken-4')
+    notify
 </template>
 
 <script>

client/components/profile.vue

@@ -23,6 +23,7 @@
         router-view
 
     nav-footer
+    notify
     search-results
 </template>
 

client/components/register.vue

@@ -92,6 +92,7 @@
 
     loader(v-model='isLoading', :mode='loaderMode', :icon='loaderIcon', :color='loaderColor', :title='loaderTitle', :subtitle='loaderSubtitle')
     nav-footer(color='grey darken-4', dark-color='grey darken-4')
+    notify
 </template>
 
 <script>

client/components/source.vue

@@ -16,6 +16,7 @@
                   slot
 
     nav-footer
+    notify
     search-results
 </template>
 

client/scss/base/base.scss

@@ -1,7 +1,6 @@
 html {
   box-sizing: border-box;
   height: 100%;
-  perspective: 50vw;
   background-color: mc('grey', '900');
 }
 *, *:before, *:after {
@@ -23,7 +22,6 @@ html {
 
 .application--wrap {
   transition: all 1.2s ease;
-  transform-style: preserve-3d;
   transform-origin: 50% 50%;
   background-color: #FFF;
 

client/themes/default/components/nav-footer.vue

@@ -3,17 +3,6 @@
     .caption.grey--text.text--darken-1
       span(v-if='company && company.length > 0') {{ $t('common:footer.copyright', { company: company, year: currentYear, interpolation: { escapeValue: false } }) }} | 
       span {{ $t('common:footer.poweredBy') }} #[a(href='https://wiki.js.org', ref='nofollow') Wiki.js]
-
-    v-snackbar(
-      :color='notification.style'
-      bottom
-      right
-      multi-line
-      v-model='notificationState'
-    )
-      .text-xs-left
-        v-icon.mr-3(dark) {{ notification.icon }}
-        span {{ notification.message }}
 </template>
 
 <script>
@@ -37,9 +26,7 @@ export default {
   },
   computed: {
     company: get('site/company'),
-    notification: get('notification'),
     darkMode: get('site/dark'),
-    notificationState: sync('notification@isActive'),
     bgColor() {
       if (!this.darkMode) {
         return this.color

client/themes/default/components/page.vue

@@ -117,6 +117,7 @@
               span Print Format
             v-spacer
     nav-footer
+    notify
     search-results
     v-fab-transition
       v-btn(v-if='upBtnShown', fab, fixed, bottom, right, small, @click='$vuetify.goTo(0, scrollOpts)', color='primary')