refactoring with vuetify

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