From 337a0404d433dd40686a8e0dd98e3ccde8c528e6 Mon Sep 17 00:00:00 2001
From: les <lesion@autistici.org>
Date: Wed, 15 Jan 2020 23:55:19 +0100
Subject: [PATCH] [ux] cleaning event's page

---
 pages/event/_id.vue | 221 ++++++++++++++++++++++----------------------
 1 file changed, 113 insertions(+), 108 deletions(-)

diff --git a/pages/event/_id.vue b/pages/event/_id.vue
index aca13612..6a70161b 100644
--- a/pages/event/_id.vue
+++ b/pages/event/_id.vue
@@ -1,96 +1,79 @@
 <template lang="pug">
-  el-main#eventDetail
-
-    .head
-      nuxt-link.mr-2(to='/')
-        img#logo(src='/favicon.ico')
+  el-container#eventDetail
+    el-header
 
       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-row
-      el-col(:md='18')
-
-        //- 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
-        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-main
       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-menu.menu.mt-2
-          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')}}
-          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-row
+        el-col(:sm='18' :xs="24")
 
-          el-menu-item(@click='showEmbed=true') <i class='el-icon-copy-document'></i> {{$t('common.embed')}}
+          //- 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')
 
-          //- TODO (ics of recurrent events)
-          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')}}
+          pre(v-html='event.description')
+          el-tag.mr-1.mb-1(v-for='tag in event.tags'
+            size='mini' :key='tag') {{tag}}
+
+        //- info & actions for desktop
+        el-col.menu(:sm='6' :xs='24')
+          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')}}
+            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(@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
+              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')}}
+      hr
 
-      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')
+        div.float-right(v-if='!settings.hide_boosts')
+          small.mr-3 🔖 {{event.likes.length}}
+          small ✊ {{event.boost.length}}<br/>
 
-    //- resources from fediverse
-    #resources.mt-1(v-if='settings.enable_federation')
-      div.float-right(v-if='!settings.hide_boosts')
-        small.mr-3 🔖 {{event.likes.length}}
-        small ✊ {{event.boost.length}}<br/>
-
-      strong(v-if='settings.enable_resources') {{$tc('common.resources', event.resources.length)}} -
+        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')}} 
-        el-button(type='text' size='mini' @click='showFollowMe=true') @{{settings.instance_name}}@{{settings.baseurl|url2host}}
+        small {{$t('event.interact_with_me_at')}}
+          el-button(type='text' size='mini' @click='showFollowMe=true') @{{settings.instance_name}}@{{settings.baseurl|url2host}}
 
-      el-dialog.followDialog(:visible.sync='showFollowMe')
-        h4(slot='title') {{$t('common.follow_me_title')}}
-        FollowMe
+        el-dialog.followDialog(:visible.sync='showFollowMe')
+          h4(slot='title') {{$t('common.follow_me_title')}}
+          FollowMe
 
-      .card-header(v-if='settings.enable_resources' v-for='resource in event.resources' :key='resource.id' :class='{disabled: resource.hidden}')
-        a.float-right(:href='resource.data.url')
-          small {{resource.data.published|datetime}}
-        div.mt-1(v-html='resource_filter(resource.data.content)')
-        img(v-for='img in resource.data.media_attachments' :src='img.url')
-        el-dropdown
-          el-button(type="primary" icon="el-icon-arrow-down" size='mini') {{$t('common.moderation')}}
-          el-dropdown-menu(slot='dropdown')
-            el-dropdown-item(v-if='!resource.hidden' icon='el-icon-remove' @click.native='hideResource(resource, true)') {{$t('admin.hide_resource')}}
-            el-dropdown-item(v-else icon='el-icon-success' @click.native='hideResource(resource, false)') {{$t('admin.show_resource')}}
-            el-dropdown-item(icon='el-icon-delete' @click.native='deleteResource(resource)') {{$t('admin.delete_resource')}}
-            el-dropdown-item(icon='el-icon-lock' @click.native='blockUser(resource)') {{$t('admin.block_user')}}
+        .card-header(v-if='settings.enable_resources' v-for='resource in event.resources' :key='resource.id' :class='{disabled: resource.hidden}')
+          a.float-right(:href='resource.data.url')
+            small {{resource.data.published|datetime}}
+          div.mt-1(v-html='resource_filter(resource.data.content)')
+          img(v-for='img in resource.data.media_attachments' :src='img.url')
+          el-dropdown
+            el-button(type="primary" icon="el-icon-arrow-down" size='mini') {{$t('common.moderation')}}
+            el-dropdown-menu(slot='dropdown')
+              el-dropdown-item(v-if='!resource.hidden' icon='el-icon-remove' @click.native='hideResource(resource, true)') {{$t('admin.hide_resource')}}
+              el-dropdown-item(v-else icon='el-icon-success' @click.native='hideResource(resource, false)') {{$t('admin.show_resource')}}
+              el-dropdown-item(icon='el-icon-delete' @click.native='deleteResource(resource)') {{$t('admin.delete_resource')}}
+              el-dropdown-item(icon='el-icon-lock' @click.native='blockUser(resource)') {{$t('admin.block_user')}}
 
 </template>
 <script>
@@ -106,13 +89,30 @@ export default {
   name: 'Event',
   transition: null,
   components: { EventAdmin, EmbedEvent, FollowMe },
-  data() {
+  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,
       showFollowMe: false
     }
   },
-  head() {
+  head () {
     if (!this.event) {
       return {}
     }
@@ -188,27 +188,10 @@ 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']),
-    next() {
+    next () {
       let found = false
       const event = this.filteredEvents.find(e => {
         if (found) {
@@ -226,7 +209,7 @@ export default {
       }
       return event.id
     },
-    prev() {
+    prev () {
       let event = false
       this.filteredEvents.find(e => {
         if (
@@ -248,14 +231,14 @@ export default {
     imgPath () {
       return '/media/' + this.event.image_path
     },
-    thumbImgPath() {
+    thumbImgPath () {
       if (this.event.image_path) {
         return this.settings.baseurl + '/media/thumb/' + this.event.image_path
       } else {
         return this.settings.baseurl + '/logo.png'
       }
     },
-    is_mine() {
+    is_mine () {
       if (!this.$auth.user) {
         return false
       }
@@ -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('/')
@@ -297,7 +281,7 @@ export default {
     },
     async blockUser (resource) {
       await this.$axios.post('/instances/toggle_user_block', { user_id: resource.apUserApId })
-      Message({ message: this.$t('admin.user_blocked', {user: resource.apUserApId}), type: 'success', showClose: true })
+      Message({ message: this.$t('admin.user_blocked', { user: resource.apUserApId }), type: 'success', showClose: true })
     },
     async deleteResource (resource) {
       MessageBox.confirm(this.$t('admin.delete_resource_confirm'),
@@ -306,14 +290,14 @@ export default {
           cancelButtonText: this.$t('common.cancel'),
           type: 'error'
         }).then(async () => {
-          await this.$axios.delete(`/resources/${resource.id}`)
-          this.event.resources = this.event.resources.filter(r => r.id !== resources.id)
-        })
+        await this.$axios.delete(`/resources/${resource.id}`)
+        this.event.resources = this.event.resources.filter(r => r.id !== resource.id)
+      })
     },
-    copyLink() {
+    copyLink () {
       Message({ message: this.$t('common.copied'), type: 'success', showClose: true })
     },
-    resource_filter(value) {
+    resource_filter (value) {
       return value.replace(
         /<a.*href="([^">]+).*>(?:.(?!<\/a>))*.<\/a>/,
         (orig, url) => {
@@ -332,9 +316,21 @@ export default {
 </script>
 <style lang='less'>
 #eventDetail {
-  background-color: white;
-  margin-bottom: 30px;
-  padding-top: 0px;
+
+  #arrow {
+    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,
-      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial,
-      sans-serif !important;
+    font-family: inherit;
+    // font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen,
+      // 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>