From a56ee80fbb1a012fbbfd7cb80c093d3a54819aaa Mon Sep 17 00:00:00 2001 From: Surya Paolo Date: Fri, 18 Nov 2022 18:54:30 +0100 Subject: [PATCH] CSS Animations --- package.json | 1 + quasar.conf.js | 6 +- src/common/shared_vuejs.ts | 14 + src/components/CImgPoster/CImgPoster.scss | 128 +++++++ src/components/CImgPoster/CImgPoster.ts | 102 ++++++ src/components/CImgPoster/CImgPoster.vue | 55 +++ src/components/CImgPoster/index.ts | 1 + src/components/CImgTitle/CImgTitle.vue | 2 +- src/components/CMyEditElem/CMyEditElem.ts | 23 +- src/components/CMyEditElem/CMyEditElem.vue | 250 +++++++++++--- src/components/CMyElem/CMyElem.ts | 19 +- src/components/CMyElem/CMyElem.vue | 55 ++- src/components/CMyFieldRec/CMyFieldRec.ts | 6 + src/components/CMyFieldRec/CMyFieldRec.vue | 1 + src/components/CMyPage/CMyPage.vue | 2 +- src/components/CMyPageElem/CMyPageElem.ts | 3 + src/components/CMyPageElem/CMyPageElem.vue | 18 +- src/components/CMyPopupEdit/CMyPopupEdit.ts | 1 + src/components/CMyPopupEdit/CMyPopupEdit.vue | 10 +- src/components/LandingFooter/LandingFooter.ts | 14 +- .../LandingFooter/LandingFooter.vue | 20 +- src/components/index.ts | 1 + src/css/app.scss | 324 +++++++++++------- src/model/GlobalStore.ts | 18 + src/rootgen/admin/confsite/confsite.ts | 2 + src/rootgen/admin/confsite/confsite.vue | 184 ++++++++-- src/store/Modules/fieldsTable.ts | 53 +++ src/store/Modules/tools.ts | 64 +++- upload/pages/home/sfondo.jpg | Bin 0 -> 185795 bytes yarn.lock | 5 + 30 files changed, 1131 insertions(+), 251 deletions(-) create mode 100755 src/components/CImgPoster/CImgPoster.scss create mode 100755 src/components/CImgPoster/CImgPoster.ts create mode 100755 src/components/CImgPoster/CImgPoster.vue create mode 100755 src/components/CImgPoster/index.ts create mode 100644 upload/pages/home/sfondo.jpg diff --git a/package.json b/package.json index 40d72855..efca8ed9 100755 --- 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", diff --git a/quasar.conf.js b/quasar.conf.js index b0950da4..294ec590 100755 --- 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: { diff --git a/src/common/shared_vuejs.ts b/src/common/shared_vuejs.ts index 4f1b964b..761a7526 100755 --- 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) diff --git a/src/components/CImgPoster/CImgPoster.scss b/src/components/CImgPoster/CImgPoster.scss new file mode 100755 index 00000000..a7b09fee --- /dev/null +++ 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; +} diff --git a/src/components/CImgPoster/CImgPoster.ts b/src/components/CImgPoster/CImgPoster.ts new file mode 100755 index 00000000..6f16217d --- /dev/null +++ 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, + } + }, + +}) diff --git a/src/components/CImgPoster/CImgPoster.vue b/src/components/CImgPoster/CImgPoster.vue new file mode 100755 index 00000000..41bc7251 --- /dev/null +++ b/src/components/CImgPoster/CImgPoster.vue @@ -0,0 +1,55 @@ + + + + diff --git a/src/components/CImgPoster/index.ts b/src/components/CImgPoster/index.ts new file mode 100755 index 00000000..82ece0fb --- /dev/null +++ b/src/components/CImgPoster/index.ts @@ -0,0 +1 @@ +export { default as CImgPoster } from './CImgPoster.vue' diff --git a/src/components/CImgTitle/CImgTitle.vue b/src/components/CImgTitle/CImgTitle.vue index d36aba77..90eb238e 100755 --- a/src/components/CImgTitle/CImgTitle.vue +++ b/src/components/CImgTitle/CImgTitle.vue @@ -1,6 +1,6 @@