mirror of
https://framagit.org/les/gancio.git
synced 2025-01-31 16:42:22 +01:00
Home restyle
This commit is contained in:
les
parent
a49b9c504b
commit
0f9d19f6f5
5 changed files with 117 additions and 119 deletions
|
|
@ -1,26 +1,25 @@
|
|||
<template lang="pug">
|
||||
nuxt-link.event(:to='`/event/${event.id}`' :class='{ withImg: event.image_path }')
|
||||
.card.event.mt-1.text-white(body-style='padding: 0px;')
|
||||
nuxt-link(:to='`/event/${event.id}`')
|
||||
img(v-if='showImage && event.image_path' :src='`/media/thumb/${event.image_path}`')
|
||||
.float-right
|
||||
i.text-danger.el-icon-refresh(v-if='event.parentId')
|
||||
.badge.text-info(v-if='settings.enable_resources && event.resources && event.resources.length') {{event.resources.length}}
|
||||
.title {{event.title}}
|
||||
|
||||
//- image
|
||||
el-image(v-if='showImage && event.image_path' lazy :src='`/media/thumb/${event.image_path}`')
|
||||
.card-body
|
||||
div
|
||||
i.el-icon-date
|
||||
span {{event|when}}
|
||||
el-button.mt-1.bg-dark.text-warning.float-right(plain size='mini' round type='text' icon='el-icon-location-outline' @click='addPlace') {{event.place.name}}
|
||||
//- date / place
|
||||
.description.mt-3(v-if='!event.image_path || !event.tags.length' v-html='description')
|
||||
|
||||
.event-info
|
||||
.content-info
|
||||
|
||||
//- title
|
||||
h2 {{event.title}}
|
||||
|
||||
//- date / place
|
||||
.date
|
||||
div <v-icon name='clock'/> {{event|when('home')}}
|
||||
div <v-icon name='map-marker-alt' /> {{event.place.name}}
|
||||
|
||||
ul.tags(v-if='showTags && event.tags')
|
||||
li(v-for='tag in event.tags' :key='tag') {{tag}}
|
||||
li(v-if='settings.enable_federation && event.resources && event.resources.length') <u>{{$tc('common.n_resources', event.resources.length)}}</u>
|
||||
.card-footer(v-if='event.tags.length')
|
||||
el-button.ml-1.bg-dark(type='text' plain round size='mini' v-for='tag in event.tags' :key='tag' @click='addTag(tag)') {{tag}}
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -35,26 +34,74 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['settings'])
|
||||
...mapState(['settings', 'filters']),
|
||||
description () {
|
||||
return this.event.description.slice(0, 500)
|
||||
},
|
||||
show_footer () {
|
||||
return (this.event.tags.length || this.event.resources.length)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSearchTags', 'setSearchPlaces']),
|
||||
addTag (tag) {
|
||||
if (this.filters.tags.includes(tag)) {
|
||||
this.setSearchTags(this.filters.tags.filter(t => t !== tag))
|
||||
} else {
|
||||
this.setSearchTags(this.filters.tags.concat([tag]))
|
||||
}
|
||||
},
|
||||
addPlace () {
|
||||
const place = this.event.place.id
|
||||
if (this.filters.places.includes(place)) {
|
||||
this.setSearchPlaces(this.filters.places.filter(p => p !== place))
|
||||
} else {
|
||||
this.setSearchPlaces(this.filters.places.concat(place))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='less'>
|
||||
|
||||
@media only screen and (min-width: 574px) {
|
||||
.event {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.event {
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 320px;
|
||||
max-width: 450px;
|
||||
flex-grow: 1;
|
||||
margin: .2em;
|
||||
background-color: #202020;
|
||||
|
||||
// height: 100%;
|
||||
|
||||
&:hover {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
.title {
|
||||
border-bottom: 1px solid #888;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
margin-right: 1rem;
|
||||
border-bottom: 1px solid #333;
|
||||
transition: border-color .5s;
|
||||
font-size: 1.2em;
|
||||
max-height: 3em;
|
||||
overflow: hidden;
|
||||
color: #fea;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
max-height: 4.5em;
|
||||
overflow: hidden;
|
||||
padding: .25rem 0.5rem;
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
.description {
|
||||
color: #999;
|
||||
font-size: 0.8em;
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -63,60 +110,5 @@ export default {
|
|||
object-fit: cover;
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
.event-info {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: #111214;
|
||||
|
||||
}
|
||||
|
||||
.content-info {
|
||||
padding: 0.8em 1em;
|
||||
|
||||
h2 {
|
||||
color: rgb(174, 255, 174);
|
||||
font-size: 16px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
max-height: 92px;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
font-size: 15px;
|
||||
padding: 1px;
|
||||
margin-bottom: 0;
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
background: #1B1F21;
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
margin: 1px;
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,8 @@
|
|||
.col
|
||||
Search(past-filter recurrent-filter)
|
||||
|
||||
.row.m-0
|
||||
.p-0.col-sm-6.col-lg-4.col-xl-4(v-for='event in events' :key='event.id + event.start_datetime')
|
||||
a.d-block.d-sm-none(:id='event.newDay' v-if='event.newDay')
|
||||
el-divider {{event.start_datetime|day}}
|
||||
Event(
|
||||
:id='event.start_datetime'
|
||||
:event='event'
|
||||
)
|
||||
#events
|
||||
Event(v-for='event in events' :key='event.id' :event='event')
|
||||
|
||||
</template>
|
||||
|
||||
|
|
@ -53,3 +47,10 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='less'>
|
||||
#events {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,11 @@
|
|||
span.float-left {{ item.label }}
|
||||
i.float-right.el-icon-place(v-if='item.type==="place"')
|
||||
i.float-right.el-icon-collection-tag(v-if='item.type==="tag"')
|
||||
br
|
||||
el-tag.mr-1(type='success' v-for='f in filter' size='small'
|
||||
disable-transitions closable :key='f.type + f.id'
|
||||
@close='removeFilter(f)') {{f.label}}
|
||||
#filters
|
||||
el-button.mr-1.bg-dark(type='text' round plain v-for='t in filters.tags' size='mini'
|
||||
:key='t' @click='removeTag(t)') {{t}}
|
||||
el-button.mr-1.bg-dark.text-warning(type='text' round plain v-for='p in selectedPlaces' size='mini'
|
||||
:key='p' @click='removePlace(p.id)') {{p.name}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,10 +41,12 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
...mapState(['tags', 'places', 'filters', 'settings']),
|
||||
// TOFIX: optimize
|
||||
selectedPlaces () {
|
||||
return this.places.filter(p => this.filters.places.includes(p.id))
|
||||
},
|
||||
keywords () {
|
||||
const tags = this.tags.map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
|
||||
const places = this.places.map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
|
||||
const tags = this.tags.filter(t => !this.filters.tags.includes(t.tag)).map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
|
||||
const places = this.places.filter(p => !this.filters.places.includes(p.id)).map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
|
||||
const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
|
||||
return keywords
|
||||
},
|
||||
|
|
@ -62,12 +65,11 @@ export default {
|
|||
methods: {
|
||||
...mapActions(['setSearchPlaces', 'setSearchTags',
|
||||
'showPastEvents', 'showRecurrentEvents', 'updateEvent']),
|
||||
removeFilter (item) {
|
||||
if (item.type === 'tag') {
|
||||
this.setSearchTags(this.filters.tags.filter(t => t.id !== item.id))
|
||||
} else {
|
||||
this.setSearchPlaces(this.filters.places.filter(p => p.id !== item.id))
|
||||
}
|
||||
removeTag (tag) {
|
||||
this.setSearchTags(this.filters.tags.filter(t => t !== tag))
|
||||
},
|
||||
removePlace (place) {
|
||||
this.setSearchPlaces(this.filters.places.filter(p => p !== place))
|
||||
},
|
||||
querySearch (queryString, cb) {
|
||||
const ret = this.keywords
|
||||
|
|
@ -78,9 +80,9 @@ export default {
|
|||
},
|
||||
addFilter (item) {
|
||||
if (item.type === 'tag') {
|
||||
this.setSearchTags(this.filters.tags.concat(item))
|
||||
this.setSearchTags(this.filters.tags.concat(item.id))
|
||||
} else {
|
||||
this.setSearchPlaces(this.filters.places.concat(item))
|
||||
this.setSearchPlaces(this.filters.places.concat(item.id))
|
||||
}
|
||||
this.search = ''
|
||||
}
|
||||
|
|
@ -93,7 +95,11 @@ export default {
|
|||
border-radius: 0px;
|
||||
border-bottom: 2px solid lightgray;
|
||||
color: white;
|
||||
background-color: #333;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
#filters {
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.el-switch__label {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
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')}}
|
||||
|
|
@ -23,10 +24,9 @@
|
|||
el-icon(name='loading')
|
||||
|
||||
pre(v-html='event.description')
|
||||
el-tag.mr-1.mb-1(v-for='tag in event.tags'
|
||||
size='mini' :key='tag') {{tag}}
|
||||
el-button.ml-1.text-primary(plain round size='mini' v-for='tag in event.tags' :key='tag') {{tag}}
|
||||
|
||||
//- info & actions for desktop
|
||||
//- info & actions
|
||||
el-col.menu(:sm='6' :xs='24')
|
||||
el-menu.menu.mt-2(router)
|
||||
p <i class='el-icon-date'></i> <b>{{event|when}}</b> <br/><small>{{event|to}}</small>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
p.p-2
|
||||
el-button(type='text' @click='showFollowMe=true') {{$t('event.interact_with_me')}}
|
||||
span(v-if='settings.enable_resources') - {{$tc('common.resources', event.resources.length)}}
|
||||
span(v-if='settings.enable_resources && event.resources.length') - {{$tc('common.n_resources', event.resources.length)}}
|
||||
|
||||
el-dialog.followDialog(:visible.sync='showFollowMe' destroy-on-close)
|
||||
h4(slot='title') {{$t('common.follow_me_title')}}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@ import moment from 'moment-timezone'
|
|||
export default ({ app, store }) => {
|
||||
// set timezone to instance_timezone!!
|
||||
// to show local time relative to event's place
|
||||
// not where in the worlds I'm looking at the page from
|
||||
// not where in the world I'm looking at the page from
|
||||
moment.tz.setDefault(store.state.settings.instance_timezone)
|
||||
moment.locale(store.state.locale)
|
||||
|
||||
// replace links with anchors
|
||||
// TODO: remove fb tracking id
|
||||
// TODO: remove fb tracking id?
|
||||
Vue.filter('linkify', value => value.replace(/(https?:\/\/([^\s]+))/g, '<a href="$1">$2</a>'))
|
||||
Vue.filter('url2host', url => url.match(/^https?:\/\/(.[^/:]+)/i)[1])
|
||||
Vue.filter('datetime', value => moment(value).locale(store.state.locale).format('ddd, D MMMM HH:mm'))
|
||||
|
|
@ -19,8 +20,6 @@ export default ({ app, store }) => {
|
|||
Vue.filter('to', value => moment().to(value.start_datetime * 1000))
|
||||
// format event start/end datetime based on page
|
||||
Vue.filter('when', (event, where) => {
|
||||
moment.locale(store.state.locale)
|
||||
|
||||
const start = moment.unix(event.start_datetime)
|
||||
const end = moment.unix(event.end_datetime)
|
||||
|
||||
|
|
@ -46,7 +45,7 @@ export default ({ app, store }) => {
|
|||
|
||||
// normal event
|
||||
if (event.end_datetime && event.end_datetime !== event.start_datetime) {
|
||||
return `${start.format('ddd, D MMMM (HH:mm-')}${end.format('HH:mm)')}`
|
||||
return `${start.format('ddd, D MMMM HH:mm')}`
|
||||
}
|
||||
return start.format('dddd, D MMMM (HH:mm)')
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue