[ux] cleaning event's page

This commit is contained in:
les 2020-01-15 23:55:19 +01:00
parent 1128cf1d30
commit 337a0404d4

View file

@ -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>