mirror of
https://framagit.org/les/gancio.git
synced 2025-01-31 16:42:22 +01:00
[ux] cleaning event's page
This commit is contained in:
parent
1128cf1d30
commit
337a0404d4
1 changed files with 113 additions and 108 deletions
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue