improve chunks, mobile, WC, lazyloading, prefetch

2022-02-08 22:54:47 +01:00
parent 32e48ed64d
commit ba44e53d28
13 changed files with 82 additions and 316 deletions
--- a/assets/clipboard.js
+++ b/assets/clipboard.js
@@ -12,7 +12,7 @@ export default {
        document.execCommand('copy')
        document.body.removeChild(el)
      }
-      this.$root.$message(msg)
+      this.$root.$message(msg, { color: 'success'})
    }
  }
 }
--- a/assets/editor.less
+++ b/assets/editor.less
@@ -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%;
-    }
-
-  }
-}
--- a/assets/event.less
+++ b/assets/event.less
@@ -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;
-//   }
-// }
--- a/assets/variables.scss
+++ b/assets/variables.scss
@@ -5,138 +5,4 @@

 // If you need to extend Vuetify SASS lists
 // $material-light: ( cards: blue );
-
-@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;
-}
+@import '~vuetify/src/styles/styles.sass';
--- a/components/Event.vue
+++ b/components/Event.vue
@@ -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: () => ({}) },
--- a/components/Snackbar.vue
+++ b/components/Snackbar.vue
@@ -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)
    }
  }
 }
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,6 +1,7 @@
 const config = require('./server/config.js')
 const minifyTheme = require('minify-css-string').default

+const isDev = (process.env.NODE_ENV !== 'production')
 module.exports = {
  telemetry: false,
  modern: (process.env.NODE_ENV === 'production') && 'client',
@@ -12,9 +13,11 @@ module.exports = {
      { charset: 'utf-8' },
      { 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,


@@ -24,6 +27,8 @@ module.exports = {
    }
  },

+  css: ['./assets/style.less'],
+
  /*
   ** Customize the progress-bar component
   */
@@ -106,10 +111,7 @@ module.exports = {
        }
      }      
    },
-    defaultAssets: {
-      icons: false
-    }    
-  },
+    defaultAssets: false
  build: {
    corejs: 3,
    cache: true,
--- a/pages/Admin.vue
+++ b/pages/Admin.vue
@@ -49,18 +49,19 @@
 </template>
 <script>
 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 {
  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'],
  async asyncData ({ $axios, params, store }) {
    try {
--- a/pages/Login.vue
+++ b/pages/Login.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
-  v-container
-    v-row.mt-5(align='center' justify='center')
-      v-col(cols='12' md="6" lg="5" xl="4")
+  v-container.pa-0.pa-md-3
+    v-row.mt-md-5.ma-0(align='center' justify='center')
+      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-card
            v-card-title {{$t('common.login')}}
@@ -57,7 +57,6 @@ export default {
  methods: {
    async forgot () {
      if (!this.email) {
-      //   this.$root.$message({ message: this.$t('login.insert_email'), color: 'error' })
        this.$refs.email.focus()
        return
      }
--- a/pages/Register.vue
+++ b/pages/Register.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
-v-container
-  v-row.mt-5(align='center' justify='center')
-    v-col(cols='12' md="6" lg="5" xl="4")
+v-container.pa-0.pa-md-3
+  v-row.mt-md-5.ma-0(align='center' justify='center')
+    v-col.pa-0.pa-md-3(cols='12' md="6" lg="5" xl="4")

      v-card
        v-card-title {{$t('common.register')}}
@@ -28,17 +28,19 @@ v-container
          v-btn(@click='register'
            :disabled='!valid || loading' :loading='loading'
            color='primary') {{$t('common.send')}}
-            v-icon mdi-chevron-right
+            v-icon(v-text='mdiChevronRight')
 </template>

 <script>
 import { mapState } from 'vuex'
 import get from 'lodash/get'
+import { mdiChevronRight } from '@mdi/js'

 export default {
  name: 'Register',
  data () {
    return {
+      mdiChevronRight,
      loading: false,
      user: {},
      valid: true
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -51,7 +51,7 @@
                v-combobox(v-model='event.tags'
                  :prepend-icon="mdiTagMultiple"
                  chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
-                  :delimiters="[',', ' ']"
+                  :delimiters="[',', ';']"
                  :items="tags.map(t => t.tag)"
                  :label="$t('common.tags')")

@@ -69,7 +69,14 @@ import { mdiFileImport, mdiFormatTitle, mdiTagMultiple } from '@mdi/js'

 export default {
  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 }) {
    return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
  },
--- a/pages/event/_slug.vue
+++ b/pages/event/_slug.vue
@@ -132,7 +132,6 @@ v-container#event.pa-0.pa-sm-2
 </template>
 <script>
 import { mapState } from 'vuex'
-import EventAdmin from './eventAdmin'
 import get from 'lodash/get'
 import moment from 'dayjs'
 import clipboard from '../../assets/clipboard'
@@ -145,7 +144,10 @@ import { mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiClose,
 export default {
  name: 'Event',
  mixins: [clipboard],
-  components: { EventAdmin, EmbedEvent },
+  components: {
+    EventAdmin: () => import(/* webpackChunkName: "event" */'./eventAdmin'),
+    EmbedEvent: () => import(/* webpackChunkName: "event" */'./embedEvent'),
+  },
  async asyncData ({ $axios, params, error, store }) {
    try {
      const event = await $axios.$get(`/event/${params.slug}`)
@@ -184,7 +186,6 @@ export default {

    return {
      title: `${this.settings.title} - ${this.event.title}`,
-      script: [{ src: '/gancio-events.es.js', async: true, body: true }],
      meta: [
        // hid is used as unique identifier. Do not use `vmid` for it as it will not work
        {
--- a/pages/export.vue
+++ b/pages/export.vue
@@ -120,7 +120,6 @@ export default {
  head () {
    return {
      title: `${this.settings.title} - ${this.$t('common.export')}`,
-      script: [{ src: '/gancio-events.es.js', async: true, body: true }],
    }
  },
  computed: {