sito Terra Della Visione...3

Pagina Operatori

src/components/COperators/COperators.scss

@@ -0,0 +1,95 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-carica {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+.text-subtitle-certificato {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-carica {
+    font-size: 1rem;
+  }
+}
+
+.op {
+  text-align: center !important;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+
+  &__cell {
+    font-size: 1rem;
+    color: red;
+  }
+
+  &__email {
+    font-size: 1rem;
+    color: #3b5998;
+  }
+
+  &__email a {
+    text-decoration: none;
+  }
+
+  &__facebook a {
+    font-size: 1rem;
+    text-decoration: none;
+  }
+
+  &__storia {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    text-align: justify;
+  }
+}
+
+.myimg {
+  border-radius: 300px !important;
+}
+
+.q-img {
+  &__image {
+    border-radius: 300px !important;
+  }
+}
+
+.myflex {
+  display: flex;
+  flex: 1;
+}
+
+.mybase {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__teacher {
+    margin-top: 5px;
+
+    &-content {
+      color: darkblue;
+    }
+
+    &-content:hover {
+
+    }
+  }
+
+}
+
+
+

src/components/COperators/COperators.ts

@@ -0,0 +1,49 @@
+import { computed, defineComponent, ref, watch } from 'vue'
+
+import { tools } from '@store/Modules/tools'
+import { CMyAvatar } from '../CMyAvatar'
+import MixinOperator from '../../mixins/mixin-operator'
+import MixinUsers from '../../mixins/mixin-users'
+import { useGlobalStore } from '@store/globalStore'
+
+
+export default defineComponent({
+  name: 'CMyTeacher',
+  components: { CMyAvatar },
+  props: {
+    myop: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+
+    const globalStore = useGlobalStore()
+    const showuserdetails = ref(false)
+    const autoplaydiscsaved = ref(0)
+    const tab = ref('one')
+
+    const mydir = ref('images/')
+
+    watch(() => showuserdetails, (value: any, old: any) => {
+      if (!showuserdetails.value) {
+        globalStore.autoplaydisc = autoplaydiscsaved.value
+      }
+    })
+
+    function executeclick(event: any) {
+      console.log('executeclick')
+      showuserdetails.value = true
+
+      autoplaydiscsaved.value = globalStore.autoplaydisc
+      globalStore.autoplaydisc = 0
+    }
+    return {
+      tab,
+      executeclick,
+      showuserdetails,
+      tools,
+      mydir,
+    }
+  },
+})

src/components/COperators/COperators.vue

@@ -0,0 +1,63 @@
+<template>
+  <div v-if="myop">
+    <div class="q-pa-md">
+      <div class="column justify-center" style="min-width: 300px">
+        <q-img
+          :src="mydir + myop.img" class="img_effetto_3d" :alt="`${myop.name} ${myop.surname}`">
+        </q-img>
+        <div class="q-ma-sm title_shadow">{{ myop.name }} {{ myop.surname ? myop.surname : '' }}</div>
+
+        <div v-if="myop.qualification" class="text-subtitle-carica text-trans">{{ myop.qualification }}</div>
+        <div v-if="myop.disciplines" class="text-subtitle-carica">{{ myop.disciplines }}</div>
+        <div v-if="myop.cell" class="op__cell">
+          <q-icon v-if="myop.cell" class="flex-icon" name="mobile_friendly"></q-icon>
+          <span v-if="myop.cell" class="q-mx-sm">{{ myop.cell }}</span>
+        </div>
+
+        <div class="row justify-center margin_buttons">
+          <q-btn
+            v-if="myop.email" fab-mini icon="fas fa-envelope"
+            color="blue-grey-6" type="a"
+            size="sm"
+            :href="tools.getemailto(myop.email)" target="__blank">
+          </q-btn>
+          <q-btn
+            v-if="tools.getHttpForWhatsapp(myop.cell)" fab-mini icon="fab fa-whatsapp"
+            color="green" type="a"
+            size="sm"
+            :href="tools.getHttpForWhatsapp(myop.cell)" target="__blank">
+          </q-btn>
+
+          <q-btn
+            v-if="tools.getHttpForTelegram(myop.usertelegram)" fab-mini icon="fab fa-telegram"
+            color="blue" type="a"
+            size="sm"
+            :href="tools.getHttpForTelegram(myop.usertelegram)" target="__blank">
+          </q-btn>
+        </div>
+        <div v-if="myop.email" class="op__email">
+          <q-icon class="flex-icon" name="contact_mail"></q-icon>&nbsp;
+          <a :href="tools.getemailto(myop.email)" target="_blank">{{ myop.email }}
+          </a>
+        </div>
+
+        <div class="op__facebook" v-if="myop.paginafb">
+          <a :href="myop.paginafb" target="_blank">
+            <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"></i> Pagina
+            Facebook
+          </a>
+        </div>
+
+        <div v-if="myop.info" class="text-normal op__storia" v-html="myop.info"></div>
+        <br>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./COperators.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './COperators.scss';
+</style>

src/components/COperators/index.ts

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