media improvement

pages/add/MediaInput.vue

@@ -15,7 +15,7 @@
 
             v-col.col-12.col-sm-4
               p {{$t('event.choose_focal_point')}}
-              img.img.d-none.d-sm-block(v-if='mediaPreview'
+              img.mediaPreview.d-none.d-sm-block(v-if='mediaPreview'
                 :src='mediaPreview' :style="{ 'object-position': position }")
 
               v-textarea.mt-4(type='text'
@@ -35,7 +35,7 @@
       v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
       v-btn(text color='error' @click='remove') {{$t('common.remove')}}
     div(v-if='mediaPreview')
-      img.img.col-12.ml-3(:src='mediaPreview' :style="{ 'object-position': savedPosition }")
+      img.mediaPreview.col-12.ml-3(:src='mediaPreview' :style="{ 'object-position': savedPosition }")
       span.float-right {{event.media[0].name}}
     v-file-input(
       v-else
@@ -53,7 +53,7 @@ export default {
   name: 'MediaInput',
   props: {
     value: { type: Object, default: () => ({ image: null }) },
-    event: { type: Object, default: () => {} }
+    event: { type: Object, default: () => ({}) }
   },
   data () {
     return {
@@ -142,7 +142,7 @@ export default {
   cursor: crosshair;
 }
 
-.img {
+.mediaPreview {
   width: 100%;
   object-fit: cover;
   object-position: top;

pages/add/WhereInput.vue

@@ -1,34 +1,34 @@
 <template lang="pug">
-  v-row
-    v-col(cols=12 md=6)
-      v-combobox(ref='place'
-        :rules="[$validators.required('common.where')]"
-        :label="$t('common.where')"
-        :hint="$t('event.where_description')"
-        :search-input.sync="placeName"
-        :prepend-icon='mdiMapMarker'
-        persistent-hint
-        :value="value.name"
-        :items="filteredPlaces"
-        no-filter
-        item-text='name'
-        @change='selectPlace')
-        template(v-slot:item="{ item, attrs, on }")
-          v-list-item(v-bind='attrs' v-on='on')
-            v-list-item-content(two-line v-if='item.create')
-              v-list-item-title <v-icon color='primary' v-text='mdiPlus' :aria-label='add'></v-icon> {{item.name}}
-            v-list-item-content(two-line v-else)
-              v-list-item-title(v-text='item.name')
-              v-list-item-subtitle(v-text='item.address')
+v-row
+  v-col(cols=12 md=6)
+    v-combobox(ref='place'
+      :rules="[$validators.required('common.where')]"
+      :label="$t('common.where')"
+      :hint="$t('event.where_description')"
+      :search-input.sync="placeName"
+      :prepend-icon='mdiMapMarker'
+      persistent-hint
+      :value="value.name"
+      :items="filteredPlaces"
+      no-filter
+      item-text='name'
+      @change='selectPlace')
+      template(v-slot:item="{ item, attrs, on }")
+        v-list-item(v-bind='attrs' v-on='on')
+          v-list-item-content(two-line v-if='item.create')
+            v-list-item-title <v-icon color='primary' v-text='mdiPlus' :aria-label='$t("common.add")'></v-icon> {{item.name}}
+          v-list-item-content(two-line v-else)
+            v-list-item-title(v-text='item.name')
+            v-list-item-subtitle(v-text='item.address')
 
-    v-col(cols=12 md=6)
-      v-text-field(ref='address'
-        :prepend-icon='mdiMap'
-        :disabled='disableAddress'
-        :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
-        :label="$t('common.address')"
-        @change="changeAddress"
-        :value="value.address")
+  v-col(cols=12 md=6)
+    v-text-field(ref='address'
+      :prepend-icon='mdiMap'
+      :disabled='disableAddress'
+      :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
+      :label="$t('common.address')"
+      @change="changeAddress"
+      :value="value.address")
 
 </template>
 <script>
@@ -61,8 +61,7 @@ export default {
           if (tmpName === placeName) { nameMatch = true }
           return true
         }
-        if (tmpAddress.includes(placeName)) { return true }
-        return false
+        return tmpAddress.includes(placeName)
       })
       if (!nameMatch) {
         matches.unshift({ create: true, name: this.placeName })

pages/event/_slug.vue

@@ -11,13 +11,7 @@ v-container#event.pa-0.pa-sm-2
       v-row
         v-col.col-12.col-lg-8
           //- fake image to use u-featured in h-event microformat
-          img.u-featured(v-show='false' v-if='hasMedia' :src='event | mediaURL' itemprop="image")
-          v-img.main_image.mb-3(
-            contain
-            :alt='event | mediaURL("alt")'
-            :src='event | mediaURL'
-            :lazy-src='event | mediaURL("thumb")'
-            v-if='hasMedia')
+          MyPicture(v-if='hasMedia' :event='event')
           .p-description.text-body-1.pa-3.rounded(v-if='!hasMedia && event.description' itemprop='description' v-html='event.description')
 
         v-col.col-12.col-lg-4
@@ -55,6 +49,9 @@ v-container#event.pa-0.pa-sm-2
               v-btn.ml-2(large icon :title="$t('common.add_to_calendar')" color='primary' :aria-label="$t('common.add_to_calendar')"
                 :href='`/api/event/${event.slug || event.id}.ics`')
                 v-icon(v-text='mdiCalendarExport')
+              v-btn.ml-2(v-if='hasMedia' large icon :title="$t('event.download_flyer')" color='primary' :aria-label="$t('event.download_flyer')"
+                :href='event | mediaURL')
+                v-icon(v-text='mdiFileDownloadOutline')                
 
       .p-description.text-body-1.pa-3.rounded(v-if='hasMedia && event.description' itemprop='description' v-html='event.description')
 
@@ -133,10 +130,11 @@ import { mapState } from 'vuex'
 import get from 'lodash/get'
 import moment from 'dayjs'
 import clipboard from '../../assets/clipboard'
+import MyPicture from '~/components/MyPicture'
 const htmlToText = require('html-to-text')
 
 import { mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiClose,
-  mdiEye, mdiEyeOff, mdiDelete, mdiRepeat, mdiLock,
+  mdiEye, mdiEyeOff, mdiDelete, mdiRepeat, mdiLock, mdiFileDownloadOutline,
   mdiCalendarExport, mdiCalendar, mdiContentCopy, mdiMapMarker } from '@mdi/js'
 
 export default {
@@ -145,8 +143,9 @@ export default {
   components: {
     EventAdmin: () => import(/* webpackChunkName: "event" */'./eventAdmin'),
     EmbedEvent: () => import(/* webpackChunkName: "event" */'./embedEvent'),
+    MyPicture
   },
-  async asyncData ({ $axios, params, error, store }) {
+  async asyncData ({ $axios, params, error }) {
     try {
       const event = await $axios.$get(`/event/${params.slug}`)
       return { event }
@@ -156,7 +155,7 @@ export default {
   },
   data () {
     return {
-      mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiCalendarExport, mdiCalendar,
+      mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiCalendarExport, mdiCalendar, mdiFileDownloadOutline,
       mdiMapMarker, mdiContentCopy, mdiClose, mdiDelete, mdiEye, mdiEyeOff, mdiRepeat, mdiLock,
       currentAttachment: 0,
       event: {},
@@ -330,11 +329,4 @@ export default {
     }
   }
 }
-</script>
-<style scoped>
-.main_image {
-  margin: 0 auto;
-  border-radius: 5px;
-  transition: max-height 0.2s;
-}
-</style>
+</script>