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

Animations, Policy, Toolbar Colors

Browse Source
This commit is contained in:
Surya Paolo
2022-11-23 10:27:36 +01:00
parent 358bdd5d1e
commit 46bf74e9e2
48 changed files with 1852 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,12 +9,24 @@
>
<div>
<div v-if="myel.type === shared_consts.ELEMTYPE.TEXT">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
@click="clickOnElem"
<transition
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
{{ myel.container }}
</div>
<div
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
{{ myel.container }}
</div>
</transition>
</div>
<div
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
@@ -24,15 +36,23 @@
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<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 :class="myel.class_anim" :src="tools.getImgFileByElem(myel, rec)" />
<q-card-section>
<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
:class="tools.getClassAnim(myel.anim2)"
:src="tools.getImgFileByElem(myel, rec)"
/>
˛ <q-card-section>
<div :class="` ` + rec.size" :style="`color: ` + rec.color">
{{ rec.alt }}
</div>
<div :class="`q-mt-sm q-mb-xs ` + myel.class_anim" v-html="rec.content"></div>
<div
:class="`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)"
v-html="rec.content"
></div>
<div
v-if="rec.description"
class="text-caption"
@@ -84,7 +104,13 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.TITLE">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()+ ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<CTitle
@@ -100,19 +126,26 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<CImgTitle
v-if="myel.image"
:src="tools.getImgFileByElem(myel, rec)"
:src="tools.getImgFileByElem(myel)"
:title="myel.container"
:legendinside="myel.container2"
>
</CImgTitle>
</div>
</div>
</div> <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@@ -120,7 +153,7 @@
>
<CImgPoster
v-if="myel.image"
:src="tools.getImgFileByElem(myel, rec)"
:src="tools.getImgFileByElem(myel)"
:title="myel.container"
:myheight="myel.heightimg"
:colorTitle="myel.color"
@@ -134,8 +167,8 @@
:logoheight="myel.height"
:logowidth="myel.width"
:fit="myel.fit"
:class_anim="myel.class_anim"
:class_anim2="myel.class_anim2"
:anim="myel.anim"
:anim2="myel.anim2"
>
</CImgPoster>
</div>
@@ -144,7 +177,13 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
<div>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
v-html="myel.containerHtml"
></div>
@@ -153,7 +192,13 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGE">
<div class="text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<q-img
@@ -170,7 +215,13 @@
<div v-else-if="myel.type === shared_consts.ELEMTYPE.IMAGEUPLOAD">
<div class="text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass() + ` `+ myel.class_anim"
:class="
myel.class +
(editOn ? ` clEdit` : ``) +
getClass() +
` ` +
tools.getClassAnim(myel.anim)
"
@click="clickOnElem"
>
<q-img
@@ -201,7 +252,7 @@
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
>
<div style="color: gray;">Pagina: {{myel.container}}</div>
<div v-if="editOn" style="color: gray">Pagina: {{ myel.container }}</div>
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
@@ -241,9 +292,7 @@
</div>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
<section
class="padding_gallery bg-white text-grey-10 text-center"
>
<section class="padding_gallery bg-white text-grey-10 text-center">
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
@@ -257,9 +306,12 @@
:fit="myel.fit"
:thumbnails="myel.parambool2"
infinite
:height="myel.heightimg ? myel.heightimg.toString() : tools.getheightgallery()"
:height="
myel.heightimg
? myel.heightimg.toString()
: tools.getheightgallery()
"
>
<q-carousel-slide
v-for="(rec, index) in myel.list"
:key="index"