feat: admin enter animation

client/components/admin/admin-auth.vue

@@ -3,18 +3,18 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text Authentication
-            .subheading.grey--text Configure the authentication settings of your wiki #[v-chip(label, color='primary', small).white--text coming soon]
+            .headline.primary--text.animated.fadeInLeft Authentication
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s Configure the authentication settings of your wiki #[v-chip(label, color='primary', small).white--text coming soon]
           v-spacer
-          v-btn(outline, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
             v-icon refresh
-          v-btn(color='success', @click='save', depressed, large)
+          v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) check
             span {{$t('common:actions.apply')}}
 
-        v-card.mt-3
+        v-card.mt-3.animated.fadeInUp
           v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='settings'): v-icon settings
             v-tab(v-for='strategy in activeStrategies', :key='strategy.key') {{ strategy.title }}

client/components/admin/admin-contribute.vue

@@ -3,11 +3,11 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-heart-health.svg', alt='Contribute', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-heart-health.svg', alt='Contribute', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text {{ $t('admin:contribute.title') }}
-            .subheading.grey--text {{ $t('admin:contribute.subtitle') }}
-        v-card.mt-3
+            .headline.primary--text.animated.fadeInLeft {{ $t('admin:contribute.title') }}
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:contribute.subtitle') }}
+        v-card.mt-3.animated.fadeInUp
           v-card-text
             i18next.body-1.pl-3(path='admin:contribute.openSource', tag='div')
               v-icon(color='red') favorite

client/components/admin/admin-general.vue

@@ -3,19 +3,19 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-categorize.svg', alt='General', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-categorize.svg', alt='General', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text {{ $t('admin:general.title') }}
-            .subheading.grey--text {{ $t('admin:general.subtitle') }}
+            .headline.primary--text.animated.fadeInLeft {{ $t('admin:general.title') }}
+            .subheading.grey--text.animated.fadeInLeft {{ $t('admin:general.subtitle') }}
           v-spacer
-          v-btn(color='success', depressed, @click='save', large)
+          v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
             v-icon(left) check
             span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
               v-form
-                v-card.wiki-form
+                v-card.wiki-form.animated.fadeInUp
                   v-toolbar(color='primary', dark, dense, flat)
                     v-toolbar-title
                       .subheading {{ $t('admin:general.siteInfo') }}
@@ -87,7 +87,7 @@
                       hint='A unique identifier provided by your analytics service provider.'
                       )
             v-flex(lg6 xs12)
-              v-card.wiki-form
+              v-card.wiki-form.animated.fadeInUp.wait-p2s
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
                     .subheading {{ $t('admin:general.siteBranding') }}
@@ -124,7 +124,7 @@
                     hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.'
                     )
 
-              v-card.wiki-form.mt-3
+              v-card.wiki-form.mt-3.animated.fadeInUp.wait-p4s
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
                     .subheading Features
@@ -169,7 +169,7 @@ export default {
       analyticsServices: [
         { text: 'None', value: '' },
         { text: 'Google Analytics', value: 'ga' },
-        { text: 'Google Tag Manager', value: 'gtm' },
+        { text: 'Google Tag Manager', value: 'gtm' }
       ],
       metaRobots: [
         { text: 'Index', value: 'index' },

client/components/admin/admin-groups.vue

@@ -3,15 +3,15 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-people.svg', alt='Groups', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-people.svg', alt='Groups', style='width: 80px;')
           .admin-header-title
-            .headline.blue--text.text--darken-2 Groups
-            .subheading.grey--text Manage groups and their permissions
+            .headline.blue--text.text--darken-2.animated.fadeInLeft Groups
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s Manage groups and their permissions
           v-spacer
-          v-btn(color='grey', outline, @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p2s(color='grey', outline, @click='refresh', large)
             v-icon refresh
           v-dialog(v-model='newGroupDialog', max-width='500')
-            v-btn(color='primary', depressed, slot='activator', large)
+            v-btn.animated.fadeInDown(color='primary', depressed, slot='activator', large)
               v-icon(left) add
               span New Group
             v-card.wiki-form
@@ -32,7 +32,7 @@
                 v-spacer
                 v-btn(flat, @click='newGroupDialog = false') Cancel
                 v-btn(color='primary', @click='createGroup') Create
-        v-card.mt-3
+        v-card.mt-3.animated.fadeInUp
           v-data-table(
             :items='groups'
             :headers='headers'
@@ -63,7 +63,6 @@ import _ from 'lodash'
 
 import groupsQuery from 'gql/admin/groups/groups-query-list.gql'
 import createGroupMutation from 'gql/admin/groups/groups-mutation-create.gql'
-import deleteGroupMutation from 'gql/admin/groups/groups-mutation-delete.gql'
 
 export default {
   data() {

client/components/admin/admin-locale.vue

@@ -3,18 +3,18 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-globe-earth.svg', alt='Locale', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-globe-earth.svg', alt='Locale', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text {{ $t('admin:locale.title') }}
-            .subheading.grey--text {{ $t('admin:locale.subtitle') }}
+            .headline.primary--text.animated.fadeInLeft {{ $t('admin:locale.title') }}
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:locale.subtitle') }}
           v-spacer
-          v-btn(color='success', depressed, @click='save', large, :loading='loading')
+          v-btn.animated.fadeInDown(color='success', depressed, @click='save', large, :loading='loading')
             v-icon(left) check
             span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
-              v-card.wiki-form
+              v-card.wiki-form.animated.fadeInUp
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
                     .subheading {{ $t('admin:locale.settings') }}
@@ -48,7 +48,7 @@
                     :hint='namespacing ? $t("admin:locale.autoUpdate.hintWithNS") : $t("admin:locale.autoUpdate.hint")'
                   )
 
-              v-card.wiki-form.mt-3
+              v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
                     .subheading {{ $t('admin:locale.namespacing') }}
@@ -99,7 +99,7 @@
                         v-list-tile-action
                           v-checkbox(:input-value='data.tile.props.value', color='primary', value)
             v-flex(lg6 xs12)
-              v-card
+              v-card.animated.fadeInUp.wait-p4s
                 v-toolbar(color='teal', dark, dense, flat)
                   v-toolbar-title
                     .subheading {{ $t('admin:locale.download') }}

client/components/admin/admin-mail.vue

@@ -1,21 +1,21 @@
 <template lang='pug'>
   v-container(fluid, grid-list-lg)
-    v-layout(row wrap)
+    v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-new-post.svg', alt='Mail', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-new-post.svg', alt='Mail', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text {{ $t('admin:mail.title') }}
-            .subheading.grey--text {{ $t('admin:mail.subtitle') }}
+            .headline.primary--text.animated.fadeInLeft {{ $t('admin:mail.title') }}
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:mail.subtitle') }}
           v-spacer
-          v-btn(color='success', depressed, @click='save', large)
+          v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
             v-icon(left) check
             span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
               v-form
-                v-card.wiki-form
+                v-card.wiki-form.animated.fadeInUp
                   v-toolbar(color='primary', dark, dense, flat)
                     v-toolbar-title
                       .subheading {{ $t('admin:mail.configuration') }}
@@ -84,7 +84,7 @@
                       )
 
             v-flex(lg6 xs12)
-              v-card.wiki-form
+              v-card.wiki-form.animated.fadeInUp.wait-p2s
                 v-form
                   v-toolbar(color='primary', dark, dense, flat)
                     v-toolbar-title

client/components/admin/admin-navigation.vue

@@ -3,20 +3,20 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-triangle-arrow.svg', alt='Navigation', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-triangle-arrow.svg', alt='Navigation', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text {{$t('navigation.title')}}
-            .subheading.grey--text {{$t('navigation.subtitle')}}
+            .headline.primary--text.animated.fadeInLeft {{$t('navigation.title')}}
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s {{$t('navigation.subtitle')}}
           v-spacer
-          v-btn(outline, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
             v-icon refresh
-          v-btn(color='success', depressed, @click='save', large)
+          v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
             v-icon(left) check
             span {{$t('common:actions.apply')}}
         v-container.pa-0.mt-3(fluid, grid-list-lg)
           v-layout(row)
             v-flex(style='flex: 0 0 350px;')
-              v-card
+              v-card.animated.fadeInUp
                 v-list.py-2(dense, dark, :class='navTree.length < 1 ? "grey lighten-4" : "primary"')
                   v-list-tile(v-if='navTree.length < 1')
                     v-list-tile-avatar: v-icon(color='grey') explore_off
@@ -60,7 +60,7 @@
                       v-list-tile(@click='addItem("divider")')
                         v-list-tile-avatar: v-icon power_input
                         v-list-tile-title {{$t('navigation.divider')}}
-            v-flex
+            v-flex.animated.fadeInUp.wait-p2s
               v-card.wiki-form(v-if='current.kind === "link"')
                 v-toolbar(dense, color='blue', flat, dark)
                   .subheading {{$t('navigation.edit', { kind: $t('navigation.link') })}}

client/components/admin/admin-rendering.vue

@@ -3,18 +3,18 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text Rendering
-            .subheading.grey--text Configure how content is rendered
+            .headline.primary--text.animated.fadeInLeft Rendering
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s Configure how content is rendered
           v-spacer
-          v-btn(outline, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
             v-icon refresh
-          v-btn(color='success', @click='save', depressed, large)
+          v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) check
             span {{$t('common:actions.apply')}}
 
-      v-flex(lg3, xs12)
+      v-flex.animated.fadeInUp(lg3, xs12)
         v-toolbar(
           color='primary'
           dense
@@ -60,7 +60,7 @@
                 v-divider.my-0(v-if='n < core.children.length - 1')
 
       v-flex(lg9, xs12)
-        v-card.wiki-form
+        v-card.wiki-form.animated.fadeInUp
           v-toolbar(
             color='grey darken-1'
             dark
@@ -138,7 +138,7 @@ export default {
     }
   },
   computed: {
-    darkMode: get('site/dark'),
+    darkMode: get('site/dark')
   },
   watch: {
     renderers(newValue, oldValue) {

client/components/admin/admin-storage.vue

@@ -3,18 +3,18 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-cloud-storage.svg', alt='Storage', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-cloud-storage.svg', alt='Storage', style='width: 80px;')
           .admin-header-title
-            .headline.primary--text Storage
-            .subheading.grey--text Set backup and sync targets for your content
+            .headline.primary--text.animated.fadeInLeft Storage
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s Set backup and sync targets for your content
           v-spacer
-          v-btn(outline, color='grey', @click='refresh', large)
+          v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', @click='refresh', large)
             v-icon refresh
-          v-btn(color='success', @click='save', depressed, large)
+          v-btn.animated.fadeInDown(color='success', @click='save', depressed, large)
             v-icon(left) check
             span {{$t('common:actions.apply')}}
 
-        v-card.mt-3
+        v-card.mt-3.animated.fadeInUp
           v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark, v-model='currentTab')
             v-tab(key='settings'): v-icon settings
             v-tab(v-for='tgt in activeTargets', :key='tgt.key') {{ tgt.title }}

client/components/admin/admin-users.vue

@@ -3,17 +3,17 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          img(src='/svg/icon-customer.svg', alt='Users', style='width: 80px;')
+          img.animated.fadeInUp(src='/svg/icon-customer.svg', alt='Users', style='width: 80px;')
           .admin-header-title
-            .headline.blue--text.text--darken-2 Users
-            .subheading.grey--text Manage users
+            .headline.blue--text.text--darken-2.animated.fadeInLeft Users
+            .subheading.grey--text.animated.fadeInLeft.wait-p4s Manage users
           v-spacer
-          v-btn(outline, color='grey', large, @click='refresh')
+          v-btn.animated.fadeInDown.wait-p2s(outline, color='grey', large, @click='refresh')
             v-icon refresh
-          v-btn(color='primary', large, depressed, @click='createUser')
+          v-btn.animated.fadeInDown(color='primary', large, depressed, @click='createUser')
             v-icon(left) add
             span New User
-        v-card.mt-3
+        v-card.mt-3.animated.fadeInUp
           v-data-table(
             v-model='selected'
             :items='users',