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

improve chunks, mobile, WC, lazyloading, prefetch

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/clipboard.js
View File

@@ -12,7 +12,7 @@ export default {
document.execCommand('copy') document.execCommand('copy')
document.body.removeChild(el) document.body.removeChild(el)
} }
this.$root.$message(msg) this.$root.$message(msg, { color: 'success'})
} }
} }
} }

61
assets/editor.less
View File

@@ -1,61 +0,0 @@
.editor {
position: relative;
overflow-y: auto;
padding-top: 1.7em;
scrollbar-width: thin;
&.with-border {
border: 1px solid #ddd;
border-radius: 5px;
}
.content {
padding: 0px 5px 0px 5px;
flex: 1;
scrollbar-width: thin;
overflow-y: auto;
}
.menububble {
position: absolute;
display: flex;
overflow: hidden;
opacity: 0;
z-index: 1;
background: #dddddd;
transform: translateX(-50%);
border-radius: 3px;
padding: 0.07rem;
transition: opacity 0.2s, visibility 0.2s, left .2s, bottom .2s;
visibility: hidden;
&.is-active {
opacity: 1;
visibility: visible;
}
input {
padding: 0;
margin: 1px;
display: block;
border: 0;
color: #444;
font-size: .8em;
border-radius: 3px;
line-height: 100%;
transition: width .2s;
padding-left: 5px;
flex-grow: 1;
}
.fa-icon {
width: auto;
font-size: 10px;
height: 1.4em; /* or any other relative font sizes */
/* You would have to include the following two lines to make this work in Safari */
// max-width: 100%;
max-height: 100%;
}
}
}

56
assets/event.less
View File

@@ -1,56 +0,0 @@
// .event {
// width: 320px;
// max-width: 450px;
// flex-grow: 1;
// margin: .2em;
// background-color: #202020;
// overflow: hidden;
// 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: white;
// font-weight: bold;
// }
// .card-footer {
// max-height: 4.5em;
// overflow: hidden;
// padding: .25rem 0.5rem;
// line-height: 1.8rem;
// min-height: 2.2rem;
// }
// .card-body {
// overflow: hidden;
// }
// .description {
// color: #999;
// font-size: 0.8em;
// overflow: hidden;
// max-height: 100%;
// }
// .el-image { width: 100% }
// img {
// width: 100%;
// max-height: 250px;
// object-fit: cover;
// object-position: top;
// }
// }

136
assets/variables.scss
View File

@@ -5,138 +5,4 @@
// If you need to extend Vuetify SASS lists // If you need to extend Vuetify SASS lists
// $material-light: ( cards: blue ); // $material-light: ( cards: blue );
@import '~vuetify/src/styles/styles.sass';
@import '~vuetify/src/styles/styles.sass';
html, body {
scrollbar-width: thin;
overflow: auto !important;
scrollbar-color: #FF4511 #111;
font-family: sans-serif;
}
li {
margin-left: 10px;
}
.v-dialog .theme--dark.v-card {
background-color: #434343;
}
.v-application .p-description.text-body-1 {
letter-spacing: normal !important;
}
#home {
max-width: 1400px;
padding: 0px;
overflow: hidden;
}
#events {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#calh {
height: 292px;
}
.container {
max-width: 1400px;
}
.v-dialog {
width: 600px;
max-width: 800px;
&.v-dialog--fullscreen {
max-width: 100%;
}
}
.theme--dark.v-list {
background-color: #333;
}
.v-autocomplete__content.v-menu__content {
scrollbar-width: thin;
scrollbar-color: #FF4511 #111;
}
// EVENT
.event {
display: flex;
position: relative;
flex-direction: column;
width: 330px;
max-width: 500px !important;
flex-grow: 1;
margin-top: .4em;
margin-right: .4em;
transition: all .5s;
overflow: hidden;
.title {
display: -webkit-box;
overflow: hidden;
margin: 0.5rem 1rem 0.5rem 1rem;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 1.1em !important;
line-height: 1.2em !important;
}
.body {
flex: 1 1 auto;
}
.img {
width: 100%;
max-height: 250px;
min-height: 160px;
object-fit: cover;
object-position: top;
aspect-ratio: 1.7778;
}
.place {
max-width: 100%;
span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
a {
text-decoration: none;
}
}
.vc-past {
opacity: 0.4;
}
#event {
max-width: 1200px;
}
.tags .v-chip .v-chip__content {
max-width: 120px;
white-space: nowrap;
overflow: hidden;
display: block;
}
.cursorPointer {
cursor: pointer;
}
pre {
white-space: break-spaces;
font-size: 13px;
}

66
components/Event.vue
View File

@@ -6,9 +6,9 @@
.title.p-name(itemprop="name") {{event.title}} .title.p-name(itemprop="name") {{event.title}}
v-card-text.body.pt-0.pb-0 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')}} .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}} .d-none(itemprop='location.address') {{event.place.address}}
v-card-actions.pt-0.actions.justify-space-between 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 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}} :key='tag' outlined color='primary' @click="$emit('tagclick', tag)") {{tag}}
v-menu(offset-y) client-only
template(v-slot:activator="{on}") v-menu(offset-y)
v-btn.align-self-end(icon v-on='on' color='primary' alt='more') template(v-slot:activator="{on}")
v-icon(v-text='mdiDotsVertical') v-btn.align-self-end(icon v-on='on' color='primary' alt='more')
v-list(dense) v-icon(v-text='mdiDotsVertical')
v-list-item-group v-list(dense)
v-list-item(@click='clipboard(`${settings.baseurl}/event/${event.slug || event.id}`)') v-list-item-group
v-list-item-icon v-list-item(@click='clipboard(`${settings.baseurl}/event/${event.slug || event.id}`)')
v-icon(v-text='mdiContentCopy') v-list-item-icon
v-list-item-content v-icon(v-text='mdiContentCopy')
v-list-item-title {{$t('common.copy_link')}} v-list-item-content
v-list-item(:href='`/api/event/${event.slug || event.id}.ics`') v-list-item-title {{$t('common.copy_link')}}
v-list-item-icon v-list-item(:href='`/api/event/${event.slug || event.id}.ics`')
v-icon(v-text='mdiCalendarExport') v-list-item-icon
v-list-item-content v-icon(v-text='mdiCalendarExport')
v-list-item-title {{$t('common.add_to_calendar')}} v-list-item-content
v-list-item(v-if='is_mine' :to='`/add/${event.id}`') v-list-item-title {{$t('common.add_to_calendar')}}
v-list-item-icon v-list-item(v-if='is_mine' :to='`/add/${event.id}`')
v-icon(v-text='mdiPencil') v-list-item-icon
v-list-item-content v-icon(v-text='mdiPencil')
v-list-item-title {{$t('common.edit')}} v-list-item-content
v-list-item(v-if='is_mine' @click='remove(false)') v-list-item-title {{$t('common.edit')}}
v-list-item-icon v-list-item(v-if='is_mine' @click='remove(false)')
v-icon(color='error' v-text='mdiDeleteForever') v-list-item-icon
v-list-item-content v-icon(color='error' v-text='mdiDeleteForever')
v-list-item-title {{$t('common.remove')}} 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> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import clipboard from '../assets/clipboard' 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 { export default {
data () { data () {
return { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport, mdiDeleteForever } return { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport,
mdiDeleteForever, mdiMapMarker, mdiCalendar }
}, },
props: { props: {
event: { type: Object, default: () => ({}) }, event: { type: Object, default: () => ({}) },

8
components/Snackbar.vue
View File

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

14
nuxt.config.js
View File

@@ -1,6 +1,7 @@
const config = require('./server/config.js') const config = require('./server/config.js')
const minifyTheme = require('minify-css-string').default const minifyTheme = require('minify-css-string').default
const isDev = (process.env.NODE_ENV !== 'production')
module.exports = { module.exports = {
telemetry: false, telemetry: false,
modern: (process.env.NODE_ENV === 'production') && 'client', modern: (process.env.NODE_ENV === 'production') && 'client',
@@ -12,9 +13,11 @@ module.exports = {
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' } { name: 'viewport', content: 'width=device-width, initial-scale=1' }
], ],
link: [{ rel: 'icon', type: 'image/png', href: '/logo.png' }] link: [{ rel: 'icon', type: 'image/png', href: '/logo.png' }],
link: [{ rel: 'preload', type: 'image/png', href: '/logo.png', as: 'media' }],
script: [{ src: '/gancio-events.es.js', async: true, body: true }],
}, },
dev: (process.env.NODE_ENV !== 'production'), dev: isDev,
server: config.server, server: config.server,
@@ -24,6 +27,8 @@ module.exports = {
} }
}, },
css: ['./assets/style.less'],
/* /*
** Customize the progress-bar component ** Customize the progress-bar component
*/ */
@@ -106,10 +111,7 @@ module.exports = {
} }
} }
}, },
defaultAssets: { defaultAssets: false
icons: false
}
},
build: { build: {
corejs: 3, corejs: 3,
cache: true, cache: true,

19
pages/Admin.vue
View File

@@ -49,18 +49,19 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Users from '../components/admin/Users'
import Events from '../components/admin/Events'
import Places from '../components/admin/Places'
import Settings from '../components/admin/Settings'
import Federation from '../components/admin/Federation'
import Moderation from '../components/admin/Moderation'
import Announcement from '../components/admin/Announcement'
import Theme from '../components/admin/Theme'
export default { export default {
name: 'Admin', name: 'Admin',
components: { Users, Events, Places, Settings, Federation, Moderation, Announcement, Theme }, components: {
Users: () => import(/* webpackChunkName: "admin" */'../components/admin/Users'),
Events: () => import(/* webpackChunkName: "admin" */'../components/admin/Events'),
Places: () => import(/* webpackChunkName: "admin" */'../components/admin/Places'),
Settings: () => import(/* webpackChunkName: "admin" */'../components/admin/Settings'),
Federation: () => import(/* webpackChunkName: "admin" */'../components/admin/Federation.vue'),
Moderation: () => import(/* webpackChunkName: "admin" */'../components/admin/Moderation.vue'),
Announcement: () => import(/* webpackChunkName: "admin" */'../components/admin/Announcement.vue'),
Theme: () => import(/* webpackChunkName: "admin" */'../components/admin/Theme.vue')
},
middleware: ['auth'], middleware: ['auth'],
async asyncData ({ $axios, params, store }) { async asyncData ({ $axios, params, store }) {
try { try {

7
pages/Login.vue
View File

@@ -1,7 +1,7 @@
<template lang='pug'> <template lang='pug'>
v-container v-container.pa-0.pa-md-3
v-row.mt-5(align='center' justify='center') v-row.mt-md-5.ma-0(align='center' justify='center')
v-col(cols='12' md="6" lg="5" xl="4") v-col.pa-0.pa-md-3(cols='12' md="6" lg="5" xl="4")
v-form(v-model='valid' ref='form' lazy-validation @submit.prevent='submit') v-form(v-model='valid' ref='form' lazy-validation @submit.prevent='submit')
v-card v-card
v-card-title {{$t('common.login')}} v-card-title {{$t('common.login')}}
@@ -57,7 +57,6 @@ export default {
methods: { methods: {
async forgot () { async forgot () {
if (!this.email) { if (!this.email) {
// this.$root.$message({ message: this.$t('login.insert_email'), color: 'error' })
this.$refs.email.focus() this.$refs.email.focus()
return return
} }

10
pages/Register.vue
View File

@@ -1,7 +1,7 @@
<template lang='pug'> <template lang='pug'>
v-container v-container.pa-0.pa-md-3
v-row.mt-5(align='center' justify='center') v-row.mt-md-5.ma-0(align='center' justify='center')
v-col(cols='12' md="6" lg="5" xl="4") v-col.pa-0.pa-md-3(cols='12' md="6" lg="5" xl="4")
v-card v-card
v-card-title {{$t('common.register')}} v-card-title {{$t('common.register')}}
@@ -28,17 +28,19 @@ v-container
v-btn(@click='register' v-btn(@click='register'
:disabled='!valid || loading' :loading='loading' :disabled='!valid || loading' :loading='loading'
color='primary') {{$t('common.send')}} color='primary') {{$t('common.send')}}
v-icon mdi-chevron-right v-icon(v-text='mdiChevronRight')
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import get from 'lodash/get' import get from 'lodash/get'
import { mdiChevronRight } from '@mdi/js'
export default { export default {
name: 'Register', name: 'Register',
data () { data () {
return { return {
mdiChevronRight,
loading: false, loading: false,
user: {}, user: {},
valid: true valid: true

11
pages/add/_edit.vue
View File

@@ -51,7 +51,7 @@
v-combobox(v-model='event.tags' v-combobox(v-model='event.tags'
:prepend-icon="mdiTagMultiple" :prepend-icon="mdiTagMultiple"
chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:delimiters="[',', ' ']" :delimiters="[',', ';']"
:items="tags.map(t => t.tag)" :items="tags.map(t => t.tag)"
:label="$t('common.tags')") :label="$t('common.tags')")
@@ -69,7 +69,14 @@ import { mdiFileImport, mdiFormatTitle, mdiTagMultiple } from '@mdi/js'
export default { export default {
name: 'NewEvent', name: 'NewEvent',
components: { List, Editor, ImportDialog, MediaInput, WhereInput, DateInput }, components: {
List: () => import(/* webpackChunkName: "add" */'@/components/List'),
Editor: () => import(/* webpackChunkName: "add" */'@/components/Editor'),
ImportDialog: () => import(/* webpackChunkName: "add" */'./ImportDialog.vue'),
MediaInput: () => import(/* webpackChunkName: "add" */'./MediaInput.vue'),
WhereInput: () => import(/* webpackChunkName: "add" */'./WhereInput.vue'),
DateInput: () => import(/* webpackChunkName: "add" */'./DateInput.vue')
},
validate ({ store }) { validate ({ store }) {
return (store.state.auth.loggedIn || store.state.settings.allow_anon_event) return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
}, },

7
pages/event/_slug.vue
View File

@@ -132,7 +132,6 @@ v-container#event.pa-0.pa-sm-2
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import EventAdmin from './eventAdmin'
import get from 'lodash/get' import get from 'lodash/get'
import moment from 'dayjs' import moment from 'dayjs'
import clipboard from '../../assets/clipboard' import clipboard from '../../assets/clipboard'
@@ -145,7 +144,10 @@ import { mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiClose,
export default { export default {
name: 'Event', name: 'Event',
mixins: [clipboard], mixins: [clipboard],
components: { EventAdmin, EmbedEvent }, components: {
EventAdmin: () => import(/* webpackChunkName: "event" */'./eventAdmin'),
EmbedEvent: () => import(/* webpackChunkName: "event" */'./embedEvent'),
},
async asyncData ({ $axios, params, error, store }) { async asyncData ({ $axios, params, error, store }) {
try { try {
const event = await $axios.$get(`/event/${params.slug}`) const event = await $axios.$get(`/event/${params.slug}`)
@@ -184,7 +186,6 @@ export default {
return { return {
title: `${this.settings.title} - ${this.event.title}`, title: `${this.settings.title} - ${this.event.title}`,
script: [{ src: '/gancio-events.es.js', async: true, body: true }],
meta: [ meta: [
// hid is used as unique identifier. Do not use `vmid` for it as it will not work // hid is used as unique identifier. Do not use `vmid` for it as it will not work
{ {

1
pages/export.vue
View File

@@ -120,7 +120,6 @@ export default {
head () { head () {
return { return {
title: `${this.settings.title} - ${this.$t('common.export')}`, title: `${this.settings.title} - ${this.$t('common.export')}`,
script: [{ src: '/gancio-events.es.js', async: true, body: true }],
} }
}, },
computed: { computed: {