- Fix CImgTitle positioning

- CPreloadImage
2019-09-19 22:56:19 +02:00
parent 04f4a83d6c
commit 3459f00a3b
18 changed files with 208 additions and 86 deletions
--- a/src/components/BannerCookies/BannerCookies.ts
+++ b/src/components/BannerCookies/BannerCookies.ts
@@ -12,7 +12,7 @@ import { Prop } from 'vue-property-decorator'
 })

 export default class BannerCookies extends Vue {
-  public $t
+  public $t: any
  @Prop({ required: true }) public urlInfo: string

  public elementId = 'id'
--- a/src/components/BannerCookies/BannerCookies.vue
+++ b/src/components/BannerCookies/BannerCookies.vue
@@ -3,7 +3,7 @@
        <div class="q-pa-md q-gutter-sm">
            <transition appear name="slide-up" mode="out-in" :duration="2000">
                <q-banner class="bg-primary text-white" transition-show="jump-down">
-                    Usiamo i Cookie per una migliore prestazione web.
+                    {{$t('cookies')}}
                    <template v-slot:action>
                        <q-btn v-if="disableDecline === false" flat color="white" label="Declina"
                               @click="decline"></q-btn>
--- a/src/components/CImgText/CImgText.scss
+++ b/src/components/CImgText/CImgText.scss
@@ -33,24 +33,28 @@

@media (max-width: 1600px) {
  .myclimg {
-    height: 550px !important;
+    max-height: 550px !important;
  }
 }

@media (max-width: 1000px) {
  .myclimg {
-    height: 450px !important;
+    max-height: 450px !important;
  }
 }

@media (max-width: 800px) {
  .myclimg {
-    height: 400px !important;
+    max-height: 400px !important;
  }
 }


-@media (max-width: 718px) {
+@media (max-width: 400px) {
+  .myclimg {
+    // height: inherit !important;
+  }
+
  // PER VERSIONE MOBILE
  .landing > section.padding_testo {
    padding-top: 0.5rem;
--- a/src/components/CTitle/CTitle.ts
+++ b/src/components/CTitle/CTitle.ts
@@ -12,6 +12,7 @@ import { Screen } from 'quasar'
 export default class CTitle extends Vue {
  @Prop({ required: false, default: '' }) public imgbackground: string
  @Prop({ required: false, default: '' }) public imghead: string
+  @Prop({ required: false, default: '' }) public sizes: string
  @Prop({ required: true }) public headtitle: string

  get tools() {
--- a/src/components/CTitle/CTitle.vue
+++ b/src/components/CTitle/CTitle.vue
@@ -1,7 +1,7 @@
 <template>
    <div>
        <q-img v-if="imgbackground" :src="imgbackground"
-               :style="tools.styles_imgtitle()">
+               :style="tools.styles_imgtitle(sizes)">

            <div class="absolute-bottom text-body1 text-center">
                <h2 class="titletext">{{headtitle}}</h2>
--- a/src/components/Footer/Footer.ts
+++ b/src/components/Footer/Footer.ts
@@ -27,6 +27,10 @@ export default class Footer extends Vue {
    return tools
  }

+  get mythis() {
+    return this
+  }
+
  get TelegramSupport() {
    return db_data.TELEGRAM_SUPPORT
  }
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
@@ -10,12 +10,13 @@
                    <!--</span>-->


-                    <FormNewsletter v-if="static_data.SHOW_NEWSLETTER" :idwebsite="tools.appid()" :locale="tools.getLocale()">
+                    <FormNewsletter v-if="static_data.SHOW_NEWSLETTER" :idwebsite="tools.appid()"
+                                    :locale="tools.getLocale()">
                    </FormNewsletter>

-                    <div class="q-mt-xs copyrights">
-                        <p class="mycontacts_text" v-html="$t('homepage.copyrights')"></p>
-                    </div>
+                    <!--<div class="q-mt-xs copyrights">-->
+                    <!--<p class="mycontacts_text" v-html="$t('homepage.copyrights')"></p>-->
+                    <!--</div>-->

                </div>
                <div class="col-12 col-sm-4">
@@ -28,13 +29,13 @@
                            <p class="mycontacts_text" v-html="$t('homepage.contacts')"></p>
                        </div>
                        <div class="landing__footer-icons row flex-center">
-                            <a :href="FBPage" target="_blank">
+                            <a v-if="!!FBPage" :href="FBPage" target="_blank">
                                <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"> </i></a>

-                            <a :href="InstagramPage" target="_blank">
+                            <a v-if="!!InstagramPage" :href="InstagramPage" target="_blank">
                                <i aria-hidden="true" class="q-icon fab fa-instagram icon_contact links"> </i></a>

-                            <a :href="TelegramSupport" target="_blank">
+                            <a v-if="!!TelegramSupport" :href="TelegramSupport" target="_blank">
                                <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>


@@ -53,29 +54,22 @@
                </div>

                <div class="col-12 col-sm-4 q-pa-md" v-for="">
-                    <a href="/"><span class="footer_link">Home</span></a><br />
+                    <div v-for="myitemmenu in static_data.routes">
+                        <div v-if="myitemmenu.infooter">
+
+                            <div v-if="myitemmenu.solotitle">
+                                <span class="footer_link">{{tools.getLabelByItem(myitemmenu, mythis)}}</span><br/>
+                            </div>
+                            <div v-else>
+                                <router-link :to="myitemmenu.path">
+                                    <span class="footer_link"><span v-if="myitemmenu.level_child > 0">&nbsp;&nbsp;&nbsp;</span>
+                                        {{tools.getLabelByItem(myitemmenu, mythis)}}</span><br/>
+                                </router-link>
+                            </div>
+                            <!--<a :href="myitemmenu.path"><span class="footer_link">{{tools.getLabelByItem(myitemmenu, mythis)}}</span></a><br/>-->
+                        </div>
+                    </div>
                </div>
-
-                <!--
-                <div class="col-12 col-sm-4 q-pa-md">
-                    <a href="/"><span class="footer_link">Home</span></a><br />
-                    <a href="/chisiamo"><span class="footer_link">Chi Siamo</span></a><br />
-                    <a href="/calendarioeventi"><span class="footer_link">Calendario Eventi</span></a><br />
-                    <a href="/reiki/significato"><span class="footer_link">Reiki</span></a><br />
-                    <a href="/reiki/seminari"><span class="footer_link"> - Seminari Reiki</span></a><br />
-                    <a href="/reiki/trattamentiindividuali"><span class="footer_link"> - Trattamenti Individuali</span></a><br />
-                    <a href="/reiki/seratereikigruppo"><span class="footer_link"> - Serate di Gruppo</span></a><br />
-                    <a href="/shiatsu/significato"><span class="footer_link">Shiatsu</span></a><br />
-                    <a href="/shiatsu/trattamentiindividuali"><span class="footer_link"> - Trattamenti Individuali</span></a><br />
-                    <a href="/shiatsu/energyyoga"><span class="footer_link"> - Energy Yoga</span></a><br />
-                    <a href="/fioridibach"><span class="footer_link">Fiori di Bach</span></a><br />
-                    <a href="/scuolaoperatoreolistico"><span class="footer_link">Scuola Operatore Olistico</span></a><br />
-                    <a href="/scuoladinaturopatia"><span class="footer_link">Scuola di Naturopatia</span></a><br />
-
-
-                    <br /><a href="/policy"><span class="footer_link">Privacy Policy</span></a><br />
-                </div>
-                -->
            </div>
        </section>
        <q-page-scroller position="bottom-right" :scroll-offset="850" :offset="[18, 18]" style="opacity: 0.3">
--- a/src/components/FormNewsletter/FormNewsletter.vue
+++ b/src/components/FormNewsletter/FormNewsletter.vue
@@ -1,7 +1,7 @@
 <template>
    <div>
        <div class="q-pa-md q-gutter-sm text-white">
-            <p class="news_title">Desideri ricevere la nostra Newsletter?</p>
+            <p class="news_title">{{$t('newsletter.title')}}</p>
            <q-form
                    @submit="onSubmit"
                    @reset="onReset"
@@ -41,7 +41,7 @@

                </q-input>

-                <a href="/policy"><span class="news_link">Privacy Policy</span></a>
+                <router-link to="/policy"><span class="news_link">Privacy Policy</span></router-link>

                <q-toggle dark v-model="accept" :label="$t('newsletter.acceptlicense')"/>

--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,6 +8,7 @@ export * from './CPage'
 export * from './CTitle'
 export * from './CImgText'
 export * from './CImgTitle'
+export * from './CPreloadImages'
 export * from './CDate'
 export * from './BannerCookies'
 export * from './PagePolicy'
--- a/src/db/db_data.js
+++ b/src/db/db_data.js
@@ -62,5 +62,23 @@ export const db_data = {
      infoextra: 'sabato e domenica dalle 10.00 alle 18.00',
      linkpdf: '',
    },
+    {
+      title: 'Presentazione Corsi per Operatori del Massaggio del Benessere',
+      details: 'Vieni alla presentazione dei Corsi!<br>10 settembre a Ravenna, 17 settembre a Lugo',
+      date: '2019-09-10',
+      time: '20:30',
+      duration: 120,
+      side: 'left',
+      bgcolor: 'blue',
+      icon: 'fas fa-praying-hands',
+      img: 'images/scuolaopbenessere/img1.jpg',
+      where: 'Centro Shen',
+      // whereicon: 'shen.png',
+      teacher: 'Operatori',
+      avatar: 'cristina.png',
+      avatar2: 'elisa.png',
+      infoextra: '',
+      linkpdf: '',
+    },
  ]
 }
--- a/src/layouts/menuone/menuOne.ts
+++ b/src/layouts/menuone/menuOne.ts
@@ -3,6 +3,7 @@ import { Watch } from 'vue-property-decorator'
 import { GlobalStore } from '../../store/Modules'
 import Component from 'vue-class-component'
 import { static_data } from '../../db/static_data'
+import { tools } from '../../store/Modules/tools'

 export default class MenuOne extends Vue {

@@ -17,15 +18,16 @@ export default class MenuOne extends Vue {
  //   return this.$route.path
  // }

-  get getmenu() {
-    return GlobalStore.getters.getmenu
+  get tools() {
+    return tools
  }

-  public getLabelByItem(item) {
-    if (!!item.name)
-      return this.$t(item.name)
-    else
-      return item.text
+  get mythis() {
+    return this
+  }
+
+  get getmenu() {
+    return GlobalStore.getters.getmenu
  }

  public setParentVisibilityBasedOnRoute(parent) {
--- a/src/layouts/menuone/menuOne.vue
+++ b/src/layouts/menuone/menuOne.vue
@@ -8,7 +8,7 @@
                        <q-expansion-item
                                :header-inset-level="myitemmenu.level_parent"
                                :content-inset-level="myitemmenu.level_parent"
-                                :label="getLabelByItem(myitemmenu)"
+                                :label="tools.getLabelByItem(myitemmenu, mythis)"
                                :icon="myitemmenu.materialIcon"
                                expand-icon-class="my-menu-separat"
                                header-class="my-menu"
@@ -23,7 +23,7 @@
                                              active-class="my-menu-active"
                                              expand-icon-class="my-menu-icon-none"
                                              class="item item-link drawer-closer cursor-pointer my-menu"
-                                              :label="getLabelByItem(child2)">
+                                              :label="tools.getLabelByItem(child2, mythis)">
                                <q-expansion-item v-if="!!child2.routes2" v-for="(child3, index) in child2.routes2"
                                                  :key="index"
                                                  :to="child3.path"
@@ -34,7 +34,7 @@
                                                  expand-icon-class="my-menu-separat"
                                                  active-class="my-menu-active"
                                                  class="item item-link drawer-closer cursor-pointer my-menu"
-                                                  :label="getLabelByItem(child3)">
+                                                  :label="tools.getLabelByItem(child3, mythis)">
                                </q-expansion-item>

                            </q-expansion-item>
@@ -49,7 +49,7 @@
                                            :to="myitemmenu.path"
                                            :header-inset-level="myitemmenu.level_parent"
                                            :content-inset-level="myitemmenu.level_parent"
-                                            :label="getLabelByItem(myitemmenu)"
+                                            :label="tools.getLabelByItem(myitemmenu, mythis)"
                                            :icon="myitemmenu.materialIcon"
                                            expand-icon="none"
                                            header-class="my-menu"
--- a/src/model/Calendar.ts
+++ b/src/model/Calendar.ts
@@ -2,6 +2,7 @@
 export interface IEvents {
  time?: string
  duration?: number
+  duration2?: number
  title?: string
  details?: string
  date?: string
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -79,6 +79,8 @@ export interface IListRoutes {
  component?: Component
  reqauth?: boolean
  inmenu?: boolean
+  solotitle?: boolean
+  infooter?: boolean
  submenu?: boolean
  // ------------------------
  faIcon?: string
@@ -117,6 +119,7 @@ export interface IAllLang {
  es?: string
  enUs?: string
  fr?: string
+  de?: string
  it?: string
 }

--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -151,6 +151,7 @@ const msgglobal = {
      themebgcolor: 'Tema Colore Sfondo'
    },
    cal: {
+      event: 'Evento',
      starttime: 'Dalle',
      endtime: 'alle',
      duration: 'Durata',
@@ -166,6 +167,7 @@ const msgglobal = {
      enterEndDateTime: 'Data e Ora Fine Evento'
    },
    newsletter: {
+      title: 'Desideri ricevere la nostra Newsletter?',
      name: 'Il tuo Nome',
      surname: 'Il tuo Cognome',
      namehint: 'Nome',
@@ -177,9 +179,10 @@ const msgglobal = {
      acceptlicense: 'Accetto la licenza e i termini',
      license: 'Devi prima accettare la licenza e i termini',
      submitted: 'Iscritto'
-    }
+    },
+    cookies: 'Usiamo i Cookie per una migliore prestazione web.'
  },
-  'es': {
+  es: {
    dialog: {
      ok: 'Vale',
      yes: 'Sí',
@@ -323,6 +326,7 @@ const msgglobal = {
      themebgcolor: 'Tema Colores Fondo'
    },
    cal: {
+      event: 'Evento',
      starttime: 'Inicio',
      endtime: 'fin',
      duration: 'Duración',
@@ -338,6 +342,7 @@ const msgglobal = {
      enterEndDateTime: 'Fecha y hora del evento final'
    },
    newsletter: {
+      title: '¿Desea recibir nuestro boletín informativo?',
      name: 'Tu Nombre',
      surname: 'Tu Apellido',
      namehint: 'Nombre',
@@ -349,7 +354,8 @@ const msgglobal = {
      acceptlicense: 'Acepto la licencia y los términos',
      license: 'Necesitas aceptar la licencia y los términos primero',
      submitted: 'Subscrito'
-    }
+    },
+    cookies: 'Utilizamos cookies para un mejor rendimiento web.'
  },
  fr: {
    dialog: {
@@ -494,6 +500,7 @@ const msgglobal = {
      themebgcolor: 'Tema Colores Fondo'
    },
    cal: {
+      event: 'événement',
      starttime: 'Accueil',
      endtime: 'fin',
      duration: 'Durée',
@@ -509,6 +516,7 @@ const msgglobal = {
      enterEndDateTime: 'Date et heure de l\'événement final'
    },
    newsletter: {
+      title: 'Souhaitez-vous recevoir notre newsletter?',
      name: 'Ton nom',
      surname: 'Tu prénom',
      namehint: 'Nom',
@@ -520,9 +528,10 @@ const msgglobal = {
      acceptlicense: 'J\'accepte la licence et les termes',
      license: 'Vous devez d\'abord accepter la licence et les termes',
      submitted: 'Abonné'
-    }
+    },
+    cookies: 'Nous utilisons des cookies pour améliorer les performances Web.'
  },
-  'enUs': {
+  enUs: {
    dialog: {
      ok: 'Ok',
      yes: 'Yes',
@@ -664,6 +673,7 @@ const msgglobal = {
      themebgcolor: 'Theme Color Background'
    },
    cal: {
+      event: 'Event',
      starttime: 'From',
      endtime: 'to',
      duration: 'Duration',
@@ -679,6 +689,7 @@ const msgglobal = {
      enterEndDateTime: 'Event end date and time'
    },
    newsletter: {
+      title: 'Would you like to receive our Newsletter?',
      name: 'Your name',
      surname: 'Your surname',
      namehint: 'Name',
@@ -690,7 +701,8 @@ const msgglobal = {
      acceptlicense: 'I accept the license and terms',
      license: 'You need to accept the license and terms first',
      submitted: 'Subscribed'
-    }
+    },
+    cookies: 'We use cookies for better web performance.'
  },
  de: {
    dialog: {
@@ -836,6 +848,7 @@ const msgglobal = {
      themebgcolor: 'Theme Color Background'
    },
    cal: {
+      event: 'Event',
      starttime: 'From',
      endtime: 'to',
      duration: 'Duration',
@@ -851,6 +864,7 @@ const msgglobal = {
      enterEndDateTime: 'Event end date and time'
    },
    newsletter: {
+      title: 'Would you like to receive our Newsletter?',
      name: 'Your name',
      surname: 'Your surname',
      namehint: 'Name',
@@ -862,7 +876,8 @@ const msgglobal = {
      acceptlicense: 'I accept the license and terms',
      license: 'You need to accept the license and terms first',
      submitted: 'Subscribed'
-    }
+    },
+    cookies: 'Wir verwenden Cookies für eine bessere Webleistung.'
  },
 };

@@ -874,7 +889,7 @@ const msgenUs = { ...msg_website.enUs, ...msgglobal.enUs }

 const messages = {
  it: {
-    ...msges,
+    ...msgit,
    pages: { ...msg_website.it.pages, ...msgglobal.it.pages },
    msg: { ...msg_website.it.msg, ...msgglobal.it.msg },
    homepage: { ...msg_website.it.homepage, ...msgglobal.it.homepage }
--- a/src/store/Modules/GlobalStore.ts
+++ b/src/store/Modules/GlobalStore.ts
@@ -341,7 +341,7 @@ namespace Actions {
      return
    }

-    if (UserStore.state.userId === undefined) {
+    if (UserStore.state.userId === undefined || UserStore.state.tokens[0] === undefined) {
      return
    }

--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -1728,6 +1728,7 @@ export const tools = {

  },

+
  heightgallery() {
    if (Screen.width < 400) {
      return '200px'
@@ -1738,22 +1739,51 @@ export const tools = {
    }
  },

-  myheight_imgtitle(myheight?) {
+  myheight_imgtitle(myheight?, myheightmobile?) {
+    let maxheight = 0
    if (!!myheight) {
-      if (myheight > 0)
-        return myheight
-    }
-    if (Screen.width < 400) {
-      return 350
-    } else if (Screen.width < 600) {
-      return 400
-    } else if (Screen.width < 800) {
-      return 450
-    } else if (Screen.width < 1000) {
-      return 500
+      maxheight = myheight
+      if (myheight > 0) {
+        if (myheight > 1000) {
+          maxheight = 1000
+        } else {
+          maxheight =  parseInt(myheight, 10)
+        }
+      }
    } else {
-      return 500
+      maxheight = 500
    }
+
+    let maxh2 = 0
+    if (Screen.width < 400) {
+      maxh2 = 350
+    } else if (Screen.width < 600) {
+      maxh2 = 400
+    } else if (Screen.width < 800) {
+      maxh2 = 450
+    } else if (Screen.width < 1000) {
+      maxh2 = 500
+    } else {
+      maxh2 = 500
+    }
+
+    console.log('maxh2', maxh2)
+    console.log('maxheight', maxheight)
+
+    let ris = 0
+
+    if (maxh2 < maxheight)
+      ris = maxh2
+    else
+      ris = maxheight
+
+    if (!!myheightmobile) {
+      if (this.isMobile() && maxh2 > myheightmobile)
+        ris = parseInt(myheightmobile, 10)
+    }
+
+    console.log('ris', ris)
+    return ris
  },

  myheight_dialog() {
@@ -1766,11 +1796,15 @@ export const tools = {
    }
  },

-  styles_imgtitle() {
-    if (Screen.width < 400) {
-      return 'max-height: 250px'
+  styles_imgtitle(sized?: string) {
+    if (!!sized) {
+      return sized
    } else {
-      return 'max-height: 350px'
+      if (Screen.width < 400) {
+        return 'max-height: 250px'
+      } else {
+        return 'max-height: 350px'
+      }
    }
  },

@@ -1808,6 +1842,10 @@ export const tools = {
    }
  },

+  isMobile() {
+    return (Screen.width < 400)
+  },
+
  mywidth_imgtitle() {
    if (Screen.width < 400) {
      return '250'
@@ -1922,9 +1960,43 @@ export const tools = {

  appid() {
    return process.env.APP_ID
+  },
+
+  getLabelByItem(item, mythis) {
+    if (!!item.name)
+      return mythis.$t(item.name)
+    else
+      return item.text
+
+  },
+
+  getimgbysize(dir: string, file: string) {
+    const myimage = dir + file
+    console.log('includes = ', static_data.preLoadImages.includes(myimage), myimage)
+    let ris = ''
+    if (this.isMobile() && (static_data.preLoadImages.includes(myimage))) {
+      ris = dir + 'mobile/' + file
+    } else {
+      ris = myimage
+    }
+
+    console.log('getimgbysize', ris)
+
+    return ris
+  },
+
+  getimgFullpathbysize(fileimg: string) {
+    const ind = fileimg.lastIndexOf('/')
+    if (ind > 0) {
+      return { path: fileimg.substring(0, ind + 1) , file: fileimg.substring(ind + 1) }
+    } else {
+      return { path: '', file: fileimg }
+    }
+
  }


+
 // getLocale() {
  //   if (navigator.languages && navigator.languages.length > 0) {
  //     return navigator.languages[0]
--- a/src/store/Modules/toolsext.ts
+++ b/src/store/Modules/toolsext.ts
@@ -22,20 +22,27 @@ export const func_tools = {
  },

  getDateStr(mydate) {
-    if (costanti_tools.DateFormatter) {
+    const DateFormatter = new Intl.DateTimeFormat(func_tools.getLocale() || void 0, {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric'
+      // timeZone: 'UTC'
+    })
+    if (DateFormatter) {
      const date = new Date(mydate)
-      return costanti_tools.DateFormatter.format(date)
+      return DateFormatter.format(date)
    }
    return mydate
  }
 }

-export const costanti_tools = {
-  DateFormatter: new Intl.DateTimeFormat(func_tools.getLocale() || void 0, {
-    weekday: 'long',
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric'
-    // timeZone: 'UTC'
-  })
-}
+// export const costanti_tools = {
+//   DateFormatter: new Intl.DateTimeFormat(func_tools.getLocale() || void 0, {
+//     weekday: 'long',
+//     day: 'numeric',
+//     month: 'long',
+//     year: 'numeric'
+//     // timeZone: 'UTC'
+//   })
+// }