[ux] cleaning event's page

pages/event/_id.vue

@@ -1,42 +1,34 @@
 <template lang="pug">
-  el-main#eventDetail
+  el-container#eventDetail
-
+    el-header
-    .head
-      nuxt-link.mr-2(to='/')
-        img#logo(src='/favicon.ico')
 
       span.title {{event.title}}
 
-      div.float-right
+      #arrow
         nuxt-link.mr-1(:to='`/event/${prev}`')
           el-button(circle plain size='small' icon='el-icon-arrow-left' :disabled='!prev')
         nuxt-link(:to='`/event/${next}`')
           el-button(circle plain size='small' :disabled='!next' icon='el-icon-arrow-right')
+    el-main
+      el-dialog.embedDialog(:visible.sync='showEmbed')
+        h4(slot='title') {{$t('common.embed_title')}}
+        EmbedEvent(:event='event')
 
       el-row
-      el-col(:md='18')
+        el-col(:sm='18' :xs="24")
 
           //- event image
           el-image.main_image.mb-3(:src='imgPath' v-if='event.image_path' fit='contain')
             div.loading(slot='placeholder')
               el-icon(name='loading')
 
-        //- info for mobile screen
+          pre(v-html='event.description')
-        div.d-block.d-lg-none
-          span <b>{{event|when}}</b>, <small>{{event|to}}</small><br/>
-          span <b>{{event.place.name}}</b> - {{event.place.address}}
-          hr
-        pre(v-html='$options.filters.linkify(event.description)')
           el-tag.mr-1.mb-1(v-for='tag in event.tags'
             size='mini' :key='tag') {{tag}}
 
-      el-dialog.embedDialog(:visible.sync='showEmbed')
-        h4(slot='title') {{$t('common.embed_title')}}
-        EmbedEvent(:event='event')
-
         //- info & actions for desktop
-      el-col.d-none.d-lg-block(:md='6')
+        el-col.menu(:sm='6' :xs='24')
-        el-menu.menu.mt-2
+          el-menu.menu.mt-2(router)
             p <i class='el-icon-time'></i>  <b>{{event|when}}</b> <br/><small>{{event|to}}</small>
             p <i class='el-icon-map-location'></i>  <b>{{event.place.name}}</b> - {{event.place.address}}
             el-divider {{$t('common.actions')}}
@@ -47,23 +39,12 @@
             el-menu-item(@click='showEmbed=true') <i class='el-icon-copy-document'></i> {{$t('common.embed')}}
 
             //- TODO (ics of recurrent events)
-          el-menu-item(v-if='!event.recurrent')
+            //- el-menu-item(v-if='!event.recurrent')
-            a.d-block(:href='`${settings.baseurl}/api/event/${event.id}.ics`') <i class='el-icon-date'></i> {{$t('common.add_to_calendar')}}
+            el-menu-item
+              a(:href='`${settings.baseurl}/api/event/${event.id}.ics`') <i class='el-icon-date'></i> {{$t('common.add_to_calendar')}}
           EventAdmin(v-if='is_mine' :event='event')
 
       hr
-    .d-block.d-lg-none
-      el-dropdown
-        el-button.mr-1.mb-1(type='' icon='el-icon-arrow-down' size='mini') {{$t('common.admin')}}
-        el-dropdown-menu(slot='dropdown')
-          el-dropdown-item(@click.native='toggle') {{$t(event.is_visible?'common.hide':'common.confirm')}}
-          el-dropdown-item(@click.native='$router.replace(`/add/${event.id}`)') {{$t('common.edit')}}
-          el-dropdown-item(@click.native='remove') {{$t('common.remove')}}
-
-      el-button(plain size='mini' type='primary' v-clipboard:success='copyLink'
-        v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') <i class='el-icon-paperclip'></i> {{$t('common.copy_link')}}
-      a.el-button.el-button--success.el-button--mini.is-plain(role='button' plain size='mini' type='success'
-        :href='`${settings.baseurl}/api/event/${event.id}.ics`') <i class='el-icon-date'></i> {{$t('common.add_to_calendar')}}
 
       //- resources from fediverse
       #resources.mt-1(v-if='settings.enable_federation')
@@ -72,6 +53,8 @@
           small ✊ {{event.boost.length}}<br/>
 
         strong(v-if='settings.enable_resources') {{$tc('common.resources', event.resources.length)}} -
+        small {{$t('event.interact_with_me_at')}}
+      small {{$t('event.interact_with_me_at')}} 
         small {{$t('event.interact_with_me_at')}}
           el-button(type='text' size='mini' @click='showFollowMe=true') @{{settings.instance_name}}@{{settings.baseurl|url2host}}
 
@@ -106,6 +89,23 @@ export default {
   name: 'Event',
   transition: null,
   components: { EventAdmin, EmbedEvent, FollowMe },
+  async asyncData ({ $axios, params, error, store }) {
+    try {
+      const [id, start_datetime] = params.id.split('_')
+      const event = await $axios.$get(`/event/${id}`)
+      event.start_datetime = start_datetime
+        ? Number(start_datetime)
+        : event.start_datetime
+      // const now = new Date()
+      // const events = await $axios.$get(
+        // `/event/${now.getMonth()}/${now.getFullYear()}`
+      // )
+      // store.commit('setEvents', events)
+      return { event, id: Number(id) }
+    } catch (e) {
+      error({ statusCode: 404, message: 'Event not found' })
+    }
+  },
   data () {
     return {
       showEmbed: false,
@@ -188,23 +188,6 @@ export default {
       ]
     }
   },
-  async asyncData({ $axios, params, error, store }) {
-    try {
-      const [id, start_datetime] = params.id.split('_')
-      const event = await $axios.$get(`/event/${id}`)
-      event.start_datetime = start_datetime
-        ? Number(start_datetime)
-        : event.start_datetime
-      const now = new Date()
-      const events = await $axios.$get(
-        `/event/${now.getMonth()}/${now.getFullYear()}`
-      )
-      store.commit('setEvents', events)
-      return { event, id: Number(id) }
-    } catch (e) {
-      error({ statusCode: 404, message: 'Event not found' })
-    }
-  },
   computed: {
     ...mapGetters(['filteredEvents']),
     ...mapState(['settings']),
@@ -270,7 +253,8 @@ export default {
         await MessageBox.confirm(this.$t('event.remove_confirmation'), this.$t('common.confirm'), {
           confirmButtonText: this.$t('common.ok'),
           cancelButtonText: this.$t('common.cancel'),
-          type: 'error' })
+          type: 'error'
+        })
         await this.$axios.delete(`/user/event/${this.event.id}`)
         this.delEvent(Number(this.event.id))
         this.$router.replace('/')
@@ -307,7 +291,7 @@ export default {
           type: 'error'
         }).then(async () => {
         await this.$axios.delete(`/resources/${resource.id}`)
-          this.event.resources = this.event.resources.filter(r => r.id !== resources.id)
+        this.event.resources = this.event.resources.filter(r => r.id !== resource.id)
       })
     },
     copyLink () {
@@ -332,9 +316,21 @@ export default {
 </script>
 <style lang='less'>
 #eventDetail {
-  background-color: white;
+
-  margin-bottom: 30px;
+  #arrow {
-  padding-top: 0px;
+    position: absolute;
+    top: 1em;
+    right: 1em;
+  }
+
+  .el-header {
+    position: sticky;
+    padding-top: 1em;
+    top: 0px;
+    border-bottom: 1px solid lightgray;
+    z-index: 1;
+    background: #fff;
+  }
 
   .embedDialog {
     .el-dialog {
@@ -377,14 +373,18 @@ export default {
     font-size: 1.6rem;
     color: #404246;
     line-height: 1;
+    padding-right: 40px;
   }
 
   pre {
+    white-space: pre-line;
+    word-break: break-word;
     color: #404246;
     font-size: 1em;
-    font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen,
+    font-family: inherit;
-      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial,
+    // font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen,
-      sans-serif !important;
+      // Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial,
+      // sans-serif !important;
   }
 
   .main_image {
@@ -436,6 +436,11 @@ export default {
     .menu {
       border: 0px;
     }
+
+    .title {
+      font-size: 1em;
+      font-weight: bold;
+    }
   }
 }
 </style>