CSS Animations

2022-11-18 18:54:30 +01:00
parent 495abc33be
commit a56ee80fbb
30 changed files with 1131 additions and 251 deletions
--- a/package.json
+++ b/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",
--- a/quasar.conf.js
+++ b/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: {
--- a/src/common/shared_vuejs.ts
+++ b/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)
--- a/src/components/CImgPoster/CImgPoster.scss
+++ b/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;
+}
--- a/src/components/CImgPoster/CImgPoster.ts
+++ b/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,
+    }
+  },
+
+})
--- a/src/components/CImgPoster/CImgPoster.vue
+++ b/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>
--- a/src/components/CImgPoster/index.ts
+++ b/src/components/CImgPoster/index.ts
@@ -0,0 +1 @@
+export { default as CImgPoster } from './CImgPoster.vue'
--- a/src/components/CImgTitle/CImgTitle.vue
+++ b/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>
--- a/src/components/CMyEditElem/CMyEditElem.ts
+++ b/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,
    }
  },

--- a/src/components/CMyEditElem/CMyEditElem.vue
+++ b/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
-            label="Img"
-            class="fa-border"
+          <CMyFieldRec
+            title="Immagine:"
+            table="myelems"
+            :id="myel._id"
+            :rec="myel"
+            field="image"
            @update:model-value="modifElem"
-            v-model="myel.container"
-            filled
-            v-on:keyup.enter="saveElem(false)"
+            :canEdit="true"
+            :canModify="true"
+            :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"
--- a/src/components/CMyElem/CMyElem.ts
+++ b/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,
    }
  },

--- a/src/components/CMyElem/CMyElem.vue
+++ b/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"
-              :src="myel.container"
-              :title="myel.title"
+              v-if="myel.image"
+              :src="tools.getImgFileByElem(myel, rec)"
+              :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"
--- a/src/components/CMyFieldRec/CMyFieldRec.ts
+++ b/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)

    }

--- a/src/components/CMyFieldRec/CMyFieldRec.vue
+++ b/src/components/CMyFieldRec/CMyFieldRec.vue
@@ -44,6 +44,7 @@
        :pickup="pickup"
        v-model:row="rec"
        minuteinterval="1"
+        :path="path"
        :nosaveToDb="nosaveToDb"
        @showandsave="showandsel"
      >
--- a/src/components/CMyPage/CMyPage.vue
+++ b/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>
--- a/src/components/CMyPageElem/CMyPageElem.ts
+++ b/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,
--- a/src/components/CMyPageElem/CMyPageElem.vue
+++ b/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>
--- a/src/components/CMyPopupEdit/CMyPopupEdit.ts
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.ts
@@ -762,6 +762,7 @@ export default defineComponent({
      noPopupeditByCol,
      getTitleEditor,
      t,
+      myrow,
    }
  }
 })
--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/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()"
-                :directory="tools.getDirectoryGall()"
+                :title="tools.getTitleGall(table)"
+                :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()"
-                :directory="tools.getDirectoryGall()"
+                :title="tools.getTitleGall(table)"
+                :directory="tools.getDirectoryGall(myrow, table, path)"
                :imgGall="[myvalue]"
                :edit="isviewfield()"
                :canModify="canModify"
--- a/src/components/LandingFooter/LandingFooter.ts
+++ b/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,
    }
  },
 })
--- a/src/components/LandingFooter/LandingFooter.vue
+++ b/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">{{
-                    getValDb('MAIN_EMAIL', false)
+                <a :href="`mailto:` + site.contacts.email" class="links">{{
+                    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"/>
--- a/src/components/index.ts
+++ b/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'
--- a/src/css/app.scss
+++ b/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;
-    min-width: inherit !important;
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
+
+  .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;
-    min-width: inherit !important;
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
+
+  .myclimg,
+  .maxwidth {
    height: 700px !important;
  }
 }
@@ -455,45 +458,33 @@ $heightBtn: 100%;
 }

@media (max-width: 1000px) {
-  .q-parallax__media > img, .myclimg {
-    max-height: 700px !important;
-    min-width: inherit !important;
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
+
+  .myclimg,
+  .maxwidth {
    height: 650px !important;
  }
 }

@media (max-width: 800px) {
-  .q-parallax__media > img, .myclimg {
-    max-height: 600px !important;
-    min-width: inherit !important;
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
+
+  .myclimg,
+  .maxwidth {
    height: 550px !important;
  }
 }

@media (max-width: 700px) {
-  .q-parallax__media > img, .myclimg {
-    max-height: 500px !important;
-    min-width: inherit !important;
-    min-height: inherit !important;
-  }
-  .myclimg, .maxwidth {
+
+  .myclimg,
+  .maxwidth {
    height: 400px !important;
  }
 }

@media (max-width: 600px) {
-  .q-parallax__media > img, .myclimg {
-    max-height: 450px !important;
-    min-height: inherit !important;
-    min-width: 100% !important;
-  }
-  .myclimg, .maxwidth {
+
+  .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;
@@ -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;
@@ -759,7 +757,8 @@ $heightBtn: 100%;
  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;
@@ -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) {
@@ -899,6 +908,7 @@ $heightBtn: 100%;

 .text-small {
  font-size: 0.90rem;
+
  @media (max-width: 500px) {
    font-size: 0.8rem !important;
  }
@@ -908,21 +918,24 @@ $heightBtn: 100%;
  min-height: 100%;
  position: relative;
 }
+
 .myheader {
  padding: 5px;
+
  @media (max-width: 500px) {
    padding: 1px;
  }
 }
+
 #mybody {
  padding: 5px;
+
  @media (max-width: 500px) {
    padding: 1px;
  }
 }
-.myfooter{

-}
+.myfooter {}

 .iconplusminus {
  font-size: 6px;
@@ -931,9 +944,11 @@ $heightBtn: 100%;
 .clpos {
  color: #C0C0C0;
 }
+
 .clresp {
  color: #206d24;
 }
+
 .clrespempty {
  color: #DDDDDD;
 }
@@ -974,6 +989,7 @@ $heightBtn: 100%;

 .combowidth {
  min-width: 190px;
+
  @media (max-width: 450px) {
    min-width: 125px;
    white-space: nowrap;
@@ -1029,6 +1045,7 @@ $heightBtn: 100%;
  @media (max-width: $breakpoint-xs-max) {
    display: block;
  }
+
  @media (min-width: $breakpoint-sm-min) {
    display: none;
  }
@@ -1038,6 +1055,7 @@ $heightBtn: 100%;
  @media (max-width: $breakpoint-xs-max) {
    display: none;
  }
+
  @media (min-width: $breakpoint-sm-min) {
    display: block;
  }
@@ -1051,6 +1069,7 @@ $heightBtn: 100%;
  border: 1px solid #bbb;
  border-radius: $generic-border-radius
 }
+
 .dateevent {
  border-radius: 16px;
  border: red solid 2px;
@@ -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;
@@ -1147,6 +1166,7 @@ $heightBtn: 100%;
    padding: 8px !important;
  }
 }
+
 .align_elem_right {
  margin-left: auto;
 }
@@ -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);
+  }
+}
--- a/src/model/GlobalStore.ts
+++ b/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 {
--- a/src/rootgen/admin/confsite/confsite.ts
+++ b/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,
    }
  }
 })
--- a/src/rootgen/admin/confsite/confsite.vue
+++ b/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,10 +62,119 @@
          :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"
@@ -72,6 +182,7 @@
              :rec="mysite"
              mykey="host"
              debounce="1000"
+              :type="costanti.FieldType.string"
            >
            </CMyFieldDb>

@@ -82,6 +193,7 @@
              :rec="mysite"
              mykey="host_test"
              debounce="1000"
+              :type="costanti.FieldType.string"
            >
            </CMyFieldDb>

@@ -92,13 +204,18 @@
              :rec="mysite"
              field="confsite.options"
              :canEdit="true"
-          :canModify="true">
+              :canModify="true"
+            >
            </CMyFieldRec>
+          </q-tab-panel>
+        </q-tab-panels>

-        <CMyFieldDb title="BOT Telegram"
+        <CMyFieldDb
+          title="BOT Telegram"
          mykey="TELEG_BOT_LINK"
          :serv="false"
-                    :type="costanti.FieldType.string">
+          :type="costanti.FieldType.string"
+        >
        </CMyFieldDb>

        <CMyFieldDb
@@ -133,7 +250,6 @@
          debounce="1000"
        >
        </CMyFieldDb>
-
      </div>
    </div>
  </CMyPage>
--- a/src/store/Modules/fieldsTable.ts
+++ b/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),
 ]
--- a/src/store/Modules/tools.ts
+++ b/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]
--- a/upload/pages/home/sfondo.jpg
+++ b/upload/pages/home/sfondo.jpg
--- a/yarn.lock
+++ b/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"
				`@@ -0,0 +1 @@`
				`export { default as CImgPoster } from './CImgPoster.vue'`