CSS Animations

package.json

@@ -32,6 +32,7 @@
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "acorn": "^8.8.1",
+    "animate.css": "^4.1.1",
     "autoprefixer": "^10.4.13",
     "axios": "^1.1.3",
     "bcryptjs": "^2.4.3",

quasar.conf.js

@@ -3,7 +3,7 @@
  * the ES6 features that are supported by your Node version. https://node.green/
  */
 
-// Configuration for your app
+// Configuration for your appanimated
 // https://v2.quasar.dev/quasar-cli/quasar-conf-js
 
 /* eslint-env node */
@@ -248,9 +248,9 @@ module.exports = configure((ctx) => ({
     lang: 'it', // Quasar language
   },
 
-  // animations: 'all', // --- includes all animations
+  animations: 'all', // --- includes all animations
   // https://v2.quasar.dev/options/animations
-  animations: [],
+  // animations: [],
 
   // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
   ssr: {

src/common/shared_vuejs.ts

@@ -1192,6 +1192,10 @@ export const shared_consts = {
       value: 8,
       label: 'ImgTitolo',
     },
+    {
+      value: 9,
+      label: 'Img Poster',
+    },
     {
       value: 10,
       label: 'Testo',
@@ -1263,6 +1267,7 @@ export const shared_consts = {
     MARGINI: 6,
     CARD: 7,
     IMGTITLE: 8,
+    IMGPOSTER: 9,
     TEXT: 10,
     HTML: 20,
     IMAGE: 30,
@@ -1288,6 +1293,15 @@ export const shared_consts = {
     RIGHT: 3,
   },
 
+  VERTALIGNTYPE: {
+    NONE: 0,
+    UP: 1,
+    CENTER: 2,
+    DOWN: 3,
+    DOWN_LEFT: 4,
+    UP_LEFT: 5,
+  },
+
 
   getStatusStr(status: number) {
     const trovatorec = this.OrderStatusStr.find((rec) => rec.value === status)

src/components/CImgPoster/CImgPoster.scss

@@ -0,0 +1,128 @@
+.imgtitle {
+  display: flex;
+  justify-content: space-between;
+  /* flex-flow: row nowrap; */
+
+  padding: 1rem 0 1rem 0;
+  margin: .125rem;
+
+  * {
+    width: 100%;
+    flex: 1;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__img {
+    min-width: 250px;
+  }
+
+  &__imgh100 {
+    max-height: 100px;
+  }
+
+  &__imgh150 {
+    max-height: 150px;
+  }
+
+  &__imgw150 {
+    max-width: 150px;
+  }
+
+  &__imgw100 {
+    max-width: 100px;
+  }
+}
+
+
+@media (max-width: 718px) {
+
+  // PER VERSIONE MOBILE
+  .landing>section.padding_testo {
+    padding-top: 0.5rem;
+    padding-bottom: 0.1rem;
+  }
+
+  .imgtitle {
+    padding: 0.25rem 0 0.25rem 0;
+  }
+
+}
+
+.landing>section.padding_testo {
+  padding-top: 1rem;
+  padding-bottom: 0.25rem;
+}
+
+.section_text {
+  padding: 10px;
+}
+
+.title {
+  font-size: 3rem;
+  padding: 4px 20px 4px 20px;
+  text-shadow: .2rem .2rem .2rem #3d3d3d;
+}
+
+.subtitle {
+  font-size: 1.25rem;
+  padding: 4px 20px 4px 20px;
+  text-shadow: .1rem .1rem .1rem #3d3d3d;
+}
+
+@media (max-width: 400px) {
+  .title {
+    font-size: 2.5rem;
+  }
+
+  .subtitle {
+    font-size: 1rem;
+  }
+}
+
+.mylegendinside {
+  font-size: 1rem;
+  margin-bottom: 50px;
+  opacity: .8;
+
+}
+
+.mylegend {
+  text-align: center;
+  color: black;
+  font-size: 1rem;
+  font-style: italic;
+  opacity: .8;
+  text-shadow: .05rem .05rem .05rem #aeaeae;
+  z-index: 1000;
+
+  @media (max-width: 400px) {}
+}
+
+.align_top {
+  top: 100px;
+  margin-bottom: auto;
+}
+
+.align_top_left {
+  top: 50px;
+  left: 20px;
+  margin-right: auto;
+  margin-bottom: auto;
+}
+
+.align_middle {
+  vertical-align: middle;
+}
+
+.align_bottom {
+  margin-bottom: 30px;
+  margin-top: auto;
+}
+
+.align_bottom_left {
+  margin-bottom: 20px;
+  left: 20px;
+  margin-right: auto;
+  margin-top: auto;
+}

src/components/CImgPoster/CImgPoster.ts

@@ -0,0 +1,102 @@
+import { defineComponent, ref } from 'vue'
+
+import { tools } from '@src/store/Modules/tools'
+import { shared_consts } from '@src/common/shared_vuejs'
+
+export default defineComponent({
+  name: 'CImgPoster',
+  props: {
+    src: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    myheight: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    myheightmobile: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    legendinside: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    legend: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    classTitle: String,
+    classSubtitle: String,
+    colorTitle: String,
+    colorSubtitle: String,
+    vertalign: Number,
+    speed: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    class_anim: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    class_anim2: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    logo: String,
+    logoheight: String,
+    logowidth: String,
+    fit: String,
+  },
+
+  setup(props) {
+    function getsrc(): string {
+      const filefull = tools.getimgFullpathbysize(props.src)
+
+      return tools.getimgbysize(filefull.path, filefull.file)
+    }
+
+    function getaltimg(): string {
+      const filefull = tools.getimgFullpathbysize(props.src)
+      return tools.getaltimg(filefull.path, filefull.file, props.title)
+    }
+
+    function myclass() {
+      let mycl = ''
+      if (props.vertalign === shared_consts.VERTALIGNTYPE.UP) {
+        mycl += ' align_top'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.CENTER) {
+        mycl += ' align_middle'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.DOWN) {
+        mycl += ' align_bottom'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.DOWN_LEFT) {
+        mycl += ' align_bottom_left'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.UP_LEFT) {
+        mycl += ' align_top_left'
+      }
+
+      return mycl
+    }
+
+    return {
+      getsrc,
+      getaltimg,
+      myclass,
+      tools,
+    }
+  },
+
+})

src/components/CImgPoster/CImgPoster.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="poster_shadows shadow-3">
+    <q-parallax
+      :src="getsrc()"
+      :speed="speed ? speed : 1"
+      :height="myheight ? myheight : undefined"
+    >
+      <template v-slot:content="scope">
+        <div
+          :class="`column items-center ` + myclass()"
+          :style="{
+            opacity: 0.45 + (1 - scope.percentScrolled) * 0.55,
+          }"
+        >
+          <img
+            v-if="logo"
+            :src="logo"
+            :style="
+              logowidth
+                ? `width: ` + logowidth + `px; + `
+                : undefined + logoheight
+                ? ` height: ` + logoheight + `px`
+                : undefined
+            "
+          />
+          <div :class="classTitle + ` ` + class_anim" :style="` color:` + colorTitle">
+            {{ title }}
+          </div>
+          <div
+            v-if="legendinside"
+            :class="classSubtitle + ` ` + class_anim2"
+            :style="` color:` + colorSubtitle"
+            v-html="legendinside"
+          ></div>
+        </div>
+      </template>
+      <div>
+        <!--<q-img
+          v-if="logo"
+          :src="tools.getImgFileByElem(logo)"
+          :fit="fit"
+          class="img"
+          :width="logowidth ? logowidth : undefined"
+          :height="logoheight ? logoheight : undefined"
+        ></q-img>-->
+      </div>
+    </q-parallax>
+  </div>
+</template>
+
+<script lang="ts" src="./CImgPoster.ts">
+</script>
+<style lang="scss" scoped>
+@import './CImgPoster.scss';
+</style>

src/components/CImgPoster/index.ts

@@ -0,0 +1 @@
+export { default as CImgPoster } from './CImgPoster.vue'

src/components/CImgTitle/CImgTitle.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <q-parallax :src="getsrc()" :height="tools.myheight_imgtitle(myheight, myheightmobile)">
+        <q-parallax :src="getsrc()" :height="myheight ? tools.myheight_imgtitle(myheight, myheightmobile) : undefined">
             <h1 class="text-white title" style="text-align: center" >{{title}}</h1>
             <div v-if="legendinside" class="mylegendinside absolute-bottom custom-caption" style="text-align: center" v-html="legendinside"></div>
         </q-parallax>

src/components/CMyEditElem/CMyEditElem.ts

@@ -5,7 +5,8 @@ import {
 import { IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'
 
-import { CImgTitle } from '../CImgTitle/index'
+import { CImgTitle } from '@/components/CImgTitle'
+import { CImgPoster } from '@/components/CImgPoster'
 import { CTitle } from '@/components/CTitle/index'
 import { tools } from '@store/Modules/tools'
 import { shared_consts } from '@/common/shared_vuejs'
@@ -17,6 +18,7 @@ import { CMyPageIntro } from '@src/components/CMyPageIntro'
 import { CEventsCalendar } from '@src/components/CEventsCalendar'
 import { CMyEditor } from '@src/components/CMyEditor'
 import { CMyFieldRec } from '@src/components/CMyFieldRec'
+import { CSelectImage } from '@src/components/CSelectImage'
 import { CSelectColor } from '@src/components/CSelectColor'
 import { CSelectFontSize } from '@src/components/CSelectFontSize'
 
@@ -33,7 +35,7 @@ export default defineComponent({
   components: {
     CImgTitle, CTitle, LandingFooter, CEventsCalendar,
     CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
-    CSelectColor, CSelectFontSize
+    CSelectColor, CSelectFontSize, CSelectImage, CImgPoster
   },
   emits: ['saveElem'],
   props: {
@@ -234,12 +236,26 @@ export default defineComponent({
             }
           })
         }
+      } else if ((props.myelem.type === shared_consts.ELEMTYPE.IMGTITLE) ||
+                (props.myelem.type === shared_consts.ELEMTYPE.IMAGE)) {
+        myel.value.image = myval
       }
       modifElem()
     }
 
+    function showAnimation() {
+      return (myel.value.type === shared_consts.ELEMTYPE.IMAGE)
+      || (myel.value.type === shared_consts.ELEMTYPE.IMGTITLE)
+      || (myel.value.type === shared_consts.ELEMTYPE.TEXT)
+      || (myel.value.type === shared_consts.ELEMTYPE.HTML)
+      || (myel.value.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS)
+    }
+
     function updateElem(myvalue: any) {
-      myel.value = myvalue
+      console.log('updateElem', myvalue)
+      if (myel.value.type === shared_consts.ELEMTYPE.IMGTITLE) {
+        myel.value.container = myvalue
+      }
       modifElem()
     }
 
@@ -276,6 +292,7 @@ export default defineComponent({
       delRecCard,
       saveCard,
       updateElem,
+      showAnimation,
     }
   },
 

src/components/CMyEditElem/CMyEditElem.vue

@@ -69,26 +69,6 @@
         >
         </q-btn>
       </q-bar>
-      <div class="row">
-        <q-input
-          label="Width:"
-          @update:model-value="modifElem"
-          v-model="myel.widthimg"
-          filled
-          dense
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-        <q-input
-          label="Height:"
-          @update:model-value="modifElem"
-          v-model="myel.heightimg"
-          filled
-          dense
-          v-on:keyup.enter="saveElem"
-        >
-        </q-input>
-      </div>
       <div class="justify-center row q-ma-xs">
         <q-btn
           dense
@@ -113,6 +93,26 @@
         >
         </q-btn>
       </div>
+      <div class="row">
+        <q-input
+          label="Width:"
+          @update:model-value="modifElem"
+          v-model="myel.widthimg"
+          filled
+          dense
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Height:"
+          @update:model-value="modifElem"
+          v-model="myel.heightimg"
+          filled
+          dense
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
 
       <div class="row">
         <q-select
@@ -129,6 +129,20 @@
           map-options
         >
         </q-select>
+        <q-select
+          v-if="enableEdit"
+          rounded
+          outlined
+          v-model="myel.vertalign"
+          :options="tools.SelectListVertAlign"
+          @update:model-value="modifElem"
+          dense
+          label="Vert Allinea"
+          style="min-width: 100px"
+          emit-value
+          map-options
+        >
+        </q-select>
         <q-select
           v-if="enableEdit"
           rounded
@@ -169,6 +183,21 @@
         </q-input>
       </div>
 
+          <q-select
+            v-if="enableEdit && showAnimation"
+            rounded
+            style="min-width: 150px"
+            outlined
+            v-model="myel.class_anim"
+            :options="tools.SelectListAnimation"
+            @update:model-value="modifElem"
+            dense
+            label="Animazione"
+            emit-value
+            map-options
+          >
+          </q-select>
+
       <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
         <div v-if="enableEdit">
           <q-input
@@ -221,17 +250,6 @@
               </q-btn>
             </q-bar>
 
-            <CSelectImage
-                :title="tools.getTitleGall()"
-                :directory="tools.getDirectoryGall(myvalue, 'imgcards')"
-                :imgGall="[myvalue]"
-                :edit="true"
-                :canModify="true"
-                :isInModif="true"
-                @update:imgGall="updateElem"
-                @showandsave="Savedb">
-            </CSelectImage>
-
             <CMyFieldRec
               title="Immagine:"
               table="imgcards"
@@ -368,15 +386,18 @@
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
         <div v-if="enableEdit">
-          <q-input
+          <CMyFieldRec
-            label="Img"
+            title="Immagine:"
-            class="fa-border"
+            table="myelems"
+            :id="myel._id"
+            :rec="myel"
+            field="image"
             @update:model-value="modifElem"
-            v-model="myel.container"
+            :canEdit="true"
-            filled
+            :canModify="true"
-            v-on:keyup.enter="saveElem(false)"
+            :fieldtype="costanti.FieldType.image"
           >
-          </q-input>
+          </CMyFieldRec>
 
           <q-input
             label="Title"
@@ -387,6 +408,155 @@
             v-on:keyup.enter="saveElem"
           >
           </q-input>
+          <q-input
+            label="Sottotitolo"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.container2"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
+      </div>
+      <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
+        <div v-if="enableEdit">
+          <q-input
+            label="Velocità"
+            style="max-width: 100px"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.speed"
+            type="number"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <CMyFieldRec
+            title="Immagine:"
+            table="myelems"
+            :id="myel._id"
+            :rec="myel"
+            field="image"
+            @update:model-value="modifElem"
+            :canEdit="true"
+            :canModify="true"
+            :fieldtype="costanti.FieldType.image"
+          >
+          </CMyFieldRec>
+          <CMyFieldRec
+            title="Logo:"
+            table="myelems"
+            :id="myel._id"
+            :rec="myel"
+            field="container3"
+            @update:model-value="modifElem"
+            :canEdit="true"
+            :canModify="true"
+            :fieldtype="costanti.FieldType.image"
+          >
+          </CMyFieldRec>
+          <div class="row">
+            <q-input
+              label="Lunghezza Logo:"
+              @update:model-value="modifElem"
+              v-model="myel.width"
+              filled
+              dense
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+            <q-input
+              label="Altezza Logo:"
+              @update:model-value="modifElem"
+              v-model="myel.height"
+              filled
+              dense
+              v-on:keyup.enter="saveElem"
+            >
+            </q-input>
+          </div>
+
+          <q-input
+            label="Titolo"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.container"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-select
+            v-if="enableEdit"
+            rounded
+            style="min-width: 150px"
+            outlined
+            v-model="myel.class_anim"
+            :options="tools.SelectListAnimation"
+            @update:model-value="modifElem"
+            dense
+            label="Animazione Titolo"
+            emit-value
+            map-options
+          >
+          </q-select>
+          <CSelectColor
+            style="min-width: 100px"
+            v-model="myel.color"
+            @update:model-value="modifElem"
+            title="Col Titolo"
+          >
+          </CSelectColor>
+          <q-input
+            label="Sottotitolo"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.container2"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <CSelectColor
+            style="min-width: 100px"
+            v-model="myel.colorsub"
+            @update:model-value="modifElem"
+            title="Col Sottotitolo"
+          >
+          </CSelectColor>
+        </div>
+        <q-select
+          v-if="enableEdit"
+          rounded
+          style="min-width: 150px"
+          outlined
+          v-model="myel.class_anim2"
+          :options="tools.SelectListAnimation"
+          @update:model-value="modifElem"
+          dense
+          label="Animaz SottoTitolo"
+          emit-value
+          map-options
+        >
+        </q-select>
+        <div class="row">
+          <q-input
+            label="Classe Title"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.class4"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+          <q-input
+            label="Classe SubTitle"
+            class="fa-border"
+            @update:model-value="modifElem"
+            v-model="myel.class3"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
         </div>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
@@ -416,7 +586,7 @@
           <q-input
             label="NomeFile Img:"
             @update:model-value="modifElem"
-            v-model="myel.container"
+            v-model="myel.image"
             filled
             dense
             v-on:keyup.enter="saveElem"
@@ -427,7 +597,7 @@
             table="myelems"
             :id="myel._id"
             :rec="myel"
-            field="container"
+            field="image"
             @update:model-value="modifElem"
             :canEdit="true"
             :canModify="true"

src/components/CMyElem/CMyElem.ts

@@ -6,6 +6,7 @@ import { IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'
 
 import { CImgTitle } from '../CImgTitle/index'
+import { CImgPoster } from '@/components/CImgPoster'
 import { CTitle } from '@/components/CTitle/index'
 import { tools } from '@store/Modules/tools'
 import { shared_consts } from '@/common/shared_vuejs'
@@ -31,7 +32,7 @@ export default defineComponent({
   components: {
     CImgTitle, CTitle, LandingFooter, CEventsCalendar,
     CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
-    CSelectColor, CSelectFontSize
+    CSelectColor, CSelectFontSize, CImgPoster,
   },
   emits: ['selElemClick'],
   props: {
@@ -203,21 +204,6 @@ export default defineComponent({
       return mycl
     }
 
-    function getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
-      if (elem) {
-        if (elem.type === shared_consts.ELEMTYPE.CARD) {
-          if (reccard?.imagefile)
-            return 'upload/pages/' + elem.path + '/' + reccard.imagefile
-          else
-            return ''
-        } else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
-          return 'upload/pages/' + elem.path + '/' + elem.container
-        } else {
-          return 'upload/pages/' + elem.path + '/' + elem.image
-        }
-      }
-    }
-
     function showFit() {
       if (props.myelem.type)
         return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type)
@@ -252,7 +238,6 @@ export default defineComponent({
       showFit,
       getValDb,
       dupElem,
-      getImgFileByElem,
     }
   },
 

src/components/CMyElem/CMyElem.vue

@@ -10,7 +10,7 @@
     <div>
       <div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
         <div
-          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
           @click="clickOnElem"
         >
           {{ myel.container }}
@@ -27,7 +27,7 @@
           <div v-for="(rec, ind) in myel.listcards" :key="ind" >
             <q-card :class="`my-card center_img bordered ` + myel.class3"
               :style="rec.style">
-              <q-img :src="getImgFileByElem(myel, rec)" />
+              <q-img :class="myel.class_anim" :src="tools.getImgFileByElem(myel, rec)" />
               <q-card-section>
                 <div :class="` ` + rec.size" :style="`color: ` + rec.color">
                   {{ rec.alt }}
@@ -61,7 +61,7 @@
               <!--<q-slide-transition>
             <div v-show="expanded">
               <q-separator />
-              <q-card-section class="text-subitle2">
+              <q-card-section class="text-subtitle2">
 
               </q-card-section>
             </div>
@@ -84,7 +84,7 @@
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
         <div>
           <div
-            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()+ ` `+ myel.class_anim"
             @click="clickOnElem"
           >
             <CTitle
@@ -100,22 +100,51 @@
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
         <div>
           <div
-            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
             @click="clickOnElem"
           >
             <CImgTitle
-              v-if="myel.container"
+              v-if="myel.image"
-              :src="myel.container"
+              :src="tools.getImgFileByElem(myel, rec)"
-              :title="myel.title"
+              :title="myel.container"
+              :legendinside="myel.container2"
             >
             </CImgTitle>
           </div>
         </div>
+      </div> <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
+        <div>
+          <div
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+            @click="clickOnElem"
+          >
+            <CImgPoster
+              v-if="myel.image"
+              :src="tools.getImgFileByElem(myel, rec)"
+              :title="myel.container"
+              :myheight="myel.heightimg"
+              :colorTitle="myel.color"
+              :classTitle="myel.class4"
+              :vertalign="myel.vertalign"
+              :speed="myel.speed"
+              :classSubtitle="myel.class3"
+              :colorSubtitle="myel.colorsub"
+              :legendinside="myel.container2"
+              :logo="tools.getImgFileByFilename(myel, myel.container3)"
+              :logoheight="myel.height"
+              :logowidth="myel.width"
+              :fit="myel.fit"
+              :class_anim="myel.class_anim"
+              :class_anim2="myel.class_anim2"
+            >
+            </CImgPoster>
+          </div>
+        </div>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
         <div>
           <div
-            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
             @click="clickOnElem"
             v-html="myel.containerHtml"
           ></div>
@@ -124,11 +153,11 @@
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
         <div class="text-center">
           <div
-            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
             @click="clickOnElem"
           >
             <q-img
-              :src="getImgFileByElem(myel.container)"
+              :src="tools.getImgFileByElem(myel.image)"
               :fit="myel.fit"
               class="img"
               :width="myel.widthimg ? myel.widthimg : undefined"
@@ -141,11 +170,11 @@
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
         <div class="text-center">
           <div
-            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
             @click="clickOnElem"
           >
             <q-img
-              :src="getImgFileByElem(myel)"
+              :src="tools.getImgFileByElem(myel)"
               :fit="myel.fit"
               class="img"
               :width="myel.widthimg ? myel.widthimg : undefined"

src/components/CMyFieldRec/CMyFieldRec.ts

@@ -97,6 +97,11 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    path: {
+      tupe: String,
+      required: false,
+      default: '',
+    },
     nosaveToDb: {
       type: Boolean,
       required: false,
@@ -152,6 +157,7 @@ export default defineComponent({
         else
           mykey.value = props.field
       }
+      console.log('table', props.table, 'col.value', col.value, 'field', props.field, 'mykey', mykey.value)
 
     }
 

src/components/CMyFieldRec/CMyFieldRec.vue

@@ -44,6 +44,7 @@
         :pickup="pickup"
         v-model:row="rec"
         minuteinterval="1"
+        :path="path"
         :nosaveToDb="nosaveToDb"
         @showandsave="showandsel"
       >

src/components/CMyPage/CMyPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="mypath && !!rec">
-      <div class="q-ma-sm q-gutter-sm q-pa-xs">
+      <div class="q-ma-xs q-gutter-xs q-pa-xs">
         <div v-if="!!rec.img1" class="text-center">
           <q-img :src="``+ rec.img1" class="img"></q-img>
         </div>

src/components/CMyPageElem/CMyPageElem.ts

@@ -63,6 +63,7 @@ export default defineComponent({
     const globalStore = useGlobalStore()
 
     const editOn = ref(false)
+    const visuEditor = ref(false)
     const addOn = ref(false)
     const myelemVoid = ref({ _id: objectId(), active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value } as IMyElem)
 
@@ -107,6 +108,7 @@ export default defineComponent({
     function selElemClick(myelem: IMyElem) {
       console.log('mypageelem selElemClick', myelem)
       selElem.value = myelem
+      visuEditor.value = !!myelem
     }
 
     function mounted() {
@@ -127,6 +129,7 @@ export default defineComponent({
       rec, myelems,
       mypathin,
       editOn,
+      visuEditor,
       addOn,
       tools,
       shared_consts,

src/components/CMyPageElem/CMyPageElem.vue

@@ -9,10 +9,20 @@
         icon="fas fa-pencil-alt"
       >
       </q-toggle>
+
+      <q-toggle
+        v-if="tools.isManager()"
+        v-model="visuEditor"
+        color="green"
+        @update:model-value="changeVisuDrawer(mypathin, editOn)"
+        icon="fas fa-pencil-alt"
+      >
+      </q-toggle>
+
       <q-drawer
-        v-model="editOn"
+        v-model="visuEditor"
         side="right"
-        :width="400"
+        :width="350"
         :breakpoint="700"
         elevated
       >
@@ -25,7 +35,7 @@
               color="white"
               icon="close"
               @click="
-                editOn = false;
+                visuEditor = false;
               "
             ></q-btn>
           </q-bar>
@@ -38,7 +48,7 @@
         </q-scroll-area>
       </q-drawer>
 
-      <div class="q-ma-sm q-gutter-sm q-pa-xs">
+      <div class="q-ma-xs q-gutter-xs q-pa-xs">
         <div v-if="!!rec.img1" class="text-center">
           <q-img :src="`` + rec.img1" class="img"></q-img>
         </div>

src/components/CMyPopupEdit/CMyPopupEdit.ts

@@ -762,6 +762,7 @@ export default defineComponent({
       noPopupeditByCol,
       getTitleEditor,
       t,
+      myrow,
     }
   }
 })

src/components/CMyPopupEdit/CMyPopupEdit.vue

@@ -174,7 +174,7 @@
           <div v-else-if="col.fieldtype === costanti.FieldType.listimages" style="text-align: center;">
             <CGallery
               :imagebak="col.showpicprofile_ifnotset ? ((userStore.getImgByProfile(row, true) === '') ? costanti.NESSUN_IMMAGINE : userStore.getImgByProfile(row, true)) : ''"
-              :title="tools.getTitleGall()"
+              :title="tools.getTitleGall(table)"
               :directory="tools.getDirectoryGall(myrow, table, path)"
               :imgGall="myvalue"
               :isInModif="isInModif"
@@ -197,8 +197,8 @@
               {{ $t('reg.photo') }}
               <CGallery
                 :imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
-                :title="tools.getTitleGall()"
+                :title="tools.getTitleGall(table)"
-                :directory="tools.getDirectoryGall()"
+                :directory="tools.getDirectoryGall(myrow, table, path)"
                 :imgGall="[{ imagefile: myvalue }]"
                 :edit="isviewfield()"
                 :canModify="canModify"
@@ -239,8 +239,8 @@
               <CSelectImage
                 v-bind="$attrs"
                 :imagebak="col.showpicprofile_ifnotset ? userStore.getImgByProfile(row['profile'], true) : ''"
-                :title="tools.getTitleGall()"
+                :title="tools.getTitleGall(table)"
-                :directory="tools.getDirectoryGall()"
+                :directory="tools.getDirectoryGall(myrow, table, path)"
                 :imgGall="[myvalue]"
                 :edit="isviewfield()"
                 :canModify="canModify"

src/components/LandingFooter/LandingFooter.ts

@@ -1,5 +1,5 @@
 import {
-  defineComponent,
+  defineComponent, ref,
 } from 'vue'
 
 import { tools } from '@src/store/Modules/tools'
@@ -25,6 +25,8 @@ export default defineComponent({
 
     const { getarrValDb, getValDb } = MixinBase()
 
+    const site = ref(globalStore.site)
+
     console.log('LandingFooter - INIT')
 
     function TelegramSupport() {
@@ -36,7 +38,10 @@ export default defineComponent({
     }
 
     function Telegram_UsernameHttp() {
-      return tools.getHttpForTelegram(globalStore.getValueSettingsByKey('TELEGRAM_USERNAME', false))
+      if (site.value!.contacts!.telegram)
+        return tools.getHttpForTelegram(site.value!.contacts!.telegram)
+      else
+        return ''
     }
 
     function FBPage() {
@@ -54,7 +59,7 @@ export default defineComponent({
 
     function ChatWhatsapp() {
       // @ts-ignore
-      return tools.getHttpForWhatsapp(this.Whatsapp_Cell())
+      return tools.getHttpForWhatsapp(site.value.contacts.whatsapp)
     }
 
     return {
@@ -69,7 +74,8 @@ export default defineComponent({
       tools,
       toolsext,
       getarrValDb,
-      getValDb
+      getValDb,
+      site,
     }
   },
 })

src/components/LandingFooter/LandingFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <section class="landing__footer">
+    <section v-if="site" class="landing__footer">
       <div class="row justify-between items-start q-col-gutter-xs">
         <div class="col-12 col-sm-4 ">
           <!--<span v-html="t('homepage.footer.description')">-->
@@ -14,10 +14,10 @@
 
           <div class=" q-my-md">
             <div class="landing__footer-icons row flex-center margin_buttons">
-              <a v-if="!!FBPage()" :href="FBPage()" target="_blank">
+              <a v-if="!!site.contacts.facebook" :href="site.contacts.facebook" target="_blank">
                 <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"> </i></a>
 
-              <a v-if="!!InstagramPage()" :href="InstagramPage()" target="_blank">
+              <a v-if="!!site.contacts.instagram" :href="site.contacts.instagram" target="_blank">
                 <i aria-hidden="true" class="q-icon fab fa-instagram icon_contact links"> </i></a>
 
               <a v-if="!!TwitterPage()" :href="TwitterPage()" target="_blank">
@@ -28,7 +28,7 @@
                 <span class="text-h5 text-white">Supporto Tecnico: </span>
                 <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></i></a>
 
-              <a v-if="!!Whatsapp_Cell()" :href="ChatWhatsapp()" target="_blank">
+              <a v-if="!!ChatWhatsapp()" :href="ChatWhatsapp()" target="_blank">
                 <i aria-hidden="true" class="q-icon fab fa-whatsapp icon_contact links"></i></a>
 
               <a v-if="!!Telegram_UsernameHttp()" :href="Telegram_UsernameHttp()" target="_blank">
@@ -45,10 +45,10 @@
             </div>
           </div>
 
-          <div v-if="getValDb('URLMAP', false)" class="text-center">
+          <div v-if="site.contacts.map" class="text-center">
             <span v-html="getValDb('MAP_TITLE', false)"></span>
             <br>
-            <a :href="getValDb('URLMAP', false)" target="_blank" class="footer_link">Apri Mappa</a>
+            <a :href="site.contacts.map" target="_blank" class="footer_link">Apri Mappa</a>
           </div>
 
           <!--<div class="q-mt-xs copyrights">-->
@@ -64,10 +64,10 @@
 
               <div class="mycontacts_text">
                 <i
-                  v-if="getValDb('MAIN_EMAIL', false)" aria-hidden="true"
+                  v-if="site.contacts.email" aria-hidden="true"
                   class="q-icon fas fa-envelope q-mx-sm"></i>
-                <a :href="`mailto:` + getValDb('MAIN_EMAIL', false)" class="links">{{
+                <a :href="`mailto:` + site.contacts.email" class="links">{{
-                    getValDb('MAIN_EMAIL', false)
+                    site.contacts.email
                   }}</a><br>
                 <div style="margin-bottom: 20px;"></div>
                 <div
@@ -158,7 +158,7 @@ class="footer_link" @click="navigate" @keypress.enter="navigate"
         </div>
       </div>
     </section>
-    <q-page-sticky v-if="ChatWhatsapp()" position="bottom-right" :offset="[18, 78]">
+    <q-page-sticky v-if="site.whatsapp_home" position="bottom-right" :offset="[18, 78]">
       <q-btn
         fab icon="fab fa-whatsapp" color="green" type="a" :href="ChatWhatsapp()" target="__blank"
         class="mybtn_sticky"/>

src/components/index.ts

@@ -15,6 +15,7 @@ export * from './CMyAvatar'
 export * from './CMyCart'
 export * from './CMyFieldDb'
 export * from './CMyFieldRec'
+export * from './CImgPoster'
 export * from './CSelectImage'
 export * from './CMyPage'
 export * from './CMyPageElem'

src/css/app.scss

@@ -10,6 +10,7 @@ body {
 .text-mycol {
   color: #333333 !important;
 }
+
 .bg-mycol {
   background: #333333 !important;
 }
@@ -34,6 +35,7 @@ ul li::before {
   display: inline-block;
   width: 1em;
   margin-left: 20px;
+
   @media (max-width: 600px) {
     margin-left: 5px;
   }
@@ -44,6 +46,7 @@ ol li::before {
   display: inline-block;
   width: 1em;
   margin-left: 20px;
+
   @media (max-width: 600px) {
     margin-left: 5px;
   }
@@ -52,6 +55,7 @@ ol li::before {
 li {
   /*color: #2f2c8b;*/
   font-size: 18px;
+
   @media (max-width: 600px) {
     font-size: 1rem;
   }
@@ -70,6 +74,7 @@ h1 {
 
   max-height: 250px;
   max-width: 250px;
+
   @media (max-width: 718px) {
     max-height: 180px;
     max-width: 180px;
@@ -99,24 +104,26 @@ $heightBtn: 100%;
   //flex: 0 0 100%;
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity .2s;
 }
 
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
+.fade-enter,
-{
+.fade-leave-to
+
+/* .fade-leave-active below version 2.1.8 */
+  {
   opacity: 0;
 }
 
-.slide-enter {
+.slide-enter {}
-}
 
 .slide-enter-active {
   animation: slide-in 0.2s ease-out forwards;
 }
 
-.slide-leave {
+.slide-leave {}
-}
 
 .slide-leave-active {
   animation: slide-out 0.5s ease-out forwards;
@@ -126,6 +133,7 @@ $heightBtn: 100%;
   from {
     transform: translateX(-500px);
   }
+
   to {
     transform: translateX(0);
   }
@@ -186,7 +194,8 @@ $heightBtn: 100%;
   }
 }
 
-.links, .links a {
+.links,
+.links a {
   text-shadow: 1px 1px 1px #555 !important;
   // font-weight: bold;
   color: cornflowerblue !important;
@@ -196,13 +205,15 @@ $heightBtn: 100%;
   color: white !important;
 }
 
-.text-subtitle1, h2 {
+.text-subtitle1,
+h2 {
   margin-bottom: 6px;
   font-size: 1.35rem;
   font-weight: 400;
   line-height: 1.75rem;
   text-shadow: .25 .25rem .5rem $grayshadow;
   letter-spacing: .00937em;
+
   &.big {
     font-size: 1.5rem;
   }
@@ -214,12 +225,14 @@ $heightBtn: 100%;
   font-weight: 400;
   text-shadow: .25 .25rem .5rem $grayshadow;
   letter-spacing: .00937em;
+
   &.big {
     font-size: 1.5rem;
   }
 }
 
-.text-subtitle2, h3 {
+.text-subtitle2,
+h3 {
   margin-bottom: 4px;
   font-size: 1.15rem;
   font-weight: 400;
@@ -263,9 +276,11 @@ $heightBtn: 100%;
   .text-subtitle1 {
     font-size: 1.25rem;
   }
+
   .text-subtitle2 {
     font-size: 1rem;
   }
+
   .text-subtitle3 {
     font-size: 0.75rem;
   }
@@ -281,6 +296,7 @@ $heightBtn: 100%;
   .text-big {
     font-size: 1.25rem;
   }
+
   .text-sobig {
     font-size: 1.50rem;
   }
@@ -291,10 +307,12 @@ $heightBtn: 100%;
   max-width: 400px;
   min-width: 250px;
   padding: 1rem 1rem;
+
   @media (max-width: 500px) {
     max-width: 400px;
     min-width: 250px;
   }
+
   // box-shadow: none;
 }
 
@@ -355,7 +373,11 @@ $heightBtn: 100%;
   font-family: "Lucida Calligraphy", serif;
 }
 
-.cltexth3, .cltexth2, .cltexth4, .cltexth5, .cltexth6 {
+.cltexth3,
+.cltexth2,
+.cltexth4,
+.cltexth5,
+.cltexth6 {
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 1.75rem;
@@ -379,7 +401,9 @@ $heightBtn: 100%;
   font-size: 1.5rem;
 }
 
-.boldhigh, .boldop, .text-big {
+.boldhigh,
+.boldop,
+.text-big {
   font-weight: 500;
   text-shadow: .05rem .05rem .05rem $grayshadow;
 }
@@ -413,39 +437,18 @@ $heightBtn: 100%;
 }
 
 @media (max-width: 3000px) {
-  .q-parallax__media > img, .myclimg {
+
-    max-height: 800px !important;
+  .myclimg,
-    min-width: inherit !important;
+  .maxwidth {
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
     height: 750px !important;
   }
 }
 
-@media (max-width: 1600px) {
-  .q-parallax__media > img, .myclimg {
-    max-height: 800px !important;
-    min-width: inherit !important;
-    min-height: inherit !important;
-  }
-}
-
-@media (max-width: 1400px) {
-  .q-parallax__media > img, .myclimg {
-    max-height: 800px !important;
-    min-width: inherit !important;
-    min-height: inherit !important;
-  }
-}
 
 @media (max-width: 1200px) {
-  .q-parallax__media > img, .myclimg {
+
-    max-height: 800px !important;
+  .myclimg,
-    min-width: inherit !important;
+  .maxwidth {
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
     height: 700px !important;
   }
 }
@@ -455,45 +458,33 @@ $heightBtn: 100%;
 }
 
 @media (max-width: 1000px) {
-  .q-parallax__media > img, .myclimg {
+
-    max-height: 700px !important;
+  .myclimg,
-    min-width: inherit !important;
+  .maxwidth {
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
     height: 650px !important;
   }
 }
 
 @media (max-width: 800px) {
-  .q-parallax__media > img, .myclimg {
+
-    max-height: 600px !important;
+  .myclimg,
-    min-width: inherit !important;
+  .maxwidth {
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
     height: 550px !important;
   }
 }
 
 @media (max-width: 700px) {
-  .q-parallax__media > img, .myclimg {
+
-    max-height: 500px !important;
+  .myclimg,
-    min-width: inherit !important;
+  .maxwidth {
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
     height: 400px !important;
   }
 }
 
 @media (max-width: 600px) {
-  .q-parallax__media > img, .myclimg {
+
-    max-height: 450px !important;
+  .myclimg,
-    min-height: inherit !important;
+  .maxwidth {
-    min-width: 100% !important;
-  }
-  .myclimg, .maxwidth {
     height: 400px !important;
   }
 }
@@ -505,12 +496,14 @@ $heightBtn: 100%;
     left: -9999px;
     top: -9999px;
   }
+
   div#preloader img {
     display: block;
   }
 }
 
 @media print {
+
   div#preloader,
   div#preloader img {
     visibility: hidden;
@@ -560,14 +553,14 @@ $heightBtn: 100%;
   margin: 5px;
 }
 
-.text-evidente{
+.text-evidente {
   font-size: 1.25rem;
   color: blue;
   line-height: 1.75rem;
   letter-spacing: .01em;
 }
 
-.text-evidente2{
+.text-evidente2 {
   font-size: 1.25rem;
   color: blue;
   line-height: 1.75rem;
@@ -606,7 +599,7 @@ $heightBtn: 100%;
   margin: -8px -8px;
 }
 
-.margin_buttons > * {
+.margin_buttons>* {
   margin: 12px 12px !important;
 }
 
@@ -640,7 +633,9 @@ $heightBtn: 100%;
   overflow-wrap: break-word;
 }
 
-.clBorderWarning, .clBorderZoom, .clBorderTutor {
+.clBorderWarning,
+.clBorderZoom,
+.clBorderTutor {
   border: #f69f09 solid 5px;
   border-radius: 32px;
   font-size: 1rem;
@@ -654,7 +649,8 @@ $heightBtn: 100%;
   border: #666cf6 solid 3px;
 }
 
-.clBorderImportant, .clBorderSteps {
+.clBorderImportant,
+.clBorderSteps {
   border: red solid 5px;
   border-radius: 16px;
   font-size: 1rem;
@@ -718,6 +714,7 @@ $heightBtn: 100%;
 
   max-height: 350px;
   max-width: 350px;
+
   @media (max-width: 718px) {
     max-height: 350px;
     max-width: 350px;
@@ -735,6 +732,7 @@ $heightBtn: 100%;
 
   max-height: 550px;
   max-width: 550px;
+
   @media (max-width: 718px) {
     max-height: 350px;
     max-width: 350px;
@@ -747,19 +745,20 @@ $heightBtn: 100%;
   margin-right: auto;
 }
 
-.text-h7{
+.text-h7 {
   font-size: 1rem;
 }
 
-.text-h8{
+.text-h8 {
   font-size: 0.85rem !important;
 }
 
-.text-h9{
+.text-h9 {
   font-size: 0.65rem !important;
 }
 
-.bordo_stondato, .bordo_stondato_blu{
+.bordo_stondato,
+.bordo_stondato_blu {
   margin: 4px;
   border-radius: 3rem;
   padding-left: 14px;
@@ -773,7 +772,8 @@ $heightBtn: 100%;
   border: solid 3px #0f01b5;
 }
 
-.bordo_stondato2, .bordo_stondato_blu2{
+.bordo_stondato2,
+.bordo_stondato_blu2 {
   margin: 4px;
   border-radius: 3rem;
   padding-left: 2px;
@@ -783,7 +783,7 @@ $heightBtn: 100%;
   border: solid 3px #49b502;
 }
 
-.bordo_stondato_stretto{
+.bordo_stondato_stretto {
   margin: 4px;
   border-radius: 3rem;
   padding-left: 14px;
@@ -793,7 +793,7 @@ $heightBtn: 100%;
   border: solid 3px #49b502;
 }
 
-.bordo_stondato_small{
+.bordo_stondato_small {
   margin: 0px;
   border-radius: 2rem;
   padding-left: 4px;
@@ -803,7 +803,7 @@ $heightBtn: 100%;
   border: solid 2px #49b502;
 }
 
-.bordo_stondato_pending{
+.bordo_stondato_pending {
   margin: 4px;
   border-radius: 3rem;
   padding-left: 14px;
@@ -813,7 +813,7 @@ $heightBtn: 100%;
   border: solid 1px #4a6598;
 }
 
-.bordo_stondato_circuiti{
+.bordo_stondato_circuiti {
   margin: 4px;
   border-radius: 1.15rem;
   padding-left: 5px;
@@ -824,7 +824,7 @@ $heightBtn: 100%;
   box-shadow: 0 0 6px rgba(246, 246, 246, 0.2);
 }
 
-.bordo_quadrato{
+.bordo_quadrato {
   margin: 1px;
   border-radius: 0.5rem;
   padding-left: 2px;
@@ -844,26 +844,32 @@ $heightBtn: 100%;
   /* this is when the loading indicator appears */
 
 }
+
 .my-sticky-header-table .q-table__middle {
   max-height: 650px !important;
+
   @media (max-width: 718px) {
     // PER VERSIONE MOBILE
     max-height: 400px !important;
   }
 }
+
 .my-sticky-header-table .q-table__top,
 .my-sticky-header-table .q-table__bottom,
 .my-sticky-header-table thead tr:first-child th {
   /* bg color is important for th; just specify one */
   background-color: #f0ffff;
 }
+
 .my-sticky-header-table thead tr th {
   position: sticky;
   z-index: 1;
 }
+
 .my-sticky-header-table thead tr:first-child th {
   top: 0;
 }
+
 .my-sticky-header-table.q-table--loading thead tr:last-child th {
   /* height of all previous header rows */
   top: 48px;
@@ -875,10 +881,12 @@ $heightBtn: 100%;
   margin-right: auto;
   max-width: 800px;
   min-width: 800px;
+
   @media (max-width: 500px) {
     max-width: 350px;
     min-width: 300px;
   }
+
   padding-bottom: 20px;
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -889,6 +897,7 @@ $heightBtn: 100%;
 }
 
 .my-card-shadow:hover {
+
   // transition: transform .2s ease-in;
   // transform: scale(1.03);
   @media (max-width: 500px) {
@@ -897,44 +906,50 @@ $heightBtn: 100%;
 }
 
 
-.text-small{
+.text-small {
   font-size: 0.90rem;
+
   @media (max-width: 500px) {
     font-size: 0.8rem !important;
   }
 }
 
 #mycontainer {
-  min-height:100%;
+  min-height: 100%;
-  position:relative;
+  position: relative;
 }
+
 .myheader {
   padding: 5px;
+
   @media (max-width: 500px) {
     padding: 1px;
   }
 }
+
 #mybody {
   padding: 5px;
+
   @media (max-width: 500px) {
     padding: 1px;
   }
 }
-.myfooter{
 
-}
+.myfooter {}
 
-.iconplusminus{
+.iconplusminus {
   font-size: 6px;
 }
 
-.clpos{
+.clpos {
   color: #C0C0C0;
 }
-.clresp{
+
+.clresp {
   color: #206d24;
 }
-.clrespempty{
+
+.clrespempty {
   color: #DDDDDD;
 }
 
@@ -968,12 +983,13 @@ $heightBtn: 100%;
   cursor: pointer;
 }
 
-.centeritems{
+.centeritems {
   place-content: center;
 }
 
 .combowidth {
   min-width: 190px;
+
   @media (max-width: 450px) {
     min-width: 125px;
     white-space: nowrap;
@@ -985,7 +1001,7 @@ $heightBtn: 100%;
   height: 90px;
 }
 
-.dialog_card{
+.dialog_card {
   min-width: 100%;
   width: 100% !important;
   margin-left: 2px !important;
@@ -1002,14 +1018,14 @@ $heightBtn: 100%;
   overflow-wrap: anywhere;
 }
 
-.imgprofile{
+.imgprofile {
   border: 0px solid rgb(29, 118, 13);
   border-radius: 16px;
   box-shadow: 0 0 45px rgba(246, 246, 246, 0.2);
   margin: 1px;
 }
 
-.imgprofile_small{
+.imgprofile_small {
   border: 0px solid rgb(29, 118, 13);
   border-radius: 30px;
   box-shadow: 0 0 45px rgba(246, 246, 246, 0.2);
@@ -1017,7 +1033,7 @@ $heightBtn: 100%;
   transform: scale(1.0);
 }
 
-.iconprofile_small{
+.iconprofile_small {
   border-radius: 30px;
 }
 
@@ -1025,33 +1041,36 @@ $heightBtn: 100%;
   width: -webkit-fill-available;
 }
 
-.small-screen-only{
+.small-screen-only {
   @media (max-width: $breakpoint-xs-max) {
     display: block;
   }
+
   @media (min-width: $breakpoint-sm-min) {
     display: none;
   }
 }
 
-.large-screen-only{
+.large-screen-only {
   @media (max-width: $breakpoint-xs-max) {
     display: none;
   }
+
   @media (min-width: $breakpoint-sm-min) {
     display: block;
   }
 }
 
-.no-padding{
+.no-padding {
   padding: 0 !important;
 }
 
-.popupedit{
+.popupedit {
   border: 1px solid #bbb;
   border-radius: $generic-border-radius
 }
-.dateevent{
+
+.dateevent {
   border-radius: 16px;
   border: red solid 2px;
   padding: 3px;
@@ -1063,15 +1082,15 @@ $heightBtn: 100%;
 
 }
 
-.datainizio, .datafine{
+.datainizio,
+.datafine {
   font-weight: bold;
 }
 
-.regione{
+.regione {}
 
-}
+.accom_num,
-
+.accom_maxosp {
-.accom_num, .accom_maxosp {
   font-size: 1.25rem;
   background-color: green;
   font-weight: bold;
@@ -1084,10 +1103,10 @@ $heightBtn: 100%;
   background-color: blue !important;
 }
 
-.img_effetto_3d{
+.img_effetto_3d {
   border-radius: 10px !important;
   height: 300px;
-  max-width:300px;
+  max-width: 300px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
 }
 
@@ -1096,16 +1115,16 @@ $heightBtn: 100%;
   src: url(./fonts/walterturncoat.woff);
 }
 
-.title_shadow{
+.title_shadow {
-  font-family: WalterTurncoat,handwriting, Arial, sans-serif;
+  font-family: WalterTurncoat, handwriting, Arial, sans-serif;
   font-size: 1.25rem;
-  color: #8300e9!important;
+  color: #8300e9 !important;
   font-weight: 500;
   text-shadow: .1rem .1rem .1rem $grayshadow;
 }
 
-.title_view_shadow{
+.title_view_shadow {
-  font-family: WalterTurncoat,handwriting, Arial, sans-serif;
+  font-family: WalterTurncoat, handwriting, Arial, sans-serif;
   font-size: 0.85rem;
   text-shadow: .05rem .05rem .05rem $grayshadow;
   letter-spacing: 0.25px;
@@ -1123,40 +1142,41 @@ $heightBtn: 100%;
 }
 
 .q-carousel__slide {
-  background-size: contain  !important;
+  background-size: contain !important;
   background-position: 50% center !important;
   background-repeat: no-repeat !important;
 }
 
 .carousel_img {
   //background-image: url(../../public/images/cibo_sano.jpg);
-  background-size: contain  !important;
+  background-size: contain !important;
   background-position: 50% center !important;
   background-repeat: no-repeat !important;
 }
 
-.username{
+.username {
   font-weight: bold;
   text-shadow: .25 .25rem .5rem $grayshadow;
   letter-spacing: 0.025rem;
   font-style: italic;
 }
 
-.q-card__section{
+.q-card__section {
   @media (max-width: 600px) {
     padding: 8px !important;
   }
 }
+
 .align_elem_right {
   margin-left: auto;
 }
 
-.text-section{
+.text-section {
   font-size: 1.15rem;
   font-weight: bold;
 }
 
-.sezioni{
+.sezioni {
   vertical-align: center;
   padding: 4px;
 }
@@ -1207,3 +1227,77 @@ $heightBtn: 100%;
   background-position: 50% center !important;
   background-repeat: no-repeat !important;
 }
+
+.poster_shadows {
+  border-radius: 30px;
+  background: #1729ea;
+  background: -webkit-linear-gradient(45deg, #17ead9, #6078ea) !important;
+  background: linear-gradient(45deg, #17ead9, #6078ea) !important;
+}
+
+.duration-2s {
+  transition-duration: 5s !important;
+}
+
+.duration-3s {
+  transition-duration: 3s !important;
+}
+
+.duration-4s {
+  transition-duration: 4s !important;
+}
+
+.duration-5s {
+  transition-duration: 5s !important;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fromsky-enter-active,
+.fromsky-leave-active {
+  transition: opacity 2s ease;
+}
+
+.fromsky-enter-from {
+  top: -100px;
+}
+
+.fromsky-leave-to {
+  top: initial;
+  opacity: 0;
+}
+
+.anim_toBottom {
+  animation: moveToBottom 2s ease-in-out;
+}
+.anim_toRight {
+  animation: moveToRight 2s ease-in-out;
+}
+
+@keyframes moveToRight {
+  0% {
+    transform: translateX(-300px);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes moveToBottom {
+  0% {
+    transform: translateY(-100px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}

src/model/GlobalStore.ts

@@ -120,7 +120,9 @@ export interface IMyElem {
   container2?: string
   container3?: string
   span?: boolean
+  transition?: boolean
   align?: number
+  vertalign?: number
   fit?: string
   parambool?: boolean
   parambool2?: boolean
@@ -142,6 +144,9 @@ export interface IMyElem {
   image?: string
   class2?: string
   class3?: string
+  class4?: string
+  class_anim?: string
+  class_anim2?: string
   styleadd?: string
   list?: IImgGallery[]
   listcards?: IMyCard[]
@@ -175,6 +180,7 @@ export interface IMyPage {
   active?: boolean
   inmenu?: boolean
   color?: string
+  colorsub?: string
   onlyif_logged?: boolean
   only_residenti?: boolean
   only_consiglio?: boolean
@@ -190,6 +196,17 @@ export interface IOption {
   options: number
 }
 
+export interface IContacts {
+  facebook?: string
+  instagram?: string
+  whatsapp?: string
+  telegram?: string
+  youtube?: string
+  email?: string
+  address?: string
+  map?: string
+}
+
 export interface ISites {
   _id?: string
   attiva?: boolean
@@ -213,6 +230,7 @@ export interface ISites {
   confsite: IOption
   description?: string
   keywords?: string
+  contacts?: IContacts
 }
 
 export interface INewsToSent {

src/rootgen/admin/confsite/confsite.ts

@@ -16,6 +16,7 @@ export default defineComponent({
   setup() {
 
     const mysite = ref(null)
+    const tab = ref('server')
 
     const globalStore = useGlobalStore()
 
@@ -28,6 +29,7 @@ export default defineComponent({
     return {
       mysite,
       costanti,
+      tab,
     }
   }
 })

src/rootgen/admin/confsite/confsite.vue

@@ -31,10 +31,10 @@
           :rec="mysite"
           mykey="adminemail"
           debounce="1000"
+          :type="costanti.FieldType.string"
         >
         </CMyFieldDb>
 
-
         <CMyFieldDb
           title="Titolo"
           table="sites"
@@ -51,6 +51,7 @@
           table="sites"
           :id="mysite._id"
           :rec="mysite"
+          :type="costanti.FieldType.string"
           mykey="description"
         >
         </CMyFieldDb>
@@ -61,46 +62,162 @@
           :id="mysite._id"
           :rec="mysite"
           mykey="keywords"
+          :type="costanti.FieldType.string"
           debounce="1000"
         >
         </CMyFieldDb>
 
+        <q-tabs v-model="tab" inline-label class="bg-yellow shadow-2">
+          <q-tab name="server" label="Server" icon="mail" />
+          <q-tab name="contacts" label="Contatti" icon="mail" />
+        </q-tabs>
+
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel name="contacts">
+            <CMyFieldDb
+              table="sites"
+              title="Facebook"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="contacts"
+              mysubkey="facebook"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+            <CMyFieldDb
+              table="sites"
+              title="Instagram"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="contacts"
+              mysubkey="instagram"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+            <CMyFieldDb
+              table="sites"
+              title="Whatsapp"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="contacts"
+              mysubkey="whatsapp"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+            <CMyFieldDb
+              table="sites"
+              title="Whatsapp_home"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="contacts"
+              mysubkey="whatsapp_home"
+              debounce="1000"
+              :type="costanti.FieldType.boolean"
+            >
+            </CMyFieldDb>
+            <CMyFieldDb
+              table="sites"
+              title="Telegram"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="contacts"
+              mysubkey="telegram"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+            <CMyFieldDb
+              table="sites"
+              title="YouTube"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="contacts"
+              mysubkey="youtube"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+            <CMyFieldDb
+              table="sites"
+              title="Email"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="contacts"
+              mysubkey="email"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+            <CMyFieldDb
+              table="sites"
+              title="Address"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="contacts"
+              mysubkey="address"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+            <CMyFieldDb
+              table="sites"
+              title="Map"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="contacts"
+              mysubkey="map"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+          </q-tab-panel>
+          <q-tab-panel name="server">
+            <CMyFieldDb
+              title="Host"
+              table="sites"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="host"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+
+            <CMyFieldDb
+              title="Host Test"
+              table="sites"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="host_test"
+              debounce="1000"
+              :type="costanti.FieldType.string"
+            >
+            </CMyFieldDb>
+
+            <CMyFieldRec
+              title="Opzioni Sito"
+              table="sites"
+              :id="mysite._id"
+              :rec="mysite"
+              field="confsite.options"
+              :canEdit="true"
+              :canModify="true"
+            >
+            </CMyFieldRec>
+          </q-tab-panel>
+        </q-tab-panels>
+
         <CMyFieldDb
-          title="Host"
+          title="BOT Telegram"
-          table="sites"
+          mykey="TELEG_BOT_LINK"
-          :id="mysite._id"
+          :serv="false"
-          :rec="mysite"
+          :type="costanti.FieldType.string"
-          mykey="host"
-          debounce="1000"
         >
         </CMyFieldDb>
 
-        <CMyFieldDb
-          title="Host Test"
-          table="sites"
-          :id="mysite._id"
-          :rec="mysite"
-          mykey="host_test"
-          debounce="1000"
-        >
-        </CMyFieldDb>
-
-        <CMyFieldRec
-          title="Opzioni Sito"
-          table="sites"
-          :id="mysite._id"
-          :rec="mysite"
-          field="confsite.options"
-          :canEdit="true"
-          :canModify="true">
-        </CMyFieldRec>
-
-        <CMyFieldDb title="BOT Telegram"
-                    mykey="TELEG_BOT_LINK"
-                    :serv="false"
-                    :type="costanti.FieldType.string">
-        </CMyFieldDb>
-
         <CMyFieldDb
           title="Nome del BOT Telegram"
           mykey="TELEG_BOT_NAME"
@@ -133,7 +250,6 @@
           debounce="1000"
         >
         </CMyFieldDb>
-
       </div>
     </div>
   </CMyPage>

src/store/Modules/fieldsTable.ts

@@ -125,6 +125,7 @@ export const colgallery = [
 
 export const colmylistcards = [
   AddCol({ name: 'imagefile', label_trans: 'imagefile', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'image', label_trans: 'image', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'alt', label_trans: 'alt', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'description', label_trans: 'description', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'style', label_trans: 'style' }),
@@ -146,6 +147,7 @@ export const colmyelems = [
   AddCol({ name: 'container3', label_trans: 'myelems.container3' }),
   AddCol({ name: 'img', label_trans: 'myelems.img' }),
   AddCol({ name: 'align', label_trans: 'myelems.align', fieldtype: costanti.FieldType.number }),
+  AddCol({ name: 'vertalign', label_trans: 'myelems.vertalign', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'fit', label_trans: 'myelems.fit', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'parambool', label_trans: 'myelems.parambool', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'parambool2', label_trans: 'myelems.parambool2', fieldtype: costanti.FieldType.boolean }),
@@ -163,6 +165,7 @@ export const colmyelems = [
   AddCol({ name: 'width', label_trans: 'myelems.width', fieldtype: costanti.FieldType.number  }),
   AddCol({ name: 'onlyif_logged', label_trans: 'myelems.onlyif_logged', fieldtype: costanti.FieldType.boolean  }),
   AddCol({ name: 'color', label_trans: 'myelems.color' }),
+  AddCol({ name: 'colorsub', label_trans: 'myelems.colorsub' }),
   AddCol({ name: 'class', label_trans: 'myelems.class' }),
   AddCol({ name: 'styleadd', label_trans: 'myelems.styleadd' }),
   AddCol({
@@ -1460,6 +1463,56 @@ export const colTableSites = [
     fieldtype: costanti.FieldType.binary,
     jointable: 'confsite_opt',
   }),
+  AddCol({
+    name: 'contacts.facebook',
+    field: 'contacts',
+    subfield: 'facebook',
+    label_trans: 'reg.facebook',
+    fieldtype: costanti.FieldType.string,
+  }),
+  AddCol({
+    name: 'contacts.instagram',
+    field: 'contacts',
+    subfield: 'instagram',
+    label_trans: 'reg.instagram',
+  }),
+  AddCol({
+    name: 'contacts.whatsapp',
+    field: 'contacts',
+    subfield: 'whatsapp',
+    label_trans: 'reg.whatsapp',
+  }),
+  AddCol({
+    name: 'contacts.whatsapp',
+    field: 'contacts',
+    subfield: 'whatsapp',
+    label_trans: 'reg.whatsapp_home',
+    fieldtype: costanti.FieldType.boolean,
+  }),
+  AddCol({
+    name: 'contacts.telegram',
+    field: 'contacts',
+    subfield: 'telegram',
+    label_trans: 'reg.telegram',
+  }),
+  AddCol({
+    name: 'contacts.email',
+    field: 'contacts',
+    subfield: 'email',
+    label_trans: 'reg.email',
+  }),
+  AddCol({
+    name: 'contacts.address',
+    field: 'contacts',
+    subfield: 'address',
+    label_trans: 'reg.address',
+  }),
+  AddCol({
+    name: 'contacts.map',
+    field: 'contacts',
+    subfield: 'map',
+    label_trans: 'reg.map',
+  }),
   AddCol(DeleteRec),
   AddCol(DuplicateRec),
 ]

src/store/Modules/tools.ts

@@ -12,7 +12,7 @@ import {
   ITodo,
   IUserFields,
   Privacy,
-  TipoVisu, IGroup, IMySkill, IMyBacheca, IImgGallery, IMsgGlobParam, IUserExport, ISpecialField, IAccount, IMyCircuit, ISendCoin, IMovement, IMovVisu, INotif,
+  TipoVisu, IGroup, IMySkill, IMyBacheca, IImgGallery, IMsgGlobParam, IUserExport, ISpecialField, IAccount, IMyCircuit, ISendCoin, IMovement, IMovVisu, INotif, IMyElem, IMyCard,
 } from '@model'
 
 import { fieldsTable } from '@store/Modules/fieldsTable'
@@ -593,6 +593,22 @@ export const tools = {
     },
   ],
 
+  SelectListAnimation: [
+    {
+      label: '[Nessuna]',
+      value: '',
+    },
+    {
+      label: 'Dal basso verso l\'alto',
+      value: 'anim_toBottom',
+    },
+    {
+      label: 'Da sinistra verso Destra',
+      value: 'anim_toRight',
+    },
+
+  ],
+
   SelectListClass: [
     {
       label: '[Nessuna]',
@@ -632,6 +648,33 @@ export const tools = {
     },
   ],
 
+  SelectListVertAlign: [
+    {
+      label: '[Nessuno]',
+      value: 0,
+    },
+    {
+      label: 'Alto',
+      value: 1,
+    },
+    {
+      label: 'Centro',
+      value: 2,
+    },
+    {
+      label: 'Basso',
+      value: 3,
+    },
+    {
+      label: 'Basso_Sinistra',
+      value: 4,
+    },
+    {
+      label: 'Alto_Sinistra',
+      value: 5,
+    },
+  ],
+
   SelectListAlign: [
     {
       label: '[Nessuno]',
@@ -6838,6 +6881,25 @@ export const tools = {
     return ris
   },
 
+  getImgFileByFilename(elem: IMyElem, filename: string) {
+    return 'upload/pages/' + elem.path + '/' + filename
+  },
+
+  getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
+    if (elem) {
+      if (elem.type === shared_consts.ELEMTYPE.CARD) {
+        if (reccard?.imagefile)
+          return 'upload/pages/' + elem.path + '/' + reccard.imagefile
+        else
+          return ''
+      } else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
+        return 'upload/pages/' + elem.path + '/' + elem.container
+      } else {
+        return 'upload/pages/' + elem.path + '/' + elem.image
+      }
+    }
+  },
+
   // getLocale() {
   //   if (navigator.languages && navigator.languages.length > 0) {
   //     return navigator.languages[0]

yarn.lock

@@ -2720,6 +2720,11 @@ alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ==
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-align@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"