encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[feat] new event page layout!

Browse Source
This commit is contained in:
les
2019-10-22 01:12:36 +02:00
parent bf1c12d1da
commit 59d2d667f1
2 changed files with 42 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/style.less
View File

@@ -38,11 +38,8 @@ html, body {
.el-card { .el-card {
max-width: 1000px; max-width: 1000px;
border-radius: 0px; border-radius: 0px;
margin: 30px auto; margin: 0 auto;
} padding: 10px;
#admin.el-card {
max-width: 870px;
} }
.el-dialog { .el-dialog {
@@ -82,17 +79,13 @@ pre {
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
html { html {
font-size: 10px; font-size: 13px;
} }
.el-card { .el-main {
margin-top: 0px !important; margin-top: 0px !important;
border-radius: 0px; border-radius: 0px;
padding: 0px; padding: 5px;
}
.el-main{
padding: 5px 0px;
} }
.el-menu-item { .el-menu-item {

115
pages/event/_id.vue
View File

@@ -1,10 +1,7 @@
<template lang="pug"> <template lang="pug">
el-main#eventDetail el-main#eventDetail
//- close button
//- nuxt-link.float-right(to='/')
//- el-button(circle icon='el-icon-close' type='danger' size='mini' plain)
nuxt-link.mr-3(to='/') nuxt-link.mr-2(to='/')
img#logo(src='/favicon.ico') img#logo(src='/favicon.ico')
span.title {{event.title}} span.title {{event.title}}
@@ -17,21 +14,23 @@
//- image //- image
el-row.mt-3 el-row.mt-3
el-col(:sm='18') el-col(:md='18')
img.main.mb-3(:src='imgPath' v-if='event.image_path') img.main.mb-3(:src='imgPath' v-if='event.image_path')
div.d-block.d-lg-none
span <b>{{event|when}}</b> - {{event|to}}<br/>
span <b>{{event.place.name}}</b> - {{event.place.address}}
hr
pre(v-html='$options.filters.linkify(event.description)') pre(v-html='$options.filters.linkify(event.description)')
el-tag.mr-1.mb-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}} size='mini' :key='tag.tag') {{tag.tag}}
el-col(:sm='6') el-col.d-none.d-lg-block(:md='6')
el-menu.menu el-menu.menu
el-divider {{$t('common.when')}} //- el-divider {{$t('common.when')}}
//- When(:event='event') //- When(:event='event')
p {{event|when}} el-divider {{$t('common.info')}}
p {{event|to}} p <b>{{event|when}}</b> - {{event|to}}
el-divider {{$t('common.where')}} p <b>{{event.place.name}}</b> - {{event.place.address}}
p {{event.place.name}}
p {{event.place.address}}
el-divider {{$t('common.actions')}} el-divider {{$t('common.actions')}}
el-menu-item(v-clipboard:success='copyLink' 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')}} v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') <i class='el-icon-paperclip'></i> {{$t('common.copy_link')}}
@@ -39,13 +38,13 @@
a.d-block(:href='`${settings.baseurl}/api/event/${event.id}.ics`') {{$t('common.add_to_calendar')}} a.d-block(:href='`${settings.baseurl}/api/event/${event.id}.ics`') {{$t('common.add_to_calendar')}}
//- el-button(plain size='mini' type='primary' //- el-button(plain size='mini' type='primary'
//- icon='el-icon-document' ) {{$t('common.send_via_mail')}} //- icon='el-icon-document' ) {{$t('common.send_via_mail')}}
el-menu-item EventAdmin(v-if='is_mine' :event='event')
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 hr
.d-block.d-lg-none
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`') {{$t('common.add_to_calendar')}}
//- comments from fediverse //- comments from fediverse
#comments(v-if='settings.enable_federation') #comments(v-if='settings.enable_federation')
div.float-right(v-if='!settings.disable_gamification') div.float-right(v-if='!settings.disable_gamification')
@@ -65,7 +64,7 @@
<script> <script>
import { mapState, mapActions, mapGetters } from 'vuex' import { mapState, mapActions, mapGetters } from 'vuex'
import { MessageBox } from 'element-ui' import { MessageBox } from 'element-ui'
import When from '../../components/When' import EventAdmin from './eventAdmin'
import moment from 'dayjs' import moment from 'dayjs'
export default { export default {
@@ -76,18 +75,7 @@ export default {
copied: false copied: false
} }
}, },
components: { When }, components: { EventAdmin },
// Watch for $route.query.page to call
// Component methods (asyncData, fetch, validate, layout, etc.)
// watchQuery: ['id'],
// Key for <NuxtChild> (transitions)
// key: to => to.fullPath,
// Called to know which transition to apply
// transition(to, from) {
// if (!from) return 'slide-left'
// return +to.params.id < +from.params.id ? 'slide-right' : 'slide-left'
// },
head () { head () {
if (!this.event) { return {} } if (!this.event) { return {} }
const tags_feed = this.event.tags.map(tag => ({ rel: 'alternate', type: 'application/rss+xml', const tags_feed = this.event.tags.map(tag => ({ rel: 'alternate', type: 'application/rss+xml',
@@ -137,15 +125,15 @@ export default {
error({ statusCode: 404, message: 'Event not found' }) error({ statusCode: 404, message: 'Event not found' })
} }
}, },
async fetch ({ $axios, store }) { // async fetch ({ $axios, store }) {
try { // try {
const now = new Date() // // const now = new Date()
const events = await $axios.$get(`/event/${now.getMonth()}/${now.getFullYear()}`) // // const events = await $axios.$get(`/event/${now.getMonth()}/${now.getFullYear()}`)
return store.commit('setEvents', events) // // return store.commit('setEvents', events)
} catch (e) { // } catch (e) {
console.error(e) // console.error(e)
} // }
}, // },
computed: { computed: {
...mapGetters(['filteredEvents']), ...mapGetters(['filteredEvents']),
...mapState(['settings']), ...mapState(['settings']),
@@ -180,7 +168,7 @@ export default {
imgPath () { imgPath () {
return this.event.image_path && '/media/' + this.event.image_path return this.event.image_path && '/media/' + this.event.image_path
}, },
mine () { is_mine () {
if (!this.$auth.user) { return false } if (!this.$auth.user) { return false }
return this.event.userId === this.$auth.user.id || this.$auth.user.is_admin return this.event.userId === this.$auth.user.id || this.$auth.user.is_admin
} }
@@ -202,33 +190,6 @@ export default {
} }
}) })
}, },
async remove () {
try {
await MessageBox.confirm(this.$t('event.remove_confirmation'), this.$t('common.confirm'), {
confirmButtonText: this.$t('common.ok'),
cancelButtonText: this.$t('common.cancel'),
type: 'error' })
await this.$axios.delete(`/user/event/${this.id}`)
this.delEvent(Number(this.id))
this.$router.replace('/')
} catch (e) {
console.error(e)
}
},
async toggle () {
console.error(this)
try {
if (this.event.is_visible) {
await this.$axios.$get(`/event/unconfirm/${this.id}`)
this.event.is_visible = false
} else {
await this.$axios.$get(`/event/confirm/${this.id}`)
this.event.is_visible = true
}
} catch (e) {
console.error(e)
}
}
} }
} }
</script> </script>
@@ -245,6 +206,9 @@ export default {
} }
.title { .title {
max-width: 80%;
max-height: 0.1rem;
overflow: hidden;
font-size: 1.6rem; font-size: 1.6rem;
color: #404246; color: #404246;
line-height: 1; line-height: 1;
@@ -257,7 +221,7 @@ export default {
} }
img { img {
max-height: 89vh; max-height: 88vh;
object-fit: contain; object-fit: contain;
&.main { &.main {
width: 100%; width: 100%;
@@ -272,23 +236,18 @@ export default {
visibility: visible !important; visibility: visible !important;
} }
} }
.avatar {
width: auto;
height: 40px;
border-radius: 5px;
}
.nextprev { .nextprev {
font-size: 10px; font-size: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
#eventDetail { #eventDetail {
font-size: 13px; .menu {
padding: 0 5px; border: 0px;
}
} }
} }