First Committ

src/components/CImgTitle/CImgTitle.scss

@@ -0,0 +1,90 @@
+
+.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: 10px;
+  text-shadow: .2rem .2rem .2rem #3d3d3d;
+}
+
+@media (max-width: 400px) {
+  .title{
+    padding: 5px;
+    font-size: 2.5rem;
+  }
+}
+
+.mylegendinside{
+  font-size: 1rem;
+  margin-bottom: 50px;
+  opacity: .8;
+
+  @media (max-width: 400px) {
+    margin-bottom: -10px;
+  }
+}
+
+.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) {
+  }
+}

src/components/CImgTitle/CImgTitle.ts

@@ -0,0 +1,58 @@
+import { defineComponent, ref } from 'vue'
+
+import { tools } from '@src/store/Modules/tools'
+
+export default defineComponent({
+  name: 'CImgTitle',
+  props: {
+    src: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    myheight: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    myheightmobile: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    legendinside: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    legend: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  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)
+    }
+
+    return {
+      getsrc,
+      getaltimg,
+    }
+  },
+
+})

src/components/CImgTitle/CImgTitle.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <q-parallax :src="getsrc" :height="tools.myheight_imgtitle(myheight, myheightmobile)">
+            <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>
+        <div v-if="legend" class="mylegend" v-html="legend"></div>
+    </div>
+</template>
+
+<script lang="ts" src="./CImgTitle.ts">
+</script>
+<style lang="scss" scoped>
+    @import './CImgTitle.scss';
+</style>

src/components/CImgTitle/index.ts

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