From fdf2f2d2c36616795303bffbd062f54a9c39c650 Mon Sep 17 00:00:00 2001 From: Paolo Arena Date: Tue, 23 Jul 2019 20:44:06 +0200 Subject: [PATCH] Components Gallery, Book, Card, CImgText .... continue... --- .../BannerCookies/BannerCookies.scss | 17 ++ src/components/BannerCookies/BannerCookies.ts | 128 +++++++++++++ .../BannerCookies/BannerCookies.vue | 25 +++ src/components/BannerCookies/index.ts | 1 + src/components/CBook/CBook.scss | 66 +++++++ src/components/CBook/CBook.ts | 52 +++++ src/components/CBook/CBook.vue | 47 +++++ src/components/CBook/index.ts | 1 + src/components/CCard/CCard.scss | 66 +++++++ src/components/CCard/CCard.ts | 52 +++++ src/components/CCard/CCard.vue | 59 ++++++ src/components/CCard/index.ts | 1 + src/components/CImgText/CImgText.scss | 54 ++++++ src/components/CImgText/CImgText.ts | 30 +++ src/components/CImgText/CImgText.vue | 20 ++ src/components/CImgText/index.ts | 1 + src/components/CPage/CPage.scss | 0 src/components/CPage/CPage.ts | 36 ++++ src/components/CPage/CPage.vue | 28 +++ src/components/CPage/index.ts | 1 + src/components/CTitle/CTitle.scss | 18 ++ src/components/CTitle/CTitle.ts | 20 ++ src/components/CTitle/CTitle.vue | 27 +++ src/components/CTitle/index.ts | 1 + src/components/Footer/Footer.scss | 180 ++++++++++++++++++ src/components/Footer/Footer.ts | 37 ++++ src/components/Footer/Footer.vue | 87 +++++++++ src/components/Footer/index.ts | 1 + .../FormNewsletter/FormNewsletter.scss | 30 +++ .../FormNewsletter/FormNewsletter.ts | 47 +++++ .../FormNewsletter/FormNewsletter.vue | 50 +++++ src/components/FormNewsletter/index.ts | 1 + src/components/Header/Header.ts | 14 +- src/components/Header/Header.vue | 15 +- src/components/PagePolicy/PagePolicy.scss | 11 ++ src/components/PagePolicy/PagePolicy.ts | 23 +++ src/components/PagePolicy/PagePolicy.vue | 130 +++++++++++++ src/components/PagePolicy/index.ts | 1 + src/components/index.ts | 1 + src/model/Calendar.ts | 44 +++++ src/model/GlobalStore.ts | 36 ++++ src/store/Modules/GlobalStore.ts | 2 +- src/store/Modules/Projects.ts | 4 + .../Modules/Store/calendar/CalendarStore.ts | 89 +++++++++ src/store/Modules/Todos.ts | 11 +- src/store/Modules/UserStore.ts | 9 +- src/store/Modules/tools.ts | 12 +- src/store/Modules/toolsext.ts | 41 ++++ src/views/login/logoData.ts | 90 +++++++++ 49 files changed, 1692 insertions(+), 25 deletions(-) create mode 100644 src/components/BannerCookies/BannerCookies.scss create mode 100644 src/components/BannerCookies/BannerCookies.ts create mode 100644 src/components/BannerCookies/BannerCookies.vue create mode 100644 src/components/BannerCookies/index.ts create mode 100644 src/components/CBook/CBook.scss create mode 100644 src/components/CBook/CBook.ts create mode 100644 src/components/CBook/CBook.vue create mode 100644 src/components/CBook/index.ts create mode 100644 src/components/CCard/CCard.scss create mode 100644 src/components/CCard/CCard.ts create mode 100644 src/components/CCard/CCard.vue create mode 100644 src/components/CCard/index.ts create mode 100644 src/components/CImgText/CImgText.scss create mode 100644 src/components/CImgText/CImgText.ts create mode 100644 src/components/CImgText/CImgText.vue create mode 100644 src/components/CImgText/index.ts create mode 100644 src/components/CPage/CPage.scss create mode 100644 src/components/CPage/CPage.ts create mode 100644 src/components/CPage/CPage.vue create mode 100644 src/components/CPage/index.ts create mode 100644 src/components/CTitle/CTitle.scss create mode 100644 src/components/CTitle/CTitle.ts create mode 100644 src/components/CTitle/CTitle.vue create mode 100644 src/components/CTitle/index.ts create mode 100644 src/components/Footer/Footer.scss create mode 100644 src/components/Footer/Footer.ts create mode 100644 src/components/Footer/Footer.vue create mode 100644 src/components/Footer/index.ts create mode 100644 src/components/FormNewsletter/FormNewsletter.scss create mode 100644 src/components/FormNewsletter/FormNewsletter.ts create mode 100644 src/components/FormNewsletter/FormNewsletter.vue create mode 100644 src/components/FormNewsletter/index.ts create mode 100644 src/components/PagePolicy/PagePolicy.scss create mode 100644 src/components/PagePolicy/PagePolicy.ts create mode 100644 src/components/PagePolicy/PagePolicy.vue create mode 100644 src/components/PagePolicy/index.ts create mode 100644 src/model/Calendar.ts create mode 100644 src/store/Modules/Store/calendar/CalendarStore.ts create mode 100644 src/store/Modules/toolsext.ts create mode 100644 src/views/login/logoData.ts diff --git a/src/components/BannerCookies/BannerCookies.scss b/src/components/BannerCookies/BannerCookies.scss new file mode 100644 index 0000000..551a8c7 --- /dev/null +++ b/src/components/BannerCookies/BannerCookies.scss @@ -0,0 +1,17 @@ +// Animations +// slideFromBottom +.slideFromBottom-enter, .slideFromBottom-leave-to { + transform: translate(0px, 10em); +} + +.slideFromBottom-enter-to, .slideFromBottom-leave { + transform: translate(0px, 0px); +} + +.slideFromBottom-enter-active { + transition: transform .2s ease-out; +} + +.slideFromBottom-leave-active { + transition: transform .2s ease-in; +} diff --git a/src/components/BannerCookies/BannerCookies.ts b/src/components/BannerCookies/BannerCookies.ts new file mode 100644 index 0000000..e211514 --- /dev/null +++ b/src/components/BannerCookies/BannerCookies.ts @@ -0,0 +1,128 @@ +import Vue from 'vue' +import Component from 'vue-class-component' + +import { tools } from '../../store/Modules/tools' +import { toolsext } from '@src/store/Modules/toolsext' + +import Quasar, { Screen } from 'quasar' +import { Prop } from 'vue-property-decorator' + +@Component({ + name: 'BannerCookies' +}) + +export default class BannerCookies extends Vue { + public $t + @Prop({ required: true }) public urlInfo: string + + public elementId = 'id' + public disableDecline = true + public debug = false + public status = null + public supportsLocalStorage = true + public isOpen = false + + public init() { + const visitedType = this.getCookieStatus() + if (visitedType && (visitedType === 'accept' || visitedType === 'decline' || visitedType === 'postpone')) { + this.isOpen = false + } + + if (!visitedType) { + this.isOpen = true + } + if (!this.supportsLocalStorage) + this.isOpen = false + + this.status = visitedType + this.$emit('status', visitedType) + } + + public mounted() { + this.init() + } + + public checkLocalStorageFunctionality() { + // Check for availability of localStorage + try { + const test = '__cookie-check-localStorage' + window.localStorage.setItem(test, test) + window.localStorage.removeItem(test) + } catch (e) { + console.error('Local storage is not supported, falling back to cookie use') + this.supportsLocalStorage = false + } + } + + public setCookieStatus(type) { + if (this.supportsLocalStorage) { + if (type === 'accept') { + localStorage.setItem(`cookie-${this.elementId}`, 'accept') + } + if (type === 'decline') { + localStorage.setItem(`cookie-${this.elementId}`, 'decline') + } + if (type === 'postpone') { + localStorage.setItem(`cookie-${this.elementId}`, 'postpone') + } + } else { + /*if (type === 'accept') { + tinyCookie.set(`cookie-${this.elementId}`, 'accept') + } + if (type === 'decline') { + tinyCookie.set(`cookie-${this.elementId}`, 'decline') + } + if (type === 'postpone') { + tinyCookie.set(`cookie-${this.elementId}`, 'postpone') + }*/ + } + } + + public getCookieStatus() { + if (this.supportsLocalStorage) { + return localStorage.getItem(`cookie-${this.elementId}`) + } else { + // return tinyCookie.get(`cookie-${this.elementId}`) + } + } + + public accept() { + if (!this.debug) { + this.setCookieStatus('accept') + } + + this.status = 'accept' + this.isOpen = false + this.$emit('clicked-accept') + } + + public decline() { + if (!this.debug) { + this.setCookieStatus('decline') + } + + this.status = 'decline' + this.isOpen = false + this.$emit('clicked-decline') + } + + public clickInfo() { + this.isOpen = false + } + + public postpone() { + if (!this.debug) { + this.setCookieStatus('postpone') + } + + this.status = 'postpone' + this.isOpen = false + this.$emit('clicked-postpone') + } + + public removeCookie() { + localStorage.removeItem(`cookie-${this.elementId}`) + this.status = null + this.$emit('removed-cookie') + } +} diff --git a/src/components/BannerCookies/BannerCookies.vue b/src/components/BannerCookies/BannerCookies.vue new file mode 100644 index 0000000..7ab25d8 --- /dev/null +++ b/src/components/BannerCookies/BannerCookies.vue @@ -0,0 +1,25 @@ + + + + + + diff --git a/src/components/BannerCookies/index.ts b/src/components/BannerCookies/index.ts new file mode 100644 index 0000000..a4547f2 --- /dev/null +++ b/src/components/BannerCookies/index.ts @@ -0,0 +1 @@ +export {default as BannerCookies} from './BannerCookies.vue' diff --git a/src/components/CBook/CBook.scss b/src/components/CBook/CBook.scss new file mode 100644 index 0000000..8b6ae01 --- /dev/null +++ b/src/components/CBook/CBook.scss @@ -0,0 +1,66 @@ +$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; + } +} diff --git a/src/components/CBook/CBook.ts b/src/components/CBook/CBook.ts new file mode 100644 index 0000000..e6c180a --- /dev/null +++ b/src/components/CBook/CBook.ts @@ -0,0 +1,52 @@ +import Vue from 'vue' +import { Component, Prop, Watch } from 'vue-property-decorator' + +import { tools } from '../../store/Modules/tools' +import { toolsext } from '@src/store/Modules/toolsext' +import { IPerson } from '../../model/GlobalStore' + +@Component({ + name: 'CBook', + filters: { + firstchars(value) { + return tools.firstchars(value, 250) + } + } +}) + +export default class CBook extends Vue { + @Prop({ required: true, default: 'one' }) public tab + + public clicca() { + this.tab = 'two' + } + + @Prop({ required: true }) public op: IPerson + + get tools() { + return tools + } + + get myop() { + if (!!this.op) { + return this.op + } else { + return { + index: 0, + tab: '', + name: '', + sub1: '', + sub2: '', + sub3: '', + img: '', + cell: '', + email: '', + paginaweb: '', + paginafb: '', + intro: '', + info: '' + } + } + } + +} diff --git a/src/components/CBook/CBook.vue b/src/components/CBook/CBook.vue new file mode 100644 index 0000000..c99babb --- /dev/null +++ b/src/components/CBook/CBook.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/src/components/CBook/index.ts b/src/components/CBook/index.ts new file mode 100644 index 0000000..a3d83ad --- /dev/null +++ b/src/components/CBook/index.ts @@ -0,0 +1 @@ +export {default as CBook} from './CBook.vue' diff --git a/src/components/CCard/CCard.scss b/src/components/CCard/CCard.scss new file mode 100644 index 0000000..8b6ae01 --- /dev/null +++ b/src/components/CCard/CCard.scss @@ -0,0 +1,66 @@ +$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; + } +} diff --git a/src/components/CCard/CCard.ts b/src/components/CCard/CCard.ts new file mode 100644 index 0000000..a6a937b --- /dev/null +++ b/src/components/CCard/CCard.ts @@ -0,0 +1,52 @@ +import Vue from 'vue' +import { Component, Prop, Watch } from 'vue-property-decorator' + +import { tools } from '../../store/Modules/tools' +import { toolsext } from '@src/store/Modules/toolsext' +import { IPerson } from '../../model/GlobalStore' + +@Component({ + name: 'CCard', + filters: { + firstchars(value) { + return tools.firstchars(value, 250) + } + } +}) + +export default class CCard extends Vue { + @Prop({ required: true, default: 'one' }) public tab + + public clicca() { + this.tab = 'two' + } + + @Prop({ required: true }) public op: IPerson + + get tools() { + return tools + } + + get myop() { + if (!!this.op) { + return this.op + } else { + return { + index: 0, + tab: '', + name: '', + sub1: '', + sub2: '', + sub3: '', + img: '', + cell: '', + email: '', + paginaweb: '', + paginafb: '', + intro: '', + info: '' + } + } + } + +} diff --git a/src/components/CCard/CCard.vue b/src/components/CCard/CCard.vue new file mode 100644 index 0000000..bbf1959 --- /dev/null +++ b/src/components/CCard/CCard.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/src/components/CCard/index.ts b/src/components/CCard/index.ts new file mode 100644 index 0000000..6c5c840 --- /dev/null +++ b/src/components/CCard/index.ts @@ -0,0 +1 @@ +export {default as CCard} from './CCard.vue' diff --git a/src/components/CImgText/CImgText.scss b/src/components/CImgText/CImgText.scss new file mode 100644 index 0000000..f6c1e9e --- /dev/null +++ b/src/components/CImgText/CImgText.scss @@ -0,0 +1,54 @@ + +.imgtext { + 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; + } + + .imgtext { + padding: 0.25rem 0 0.25rem 0; + } + +} + +.landing > section.padding_testo { + padding-top: 1rem; + padding-bottom: 0.25rem; +} + +.section_text { + padding: 10px; +} diff --git a/src/components/CImgText/CImgText.ts b/src/components/CImgText/CImgText.ts new file mode 100644 index 0000000..5d54e73 --- /dev/null +++ b/src/components/CImgText/CImgText.ts @@ -0,0 +1,30 @@ +import Vue from 'vue' +import { Component, Prop } from 'vue-property-decorator' +import { GlobalStore, UserStore } from '@store' + +import VueScrollReveal from 'vue-scroll-reveal' +import { tools } from '@src/store/Modules/tools' +import { toolsext } from '@src/store/Modules/toolsext' +import { Screen } from 'quasar' + +// Vue.use(VueScrollReveal, { +// class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides. +// duration: 1200, +// scale: 0.95, +// distance: '10px', +// rotate: { +// x: 0, +// y: 0, +// z: 0 +// } +// // mobile: true +// }) + +@Component({ + name: 'CImgText' +}) +export default class CImgText extends Vue { + @Prop({ required: false, default: '' }) public src: string + @Prop({ required: false, default: '' }) public class1: string + @Prop({ required: false, default: '' }) public style1: string +} diff --git a/src/components/CImgText/CImgText.vue b/src/components/CImgText/CImgText.vue new file mode 100644 index 0000000..cc582ca --- /dev/null +++ b/src/components/CImgText/CImgText.vue @@ -0,0 +1,20 @@ + + + + diff --git a/src/components/CImgText/index.ts b/src/components/CImgText/index.ts new file mode 100644 index 0000000..a6f22a8 --- /dev/null +++ b/src/components/CImgText/index.ts @@ -0,0 +1 @@ +export {default as CImgText} from './CImgText.vue' diff --git a/src/components/CPage/CPage.scss b/src/components/CPage/CPage.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/CPage/CPage.ts b/src/components/CPage/CPage.ts new file mode 100644 index 0000000..1d16cac --- /dev/null +++ b/src/components/CPage/CPage.ts @@ -0,0 +1,36 @@ +import Vue from 'vue' +import { Component, Prop } from 'vue-property-decorator' +import { GlobalStore, UserStore } from '@store' + +import { Logo } from '../../components/logo' + +import { Footer } from '../../components/Footer' + +import VueScrollReveal from 'vue-scroll-reveal' +import { tools } from '@src/store/Modules/tools' +import { toolsext } from '@src/store/Modules/toolsext' +import { Screen } from 'quasar' + +Vue.use(VueScrollReveal, { + class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides. + duration: 1200, + scale: 0.95, + distance: '10px', + rotate: { + x: 0, + y: 0, + z: 0 + } + // mobile: true +}) + +@Component({ + name: 'CPage', + components: { Logo, Footer } +}) +export default class CPage extends Vue { + @Prop({ required: true }) public imghead: string = '' + @Prop({ required: true }) public headtitle: string = '' + @Prop({ required: true }) public img1: string = '' + @Prop({ required: true }) public text1: string = '' +} diff --git a/src/components/CPage/CPage.vue b/src/components/CPage/CPage.vue new file mode 100644 index 0000000..9646e04 --- /dev/null +++ b/src/components/CPage/CPage.vue @@ -0,0 +1,28 @@ + + + diff --git a/src/components/CPage/index.ts b/src/components/CPage/index.ts new file mode 100644 index 0000000..bb5e7cb --- /dev/null +++ b/src/components/CPage/index.ts @@ -0,0 +1 @@ +export {default as CPage} from './CPage.vue' diff --git a/src/components/CTitle/CTitle.scss b/src/components/CTitle/CTitle.scss new file mode 100644 index 0000000..abe3fa4 --- /dev/null +++ b/src/components/CTitle/CTitle.scss @@ -0,0 +1,18 @@ + +.cltitlebg{ + +} + +.titletext { + color: white; + font-size: 3rem; + font-weight: 500; + line-height: 3rem; + text-shadow: .25rem .25rem .5rem black; + letter-spacing: .00937em; +} + + +.q-img__content > div{ + background: rgba(0,0,0,0.17) !important; +} diff --git a/src/components/CTitle/CTitle.ts b/src/components/CTitle/CTitle.ts new file mode 100644 index 0000000..c5e0ab8 --- /dev/null +++ b/src/components/CTitle/CTitle.ts @@ -0,0 +1,20 @@ +import Vue from 'vue' +import { Component, Prop } from 'vue-property-decorator' +import { GlobalStore, UserStore } from '@store' + +import { tools } from '@src/store/Modules/tools' +import { toolsext } from '@src/store/Modules/toolsext' +import { Screen } from 'quasar' + +@Component({ + name: 'CTitle' +}) +export default class CTitle extends Vue { + @Prop({ required: false, default: '' }) public imgbackground: string + @Prop({ required: false, default: '' }) public imghead: string + @Prop({ required: true }) public headtitle: string + + get tools() { + return tools + } +} diff --git a/src/components/CTitle/CTitle.vue b/src/components/CTitle/CTitle.vue new file mode 100644 index 0000000..4567e6a --- /dev/null +++ b/src/components/CTitle/CTitle.vue @@ -0,0 +1,27 @@ + + + + diff --git a/src/components/CTitle/index.ts b/src/components/CTitle/index.ts new file mode 100644 index 0000000..00ca081 --- /dev/null +++ b/src/components/CTitle/index.ts @@ -0,0 +1 @@ +export {default as CTitle} from './CTitle.vue' diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss new file mode 100644 index 0000000..01b0218 --- /dev/null +++ b/src/components/Footer/Footer.scss @@ -0,0 +1,180 @@ +$grayshadow: #555; + +$textcol: blue; +$textcol_scuro: darkblue; + + +.landing__footer { + //background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000)); + background: linear-gradient(180deg, rgba(0, 0, 0, .8) 95%, #FFF); + padding-top: 4.5rem !important; + padding-bottom: 4.5rem !important; + padding-left: 1.25rem; + padding-right: 1.25rem; + color: #9f9f9f; +} + +.icon_contact:hover { + color: blue; + border-color: white; + border-width: .0625rem; +} + +.landing__footer .doc-link { + color: $textcol; +} + +.landing__footer .doc-link:hover { + opacity: .8 +} + +.landing__swirl-bg { + background-repeat: no-repeat !important; + background-position: top; + background-size: contain !important; + background-image: url(../../statics/images/landing_first_section.png) !important +} + + +.landing__footer-icons { + font-size: 1.75rem +} + +.landing__footer-icons a { + margin: 0 .5rem .5rem; + text-decoration: none; + outline: 0; + color: $textcol; + transition: color .28s +} + +.landing__footer-icons a:hover { + color: $textcol_scuro; +} + +.doc-img { + max-width: 100%; +} + +.mylist { + background: #3fdaff; + padding-left: 1.25rem; +} + +.clgutter { + margin-top: 1.25rem; + padding: .62rem; +} + +.carousel_img_3 { + //background-image: url(../../statics/images/cibo_sano.jpg); + background-size: cover !important; + background-position: 50% center !important; + background-repeat: no-repeat !important; +} + + +@media (max-width: 718px) { + // PER VERSIONE MOBILE + + .landing__hero { + text-align: center + } + .landing__header { + height: 7vh + } + .clgutter { + margin-top: 0; + padding: 0; + } + .landing__hero .text-h1 { + font-size: 3rem; + line-height: 3.05rem; + margin-bottom: 1.5rem + } + + .landing > section.padding { + padding: 2.5rem 1rem; + } + + .landing > section.padding_testo { + padding-top: 1.25rem; + padding-bottom: 1rem; + } + + .landing > section.padding_gallery { + padding-top: 3.125rem; + padding-bottom: 5.625rem; + } + + .landing__features h4, .landing__features h6 { + margin: 1.25rem 0 + } + + h4 { + line-height: 1.4; + text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow; + } + + .landing .feature-item { + text-align: center; + margin-top: 1.25rem; + } + .landing__hero-content { + padding-bottom: 11.25rem; + } + .landing__hero-btns { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center + } + + .q-col-gutter-sm { + padding: .625rem .315rem; + } + + .text-vers{ + font-size: 0.6rem; + } + + .carousel_img_3 { + //background-image: url(../../statics/images/cibo_sano.jpg); + background-size: 620px 620px !important; + background-position: 50% top !important; + background-repeat: no-repeat !important; + } + +} + +.custom-caption { + text-align: center; + padding: .75rem; + color: $textcol; + background-color: rgba(0, 0, 0, .3); +} + +.mycontacts { + color: gray; + letter-spacing: 0.078rem; +} + +.mycontacts_title { + text-shadow: 0.125rem 0.125rem 0.125rem #555; + font-weight: bold; + color: #999; + letter-spacing: 0.125rem; +} + +.mycontacts_text { + color: #999; + letter-spacing: normal !important; +} + +.footer_link { + font-size: 1rem; + color:gray; +} + +.footer_link:hover { + color:white; +} diff --git a/src/components/Footer/Footer.ts b/src/components/Footer/Footer.ts new file mode 100644 index 0000000..84bb85e --- /dev/null +++ b/src/components/Footer/Footer.ts @@ -0,0 +1,37 @@ +import Vue from 'vue' + +import { GlobalStore, UserStore } from '@modules' +import { Logo } from '../logo' + +import { Component, Prop } from 'vue-property-decorator' +import { tools } from '@src/store/Modules/tools' +import { toolsext } from '@src/store/Modules/toolsext' + +import { db_data } from '@src/db/db_data' +import { static_data } from '@src/db/static_data' + +import Quasar from 'quasar' +import { FormNewsletter } from '../FormNewsletter' + +@Component({ + name: 'Footer', + components: { Logo, FormNewsletter } +}) + +export default class Footer extends Vue { + public $t + public $v + public $q + + get TelegramSupport() { + return db_data.TELEGRAM_SUPPORT + } + + get FBPage() { + return db_data.URL_FACEBOOK + } + + get static_data(){ + return static_data + } +} diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue new file mode 100644 index 0000000..05effc2 --- /dev/null +++ b/src/components/Footer/Footer.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts new file mode 100644 index 0000000..bd2039c --- /dev/null +++ b/src/components/Footer/index.ts @@ -0,0 +1 @@ +export {default as Footer} from './Footer.vue' diff --git a/src/components/FormNewsletter/FormNewsletter.scss b/src/components/FormNewsletter/FormNewsletter.scss new file mode 100644 index 0000000..1f76c9d --- /dev/null +++ b/src/components/FormNewsletter/FormNewsletter.scss @@ -0,0 +1,30 @@ +// Animations +// slideFromBottom +.slideFromBottom-enter, .slideFromBottom-leave-to { + transform: translate(0px, 10em); +} + +.slideFromBottom-enter-to, .slideFromBottom-leave { + transform: translate(0px, 0px); +} + +.slideFromBottom-enter-active { + transition: transform .2s ease-out; +} + +.slideFromBottom-leave-active { + transition: transform .2s ease-in; +} + +.news_title { + color: white; + font-size: 1rem; +} + +.news_link { + color: gray; +} + +.news_link:hover { + color: white; +} diff --git a/src/components/FormNewsletter/FormNewsletter.ts b/src/components/FormNewsletter/FormNewsletter.ts new file mode 100644 index 0000000..98cd9e1 --- /dev/null +++ b/src/components/FormNewsletter/FormNewsletter.ts @@ -0,0 +1,47 @@ +import Vue from 'vue' +import Component from 'vue-class-component' + +import { tools } from '../../store/Modules/tools' +import { toolsext } from '@src/store/Modules/toolsext' + +import Quasar, { Screen } from 'quasar' +import { Prop } from 'vue-property-decorator' + +@Component({ + name: 'FormNewsletter' +}) + +export default class FormNewsletter extends Vue { + public $t + public $q + public name: string = null + public email: string = null + public accept: boolean = false + + public onSubmit() { + if (this.accept !== true) { + + this.$q.notify({ + color: 'red-5', + textColor: 'white', + icon: 'fas fa-exclamation-triangle', + message: this.$t('newsletter.license') + }) + } + else { + this.$q.notify({ + color: 'green-4', + textColor: 'white', + icon: 'fas fa-check-circle', + message: this.$t('newsletter.submitted') + }) + } + } + + public onReset() { + this.name = null + this.email = null + this.accept = false + } + +} diff --git a/src/components/FormNewsletter/FormNewsletter.vue b/src/components/FormNewsletter/FormNewsletter.vue new file mode 100644 index 0000000..d3234bb --- /dev/null +++ b/src/components/FormNewsletter/FormNewsletter.vue @@ -0,0 +1,50 @@ + + + + + + diff --git a/src/components/FormNewsletter/index.ts b/src/components/FormNewsletter/index.ts new file mode 100644 index 0000000..8cd7c70 --- /dev/null +++ b/src/components/FormNewsletter/index.ts @@ -0,0 +1 @@ +export {default as FormNewsletter} from './FormNewsletter.vue' diff --git a/src/components/Header/Header.ts b/src/components/Header/Header.ts index c6fbba0..b446300 100644 --- a/src/components/Header/Header.ts +++ b/src/components/Header/Header.ts @@ -38,10 +38,6 @@ export default class Header extends Vue { public photo = '' public visuimg: boolean = true - public selectOpLang() { - return static_data.lang_available - - } get getappname(){ if (Screen.width < 400) { @@ -205,10 +201,10 @@ export default class Header extends Vue { } public setshortlang(lang) { - for (const indrec in this.selectOpLang) { - if (this.selectOpLang[indrec].value === lang) { - // console.log('this.selectOpLang[indrec].short', this.selectOpLang[indrec].short, this.selectOpLang[indrec].value) - this.langshort = this.selectOpLang[indrec].short + for (const indrec in static_data.lang_available) { + if (static_data.lang_available[indrec].value === lang) { + // console.log('static_data.lang_available[indrec].short', static_data.lang_available[indrec].short, static_data.lang_available[indrec].value) + this.langshort = static_data.lang_available[indrec].short return } } @@ -220,7 +216,7 @@ export default class Header extends Vue { } public setLangAtt(mylang) { - console.log('MYLL=', mylang) + console.log('LANG =', mylang) // console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName) // dynamic import, so loading on demand only diff --git a/src/components/Header/Header.vue b/src/components/Header/Header.vue index 4e38c1b..89e8016 100644 --- a/src/components/Header/Header.vue +++ b/src/components/Header/Header.vue @@ -1,6 +1,6 @@