[feat] better event ux

pages/event/_id.vue

@@ -1,46 +1,53 @@
 <template lang="pug">
-  el-card#eventDetail
+  el-main#eventDetail
     //- close button
-    nuxt-link.float-right(to='/')
+    //- nuxt-link.float-right(to='/')
-      el-button(circle  icon='el-icon-close' type='danger' size='small' plain)
+    //-   el-button(circle  icon='el-icon-close' type='danger' size='mini' plain)
 
-    div(v-if='!event')
+    nuxt-link.mr-3(to='/')
-      h5 {{$t('event.not_found')}}
+      img#logo(src='/favicon.ico')
 
-    div(v-else)
+    span.title {{event.title}}
-      //- title
+
-      h5.text-center {{event.title}}
+    div.float-right
-      div.nextprev
+      nuxt-link.mr-1(:to='`/event/${prev}`')
-        nuxt-link(v-if='prev' :to='`/event/${prev}`')
+        el-button(circle plain size='small' icon='el-icon-arrow-left' :disabled='!prev')
-          el-button( type='success' size='mini')
+      nuxt-link(:to='`/event/${next}`')
-            v-icon(name='chevron-left')
+        el-button(circle plain size='small' :disabled='!next' icon='el-icon-arrow-right')
-        nuxt-link.float-right(v-if='next' :to='`/event/${next}`')
-          el-button(type='success' size='mini')
-            v-icon(name='chevron-right')
 
     //- image
-      img.main(:src='imgPath' v-if='event.image_path')
+    el-row.mt-3
-
+      el-col(:sm='18')
-      .info
+        img.main.mb-3(:src='imgPath' v-if='event.image_path')
-        div {{event|when}}
-        div {{event.place.name}} - {{event.place.address}}
-
-      //- description and tags
-      div(v-if='event.description || event.tags')
         pre(v-html='$options.filters.linkify(event.description)')
-        el-tag.mr-1(v-for='tag in event.tags'
+        el-tag.mr-1.mb-1(v-for='tag in event.tags'
           size='mini' :key='tag.tag') {{tag.tag}}
 
-      //- show hide, confirm, delete, edit buttons when allowed
+      el-col(:sm='6')
-      div(v-if='mine')
+        el-menu.menu
-        hr
+          el-divider {{$t('common.when')}}
-        el-button(v-if='event.is_visible' size='mini' plain type='warning' @click.prevents='toggle') {{$t('common.hide')}}
+            //- When(:event='event')
-        el-button(v-else plain type='success' size='mini' @click.prevents='toggle') {{$t('common.confirm')}}
+          p {{event|when}}
-        el-button(plain type='danger' size='mini' @click.prevent='remove') {{$t('common.remove')}}
+          p {{event|to}}
-        el-button(plain type='primary' size='mini' @click='$router.replace(`/add/${event.id}`)') {{$t('common.edit')}}
+          el-divider {{$t('common.where')}}
+          p {{event.place.name}}
+          p {{event.place.address}}
+          el-divider {{$t('common.actions')}}
+          el-menu-item(v-clipboard:success='copyLink'
+            v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') <i class='el-icon-paperclip'></i> {{$t('common.copy_link')}}
+          el-menu-item
+            a.d-block(:href='`${settings.baseurl}/api/event/${event.id}.ics`') {{$t('common.add_to_calendar')}}
+          //- el-button(plain size='mini' type='primary'
+          //-   icon='el-icon-document' ) {{$t('common.send_via_mail')}}
+          el-menu-item
+            div(@click.prevents='toggle') {{$t(event.is_visible?'common.hide':'common.confirm')}}
+          el-menu-item
+            div(@click.prevent='remove') {{$t('common.remove')}}
+          el-menu-item(@click='$router.replace(`/add/${event.id}`)') {{$t('common.edit')}}
 
+    hr
     //- comments from fediverse
-      #comments.card-body(v-if='settings.enable_federation')
+    #comments(v-if='settings.enable_federation')
       small.float-right 🔖 {{event.likes.length}}
       small.float-right.mr-3 ✊ {{event.boost.length}}<br/>
       strong {{$tc('common.comments', event.comments.length)}} - 
@@ -56,11 +63,18 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
 import { MessageBox } from 'element-ui'
+import When from '../../components/When'
 import moment from 'dayjs'
 
 export default {
   name: 'Event',
   transition: null,
+  data () {
+    return {
+      copied: false
+    }
+  },
+  components: { When },
   // Watch for $route.query.page to call
   // Component methods (asyncData, fetch, validate, layout, etc.)
   // watchQuery: ['id'],
@@ -171,6 +185,10 @@ export default {
   },
   methods: {
     ...mapActions(['delEvent']),
+    copyLink () {
+      this.copied=true
+      setTimeout(() => this.copied=false, 3000)
+    },
     comment_filter (value) {
       return value.replace(/<a.*href="([^">]+).*>(?:.(?!\<\/a\>))*.<\/a>/, (orig, url) => {
         // get extension
@@ -196,6 +214,7 @@ export default {
       }
     },
     async toggle () {
+      console.error(this)
       try {
         if (this.event.is_visible) {
           await this.$axios.$get(`/event/unconfirm/${this.id}`)
@@ -214,9 +233,20 @@ export default {
 <style lang='less'>
 
 #eventDetail {
-  max-width: 1000px;
+  
-  border-radius: 0px;
+  .menu {
-  margin: 0 auto;
+    border-right: none;
+    border-left: 1px solid #e6e6e6;
+    p {
+      margin-left: 10px;
+    }
+  }
+
+  .title {
+    font-size: 1.6rem;
+    color: #404246;
+    line-height: 1;
+  }
 
   pre {
     color: #404246;
@@ -224,19 +254,6 @@ export default {
     font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif !important;
   }
 
-  h5 {
-    font-size: 2em;
-    font-weight: 600;
-    min-height: 40px;
-  }
-
-  .info {
-    margin: 10px;
-    font-size: 1.3em;
-    font-weight: 600;
-    text-align: center;
-  }
-
   img {
     max-height: 89vh;
     object-fit: contain;
@@ -268,7 +285,8 @@ export default {
 
 @media only screen and (max-width: 768px) {
   #eventDetail {
-    font-size: 12px;
+    font-size: 13px;
+    padding: 0 5px;
   }
 }