improve chunks, mobile, WC, lazyloading, prefetch

This commit is contained in:
lesion
2022-02-08 22:54:47 +01:00
parent 32e48ed64d
commit ba44e53d28
13 changed files with 82 additions and 316 deletions

View File

@@ -6,9 +6,9 @@
.title.p-name(itemprop="name") {{event.title}}
v-card-text.body.pt-0.pb-0
time.dt-start.subtitle-1(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")' itemprop="startDate" :content="event.start_datetime|unixFormat('YYYY-MM-DDTHH:mm')") <v-icon>mdi-calendar</v-icon> {{ event|when }}
time.dt-start.subtitle-1(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")' itemprop="startDate" :content="event.start_datetime|unixFormat('YYYY-MM-DDTHH:mm')") <v-icon v-text='mdiCalendar'></v-icon> {{ event|when }}
.d-none.dt-end(itemprop="endDate" :content="event.end_datetime|unixFormat('YYYY-MM-DDTHH:mm')") {{event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}}
a.place.d-block.p-location.pl-0(text color='primary' @click="$emit('placeclick', event.place.id)" itemprop="location" :content="event.place.name") <v-icon>mdi-map-marker</v-icon> {{event.place.name}}
a.place.d-block.p-location.pl-0(text color='primary' @click="$emit('placeclick', event.place.id)" itemprop="location" :content="event.place.name") <v-icon v-text='mdiMapMarker'></v-icon> {{event.place.name}}
.d-none(itemprop='location.address') {{event.place.address}}
v-card-actions.pt-0.actions.justify-space-between
@@ -16,41 +16,47 @@
v-chip.ml-1.mt-1(v-for='tag in event.tags.slice(0,6)' small
:key='tag' outlined color='primary' @click="$emit('tagclick', tag)") {{tag}}
v-menu(offset-y)
template(v-slot:activator="{on}")
v-btn.align-self-end(icon v-on='on' color='primary' alt='more')
v-icon(v-text='mdiDotsVertical')
v-list(dense)
v-list-item-group
v-list-item(@click='clipboard(`${settings.baseurl}/event/${event.slug || event.id}`)')
v-list-item-icon
v-icon(v-text='mdiContentCopy')
v-list-item-content
v-list-item-title {{$t('common.copy_link')}}
v-list-item(:href='`/api/event/${event.slug || event.id}.ics`')
v-list-item-icon
v-icon(v-text='mdiCalendarExport')
v-list-item-content
v-list-item-title {{$t('common.add_to_calendar')}}
v-list-item(v-if='is_mine' :to='`/add/${event.id}`')
v-list-item-icon
v-icon(v-text='mdiPencil')
v-list-item-content
v-list-item-title {{$t('common.edit')}}
v-list-item(v-if='is_mine' @click='remove(false)')
v-list-item-icon
v-icon(color='error' v-text='mdiDeleteForever')
v-list-item-content
v-list-item-title {{$t('common.remove')}}
client-only
v-menu(offset-y)
template(v-slot:activator="{on}")
v-btn.align-self-end(icon v-on='on' color='primary' alt='more')
v-icon(v-text='mdiDotsVertical')
v-list(dense)
v-list-item-group
v-list-item(@click='clipboard(`${settings.baseurl}/event/${event.slug || event.id}`)')
v-list-item-icon
v-icon(v-text='mdiContentCopy')
v-list-item-content
v-list-item-title {{$t('common.copy_link')}}
v-list-item(:href='`/api/event/${event.slug || event.id}.ics`')
v-list-item-icon
v-icon(v-text='mdiCalendarExport')
v-list-item-content
v-list-item-title {{$t('common.add_to_calendar')}}
v-list-item(v-if='is_mine' :to='`/add/${event.id}`')
v-list-item-icon
v-icon(v-text='mdiPencil')
v-list-item-content
v-list-item-title {{$t('common.edit')}}
v-list-item(v-if='is_mine' @click='remove(false)')
v-list-item-icon
v-icon(color='error' v-text='mdiDeleteForever')
v-list-item-content
v-list-item-title {{$t('common.remove')}}
template(#placeholder)
v-btn.align-self-end(icon color='primary' alt='more')
v-icon(v-text='mdiDotsVertical')
</template>
<script>
import { mapState } from 'vuex'
import clipboard from '../assets/clipboard'
import { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport, mdiDeleteForever } from '@mdi/js'
import { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy,
mdiCalendarExport, mdiDeleteForever, mdiCalendar, mdiMapMarker } from '@mdi/js'
export default {
data () {
return { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport, mdiDeleteForever }
return { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport,
mdiDeleteForever, mdiMapMarker, mdiCalendar }
},
props: {
event: { type: Object, default: () => ({}) },

View File

@@ -14,13 +14,13 @@
</template>
<script>
import { mdiAlert, mdiCloseCircle } from '@mdi/js'
import { mdiAlert, mdiCloseCircle, mdiInformation } from '@mdi/js'
export default {
data () {
return {
mdiAlert, mdiCloseCircle,
icon: mdiAlert,
mdiAlert, mdiAlert, mdiCloseCircle, mdiInformation,
icon: mdiInformation,
color: 'secondary',
bottom: true,
top: false,
@@ -36,7 +36,7 @@ export default {
this.active = true
this.message = this.$t(message, opts)
this.color = opts.color || 'secondary'
this.icon = opts.icon || mdiAlert
this.icon = opts.icon || (this.color === 'success' ? mdiInformation : mdiAlert)
}
}
}