- Fix Facebook slow down the loading... inserted only a static image !#106

- Others fix to the CCardDiscipline

src/components/CCardCarousel/CCardCarousel.vue

@@ -34,7 +34,7 @@
                 ref="carousel"
                 transition-next="slide-left"
                 transition-prev="slide-right"
-                height="650px"
+                height="600px"
                 width="100%"
         >
             <template v-slot:control>
@@ -70,7 +70,7 @@
                               :img-src="`statics/`+myrec.img_small"
                               :name="index">
                 <div class="row q-ma-xs">
-                    <CCardDiscipline :discipline="myrec" mystyle="height: 550px" :autoplay.sync="autoplaydisc">
+                    <CCardDiscipline :discipline="myrec" mystyle="height: 500px" :autoplay.sync="autoplaydisc">
 
                     </CCardDiscipline>
                 </div>

src/components/CCardDiscipline/CCardDiscipline.scss

@@ -82,6 +82,9 @@ $grayshadow: #555;
   &__description {
     font-size: 1rem;
     color: #000000;
+    height: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__email a {
@@ -100,3 +103,8 @@ $grayshadow: #555;
     border-radius: 30px !important;
   }
 }
+
+
+.q-card__section{
+  padding: 4px !important;
+}

src/components/CCardDiscipline/CCardDiscipline.vue

@@ -14,12 +14,12 @@
             </q-card-section>
 
             <q-card-section v-if="ExistLesson()" class="text-blue">
-                {{ $t('cal.nextevent') }}:
+                <span v-if="!tools.isMobile()">{{ $t('cal.nextevent') }}:</span>
                 <q-btn rounded type="a" :to="getLinkEvent" color="primary" icon="event" :label="NextEventDate()">
                 </q-btn>
             </q-card-section>
 
-            <q-separator inset></q-separator>
+            <span v-if="!tools.isMobile()"><q-separator inset></q-separator></span>
 
             <q-card-section class="row justify-center">
                 <div v-for="(teach, index) in discipline.teachers" :key="index"

src/components/CEventsCalendar/CEventsCalendar.vue

@@ -297,22 +297,24 @@
                                 </span>
                         </div>
                         <div class="q-pa-xs">
-                            <q-card class="text-white windowcol">
+                            <q-card class="text-white windowcol" style="display: block; ">
-                                <q-card-section>
+                                <q-card-section class="q-pa-xs">
+                                    <div style="display: inline-flex; " class="q-px-xs centermydiv">
                                         <q-checkbox
                                                 :disable="((bookEventpage.bookedevent && bookEventpage.bookedevent.booked) || (bookEventpage.bookedevent === undefined)) || !isEventEnabled(myevent)"
                                                 style="color: black;" v-model="bookEventForm.booked"
                                                 :label="$t('cal.bookingtextdefault')" color="green">
                                         </q-checkbox>
 
-                                    <div v-if="bookEventForm.booked" class="q-gutter-sm centermydiv"
+                                        <div v-if="bookEventForm.booked" class="q-gutter-xs q-mx-xs"
-                                         style="max-width: 150px; margin-top:10px;">
+                                             style="min-width: 140px;">
                                             <q-select
                                                     rounded outlined v-model="bookEventForm.numpeople"
                                                     :options="tools.SelectListNumPeople"
                                                     :label="$t('cal.selnumpeople')" emit-value map-options>
                                             </q-select>
                                         </div>
+                                    </div>
 
                                     <q-input v-model="bookEventForm.msgbooking" :label="$t('cal.msgbooking')+':'"
                                              type="textarea" debounce="500"
@@ -545,7 +547,8 @@
 
         <div class="q-mt-md">
             <div v-if="!mysingleevent">
-                <p class="text-subtitle1 text-red bg-amber text-center ">LISTA PROSSIMI <span v-if="showfirstN > 0">{{ showfirstN }}</span> EVENTI:</p>
+                <p class="text-subtitle1 text-red bg-amber text-center ">LISTA PROSSIMI <span v-if="showfirstN > 0">{{ showfirstN }}</span>
+                    EVENTI:</p>
                 <q-markup-table wrap-cells bordered separator="horizontal" class="listaev__table">
                     <tbody>
                     <tr v-for="(event, index) in getEventList()" class="listaev listaev__table">

src/components/CFacebookFrame/CFacebookFrame.scss

@@ -0,0 +1,7 @@
+.myclassfb{
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: auto;
+  margin-bottom: auto;
+  display: block;
+}

src/components/CFacebookFrame/CFacebookFrame.ts

@@ -7,8 +7,27 @@ import { date } from 'quasar'
 import { CalendarStore } from '../../store/Modules'
 import MixinBase from '../../mixins/mixin-base'
 
+import VueScrollReveal from 'vue-scroll-reveal'
+import { CImgText } from '../CImgText'
+
+
+Vue.use(VueScrollReveal, {
+  class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.
+  duration: 1200,
+  scale: 0.95,
+  distance: '10px',
+  rotate: {
+    x: 0,
+    y: 0,
+    z: 0
+  }
+  // mobile: true
+})
+
+
 @Component({
   name: 'CFacebookFrame',
+  components: { CImgText },
   mixins: [MixinBase]
 })
 
@@ -17,6 +36,7 @@ export default class CFacebookFrame extends Vue {
   public $t
   @Prop({ required: true }) public urlfbpage: string
   @Prop({ required: true }) public title: string
+  @Prop({ required: true }) public fbimage: string
   @Prop({ required: false, default: '' }) public myclass: string
 
   public geturlfbpageEncoded() {

src/components/CFacebookFrame/CFacebookFrame.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="urlfbpage" :class="myclass">
+    <div v-if="urlfbpage && fbimage" :class="myclass">
         <!--<div class="fb-page" :data-href="urlfbpage" data-tabs="timeline"-->
         <!--data-width="" data-height="" data-small-header="false" data-adapt-container-width="true"-->
         <!--data-hide-cover="false" data-show-facepile="true">-->
@@ -8,9 +8,17 @@
         <!--</blockquote>-->
         <!--</div>-->
 
+        <a :href="urlfbpage" target="_blank">
+            <q-img :src="`statics/` + fbimage" class="myclassfb">
+            </q-img>
+
+        </a>
+
+        <!--
         <iframe :src="`https://www.facebook.com/plugins/page.php?href=`+geturlfbpageEncoded()+`&tabs=timeline&width=`+mywidth+`&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=164292303671962`"
                 width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
                 allowTransparency="true" allow="encrypted-media"></iframe>
+                -->
     </div>
 </template>
 

src/components/Footer/Footer.vue

@@ -7,7 +7,7 @@
                     <!--</span>-->
 
 
-                    <CFacebookFrame myclass="text-center" :urlfbpage="getValDb('FBPAGE_FRAME')" title="getValDb('FBPAGE_TITLE')">
+                    <CFacebookFrame myclass="text-center" :fbimage="getValDb('FBPAGE_IMG')" :urlfbpage="getValDb('FBPAGE_FRAME')" title="getValDb('FBPAGE_TITLE')">
 
                     </CFacebookFrame>
 

src/statics/i18n.js

@@ -252,7 +252,7 @@ const msgglobal = {
       selnumpeople_short: 'Num',
       msgbooking: 'Messaggio da inviare',
       showpdf: 'Vedi PDF',
-      bookingtextdefault: 'Mi prenoto all\'evento',
+      bookingtextdefault: 'Prenoto per',
       bookingtextdefault_of: 'di',
       data: 'Data',
       teachertitle: 'Insegnante',
@@ -557,7 +557,7 @@ const msgglobal = {
       selnumpeople_short: 'Num',
       msgbooking: 'Mensaje para enviar',
       showpdf: 'Ver PDF',
-      bookingtextdefault: 'Reservo el evento',
+      bookingtextdefault: 'Reservo para',
       bookingtextdefault_of: 'de',
       data: 'Fecha',
       teachertitle: 'Maestro',
@@ -861,7 +861,7 @@ const msgglobal = {
       selnumpeople_short: 'Num',
       msgbooking: 'Message à envoyer',
       showpdf: 'Voir PDF',
-      bookingtextdefault: 'Je réserve l\'événement',
+      bookingtextdefault: 'Je réserve',
       bookingtextdefault_of: 'du',
       data: 'Date',
       teachertitle: 'Professeur',
@@ -1164,7 +1164,7 @@ const msgglobal = {
       selnumpeople_short: 'Num',
       msgbooking: 'Message to send',
       showpdf: 'Show PDF',
-      bookingtextdefault: 'I book the event',
+      bookingtextdefault: 'I book for',
       bookingtextdefault_of: 'of',
       data: 'Date',
       teachertitle: 'Teacher',
@@ -1469,7 +1469,7 @@ const msgglobal = {
       selnumpeople_short: 'Num',
       msgbooking: 'Message to send',
       showpdf: 'Show PDF',
-      bookingtextdefault: 'I book the event',
+      bookingtextdefault: 'I book for',
       bookingtextdefault_of: 'of',
       data: 'Date',
       teachertitle: 'Teacher',

src/store/Modules/tools.ts

@@ -1770,6 +1770,24 @@ export const tools = {
 
   },
 
+  getstrVeryVeryShortDate(mydate) {
+    const DateFormatter = new Intl.DateTimeFormat(func_tools.getLocale() || void 0, {
+      weekday: 'long',
+      day: 'numeric',
+      // timeZone: 'UTC'
+    })
+    try {
+      if (DateFormatter) {
+        const date1 = new Date(mydate)
+        return DateFormatter.format(date1)
+      }
+      return mydate
+    } catch (e) {
+      return ''
+    }
+
+  },
+
   getstrDateTimeEvent(mythis, myevent, withhtml) {
     let mystr = ''
     // is same day?
@@ -1805,9 +1823,9 @@ export const tools = {
     // is same day?
     if (tools.getstrShortDate(myevent.dateTimeStart) === tools.getstrShortDate(myevent.dateTimeEnd)) {
       mystr = `${tools.getstrShortDate(myevent.dateTimeStart)}
-                 h. ${ tools.getstrTime(myevent.dateTimeStart) }`
+                 - ${ tools.getstrTime(myevent.dateTimeStart) }`
     } else {
-      mystr = `${tools.getstrShortDate(myevent.dateTimeStart)} - ${ tools.getstrShortDate(myevent.dateTimeEnd) }`
+      mystr = `${tools.getstrVeryVeryShortDate(myevent.dateTimeStart)} - ${ tools.getstrShortDate(myevent.dateTimeEnd) }`
 
     }