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

- Others fix to the CCardDiscipline
2019-11-17 22:24:41 +01:00
parent ca7ee49944
commit 17d5a50662
10 changed files with 92 additions and 28 deletions
--- a/src/components/CCardCarousel/CCardCarousel.vue
+++ b/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>
--- a/src/components/CCardDiscipline/CCardDiscipline.scss
+++ b/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;
+}
--- a/src/components/CCardDiscipline/CCardDiscipline.vue
+++ b/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"
--- a/src/components/CEventsCalendar/CEventsCalendar.vue
+++ b/src/components/CEventsCalendar/CEventsCalendar.vue
@@ -297,21 +297,23 @@
                                </span>
                        </div>
                        <div class="q-pa-xs">
-                            <q-card class="text-white windowcol">
-                                <q-card-section>
-                                    <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>
+                            <q-card class="text-white windowcol" style="display: block; ">
+                                <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"
-                                         style="max-width: 150px; margin-top:10px;">
-                                        <q-select
-                                                rounded outlined v-model="bookEventForm.numpeople"
-                                                :options="tools.SelectListNumPeople"
-                                                :label="$t('cal.selnumpeople')" emit-value map-options>
-                                        </q-select>
+                                        <div v-if="bookEventForm.booked" class="q-gutter-xs q-mx-xs"
+                                             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')+':'"
@@ -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">
--- a/src/components/CFacebookFrame/CFacebookFrame.scss
+++ b/src/components/CFacebookFrame/CFacebookFrame.scss
@@ -0,0 +1,7 @@
+.myclassfb{
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: auto;
+  margin-bottom: auto;
+  display: block;
+}
--- a/src/components/CFacebookFrame/CFacebookFrame.ts
+++ b/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() {
--- a/src/components/CFacebookFrame/CFacebookFrame.vue
+++ b/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>

--- a/src/components/Footer/Footer.vue
+++ b/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>