Template:Thessaloniki/event-card.vue

<template>

       <q-card
           inline
           @click.native="opened=true"
           @mouseover.native="hover = true"
           @mouseout.native="hover = false"
           class="cursor-pointer"
           :class="computedClasses"
           :style="computedStyles"
       >
           <q-card-media>
               <slot name="media">
                   <img class="responsive-image" src="" alt="default event image">
               </slot>
           </q-card-media>
           <q-card-title>
               Template:Title
           </q-card-title>
           <q-card-main>
               <slot name="content">
                   Default Card Content
               </slot>
           </q-card-main>
       </q-card>

       <q-modal v-model="opened" :content-css="{minWidth: '90vw', minHeight: '80vh'}" minimized>
           <q-modal-layout :class="[nightMode ? 'night-bg' : 'day-bg']">
               <q-toolbar slot="header">
                   <q-toolbar-title>
                       Template:Title
                   </q-toolbar-title>
                   <q-btn flat round icon="close" @click="opened = false">
                   </q-btn>
               </q-toolbar>

                   <slot name="modal-content">
                   </slot>

           </q-modal-layout>
       </q-modal>

</template>

<script> (function (Vue, template) {

   Vue.component('event-card', {
       template,
       props: {
           title: {
               required: true,
               type: String
           }
       },
       computed: {
           computedClasses () {
               let classes = []
               if (this.shadow > 1 && Quasar.plugins.Platform.is.desktop) {
                   classes.push(`shadow-${Math.floor(this.shadow)}`)
               }
               if (this.nightMode) {
                   classes.push('night-bg text-light')
               } else {
                   classes.push('day-bg text-dark')
               }
               return classes
           },
           computedStyles () {
               let styles = {}
               if (Quasar.plugins.Platform.is.desktop) {
                   styles.transform = `scale(${this.scale})`
               }
               return styles
           },
           ...Vuex.mapState(['nightMode'])
       },
       watch: {
           hover(hoverState) {
               if (hoverState) {
                   TweenLite.to(this.$data, 0.6, {
                       shadow: 24,
                       scale: 1.1
                   })
               } else {
                   TweenLite.to(this.$data, 0.6, {
                       shadow: 0,
                       scale: 1
                   })
               }
           }
       },
       data () {
           return {
               opened: false,
               hover: false,
               shadow: 0,
               scale: 1
           }
       }
   })

})(Vue, template) </script>

<style>

</style>