refactoring with vuetify

pages/Admin.vue

@@ -52,7 +52,6 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-import { Message } from 'element-ui'
 import Users from '../components/admin/Users'
 import Places from '../components/admin/Places'
 import Settings from '../components/admin/Settings'
@@ -99,9 +98,8 @@ export default {
         this.loading = true
         await this.$axios.$get(`/event/confirm/${id}`)
         this.loading = false
-        Message({
+        this.$root.$message({
           message: this.$t('event.confirmed'),
-          showClose: true,
           type: 'success'
         })
         this.events = this.events.filter(e => e.id !== id)

pages/Login.vue

@@ -19,19 +19,24 @@
               :placeholder='$t("common.password")')
 
           v-card-actions
-            v-spacer
-            v-btn(text @click='forgot' small) {{$t('login.forgot_password')}}
+            v-btn(text
+              tabindex="1"
+              @click='forgot' small) {{$t('login.forgot_password')}}
 
           v-card-actions
-            v-btn(color='success'
-              :disabled='!valid'
-              @click='submit') {{$t('common.login')}}
+            v-spacer
 
             v-btn(v-if='settings.allow_registration'
               to='/register'
               text
+              tabindex="1"
               color='orange') {{$t('login.not_registered')}}
 
+            v-btn(color='success'
+              tabindex="0"
+              :disabled='!valid || loading' :loading='loading'
+              @click='submit') {{$t('common.login')}}
+
 </template>
 
 <script>

pages/Register.vue

@@ -1,6 +1,6 @@
 <template lang='pug'>
   v-row.mt-5(align='center' justify='center')
-    v-col(cols='12' sm='10' md="6")
+    v-col(cols='12' md="6" lg="5" xl="4")
 
       v-card
         v-card-title {{$t('common.register')}}
@@ -24,7 +24,9 @@
 
         v-card-actions
           v-spacer
-          v-btn(@click='register' :disabled='!valid' color='primary') {{$t('common.send')}}
+          v-btn(@click='register'
+            :disabled='!valid || loading' :loading='loading'
+            color='primary') {{$t('common.send')}}
             v-icon mdi-chevron-right
 </template>
 
@@ -40,7 +42,7 @@ export default {
       validators,
       loading: false,
       user: {},
-      valid: false
+      valid: true
     }
   },
   // https://nuxtjs.org/api/pages-validate/
@@ -49,7 +51,7 @@ export default {
     return store.state.settings.allow_registration
   },
   computed: {
-    ...mapState(['settings']),
+    ...mapState(['settings'])
     // disabled () {
     //   if (process.server) { return false }
     //   return !this.user.password || !this.user.email || !this.user.description

pages/about.vue

@@ -10,7 +10,6 @@
 <script>
 import Editor from '@/components/Editor'
 import { mapState, mapActions } from 'vuex'
-import { Message } from 'element-ui'
 
 export default {
   components: { Editor },
@@ -23,8 +22,7 @@ export default {
   methods: {
     ...mapActions(['setSetting']),
     save () {
-      Message({
-        showClose: true,
+      this.$root.$message({
         type: 'success',
         message: this.$t('common.done')
       })

pages/add/_edit.vue

@@ -151,7 +151,8 @@
 
         v-card-actions
           v-spacer
-          v-btn(@click='done' color='primary') {{edit?$t('common.edit'):$t('common.send')}}
+          v-btn(@click='done' :loading='loading' :disabled='!valid || loading'
+            color='primary') {{edit?$t('common.edit'):$t('common.send')}}
 
 </template>
 <script>

pages/event/_id.vue

@@ -24,7 +24,7 @@
           v-icon mdi-arrow-right
 
     v-card-text
-      v-dialog.embedDialog(:visible.sync='showEmbed')
+      //- v-dialog.embedDialog(:visible.sync='showEmbed')
         h4(slot='title') {{$t('common.embed_title')}}
         EmbedEvent(:event='event')
 
@@ -33,13 +33,20 @@
 
       //- event image
       v-img.main_image.mb-3(
-        lazy
         contain
+        lazy
         :src='imgPath'
         :lazy-src='thumbImgPath'
         v-if='event.image_path')
+        template(v-slot:placeholder)
+          v-row(
+            class="fill-height ma-0"
+            align="center"
+            justify="center")
+            v-progress-circular(indeterminate
+              color="grey lighten-5")
 
-      p.p-description(v-html='event.description')
+      div.p-description(v-html='event.description')
       v-chip.p-category.ml-1(small v-for='tag in event.tags' color='primary' outlined :key='tag') {{tag}}
 
         //- info & actions
@@ -304,15 +311,9 @@ export default {
 </script>
 <style lang='less'>
 .eventDetail {
-  .toolbar {
-    height: auto !important;
-    padding: 1em 0;
-    box-sizing: content-box;
-  }
-
   .main_image {
     width: 100%;
-    transition: height .100s;
+    transition: all 1s;
     margin: 0 auto;
     max-height: 83vh;
   }

pages/event/embedEvent.vue

@@ -1,18 +1,17 @@
 <template lang='pug'>
-el-row(:gutter='10')
-  el-col(:span='12' :xs='24')
-    el-alert.mb-1.mt-1(type='info' show-icon) {{$t('common.embed_help')}}
-    el-input(v-model='code')
+v-row(:gutter='10')
+  v-col(:span='12' :xs='24')
+    v-alert.mb-1.mt-1(type='info' show-icon) {{$t('common.embed_help')}}
+    v-text-field(v-model='code')
       el-button(slot='append' v-clipboard:copy='code' v-clipboard:success='copyLink'
         plain type="primary" icon='el-icon-document') {{$t("common.copy")}}
-  el-col.mt-2(:span='12' :xs='24' v-html='code')
+  v-col.mt-2(:span='12' :xs='24' v-html='code')
 </template>
 <script>
 import { mapState } from 'vuex'
-import { Message } from 'element-ui'
 
 export default {
-  name: 'embedEvent',
+  name: 'EmbedEvent',
   props: ['event'],
   computed: {
     ...mapState(['settings']),
@@ -25,7 +24,7 @@ export default {
   },
   methods: {
     copyLink () {
-      Message({ message: this.$t('common.copied'), type: 'success', showClose: true })
+      this.$root.$message({ message: this.$t('common.copied'), type: 'success' })
     }
   }
 }

pages/settings.vue

@@ -13,7 +13,6 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-import { MessageBox } from 'element-ui'
 import url from 'url'
 
 export default {
@@ -56,9 +55,7 @@ export default {
     //   })
     // },
     remove_account () {
-      MessageBox.confirm(this.$t('settings.remove_account_confirm'), this.$t('common.confirm'), {
-        confirmButtonText: this.$t('common.ok'),
-        cancelButtonText: this.$t('common.cancel'),
+      this.$root.$confirm(this.$t('settings.remove_account_confirm'), this.$t('common.confirm'), {
         type: 'error'
       }).then(() => {
         this.$axios.$delete('/user')

pages/user_confirm/_code.vue

@@ -13,7 +13,6 @@
 
 </template>
 <script>
-import { Message } from 'element-ui'
 
 export default {
   name: 'Recover',
@@ -33,15 +32,13 @@ export default {
     async change_password () {
       try {
         await this.$axios.$post('/user/recover_password', { recover_code: this.code, password: this.new_password })
-        Message({
-          showClose: true,
+        this.$root.$message({
           type: 'success',
           message: this.$t('common.password_updated')
         })
         this.$router.replace('/login')
       } catch (e) {
-        Message({
-          showClose: true,
+        this.$root.$message({
           type: 'warning',
           message: e
         })

pages/user_confirm_pwd/_code.vue

@@ -14,7 +14,6 @@
 
 </template>
 <script>
-import { Message } from 'element-ui'
 
 export default {
   name: 'Recover',
@@ -34,15 +33,13 @@ export default {
     async change_password () {
       try {
         await this.$axios.$post('/user/recover_password', { recover_code: this.code, password: this.new_password })
-        Message({
-          showClose: true,
+        this.$root.$message({
           type: 'success',
           message: this.$t('common.password_updated')
         })
         this.$router.replace('/login')
       } catch (e) {
-        Message({
-          showClose: true,
+        this.$root.$message({
           type: 'warning',
           message: e
         })