surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS Animations

Browse Source
This commit is contained in:
Surya Paolo
2022-11-18 18:54:30 +01:00
parent 495abc33be
commit a56ee80fbb
30 changed files with 1131 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/CImgPoster/CImgPoster.scss Executable file
View File

@@ -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;
}

102
src/components/CImgPoster/CImgPoster.ts Executable file
View File

@@ -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,
}
},
})

55
src/components/CImgPoster/CImgPoster.vue Executable file
View File

@@ -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>

1
src/components/CImgPoster/index.ts Executable file
View File

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

2
src/components/CImgTitle/CImgTitle.vue
View File

@@ -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>

23
src/components/CMyEditElem/CMyEditElem.ts
View File

@@ -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,
}
},

250
src/components/CMyEditElem/CMyEditElem.vue
View File

@@ -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"

19
src/components/CMyElem/CMyElem.ts
View File

@@ -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,
}
},

55
src/components/CMyElem/CMyElem.vue
View File

@@ -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"

6
src/components/CMyFieldRec/CMyFieldRec.ts
View File

@@ -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)
}

1
src/components/CMyFieldRec/CMyFieldRec.vue
View File

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

2
src/components/CMyPage/CMyPage.vue
View File

@@ -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>

3
src/components/CMyPageElem/CMyPageElem.ts
View File

@@ -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,

18
src/components/CMyPageElem/CMyPageElem.vue
View File

@@ -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>

1
src/components/CMyPopupEdit/CMyPopupEdit.ts
View File

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

10
src/components/CMyPopupEdit/CMyPopupEdit.vue
View File

@@ -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"

14
src/components/LandingFooter/LandingFooter.ts
View File

@@ -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,
}
},
})

20
src/components/LandingFooter/LandingFooter.vue
View File

@@ -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"/>

1
src/components/index.ts
View File

@@ -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'