- piso en malaga... (personal)

package.json

@@ -50,7 +50,7 @@
     "normalize.css": "^8.0.0",
     "npm": "^6.9.0",
     "nprogress": "^0.2.0",
-    "quasar": "^1.0.0-beta.11",
+    "quasar": "^1.0.0-beta.16",
     "quasar-extras": "^2.0.8",
     "register-service-worker": "^1.0.0",
     "vee-validate": "^2.1.2",
@@ -85,7 +85,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.4.2",
-    "@quasar/app": "^1.0.0-beta.11",
+    "@quasar/app": "^1.0.0-beta.16",
     "@quasar/quasar-app-extension-typescript": "^1.0.0-alpha.11",
     "@types/dotenv": "^4.0.3",
     "@types/jest": "^23.1.4",

quasar.conf.js

@@ -167,12 +167,12 @@ module.exports = function (ctx) {
         'QPopupEdit',
         'QCarousel',
         'QCarouselControl',
+        'QCarouselSlide',
         'QPageScroller',
         'QAvatar',
         'QImg',
         'QSplitter',
-        'QSeparator',
+        'QSeparator'
-        'QCarouselSlide'
       ],
       directives: [
         'Ripple',

src/root/malaga/malaga.scss

@@ -0,0 +1,410 @@
+body {
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #a7a7a7;
+  line-height: 1.5;
+  //font-size: 1rem;
+}
+
+.carousel_slide {
+  background-color: black !important;
+  background-size: contain !important;
+  background-repeat: no-repeat !important;;
+  background-position: top !important;
+}
+
+$grayshadow: #555;
+
+.testo-banda {
+  //background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
+  //background: linear-gradient(180deg, #3144f0, transparent);
+  //background: rgba(0, 0, 0, .6)
+}
+
+p {
+  margin: 0 0 16px;
+  text-shadow: 2px 2px 4px $grayshadow;
+}
+
+.mycard {
+  visibility: hidden;
+}
+
+.landing {
+}
+
+.landing_background {
+  background: #000;
+  background-size: contain;
+}
+
+.landing > section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  //padding: 0 16px
+}
+
+.landing > section.padding {
+  padding: 90px 16px
+}
+
+.landing > section > div {
+  position: relative;
+  max-width: 1240px;
+  width: 100%
+}
+
+.landing__toolbar {
+  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
+  background: linear-gradient(180deg, #000, transparent);
+  padding: 0 !important
+}
+
+.landing__toolbar .q-btn {
+  border-radius: 0 0 5px 5px;
+  -ms-flex-item-align: stretch;
+  align-self: stretch
+}
+
+.landing__hero {
+  min-height: 90vh
+}
+
+.landing__header {
+  height: 18vh
+}
+
+.landing__arrow {
+  bottom: 25px;
+  opacity: .4
+}
+
+.landing__front {
+  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
+  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
+}
+
+.landing__logo {
+  width: 150px;
+  height: 150px;
+  margin-top: 21px;
+  //-webkit-animation: logo-rotate 240s linear infinite;
+  //animation: logo-rotate 240s linear infinite
+}
+
+.landing__features .q-icon {
+  font-size: 64px
+}
+
+h4 {
+  line-height: 1.5;
+  text-shadow: 4px 4px 8px $grayshadow;
+}
+
+.landing__features h4, .landing__features h6 {
+  margin: 26px 0
+}
+
+.landing__features p {
+  opacity: .7;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.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) 75%, #FFF);
+  padding-top: 72px !important;
+  padding-bottom: 72px !important
+}
+
+.icon_contact:hover {
+  color: blue;
+  border-color: white;
+  border-width: 1px;
+}
+
+.landing__footer .doc-link {
+  color: #fff
+}
+
+.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
+}
+
+.feat-descr {
+  font-size: 1.15rem;
+}
+
+.feat-descr:hover {
+  transition: opacity 0.5s ease-in-out;
+  opacity: 0.9;
+}
+
+.q-col-gutter-sm {
+  padding: 50px 50px;
+  //margin-left: -48px
+}
+
+body.mobile .landing {
+  //background: unset
+}
+
+body.mobile .landing:before {
+  content: "";
+  position: fixed;
+  top: 0;
+  height: 60vh;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  //background: #000 url(../../statics/images/cover.jpg) 50%;
+
+  background-size: contain;
+}
+
+/*
+@-webkit-keyframes logo-rotate {
+  to {
+    -webkit-transform: rotate(-1turn);
+    transform: rotate(-1turn)
+  }
+}
+
+@keyframes logo-rotate {
+  to {
+    -webkit-transform: rotate(-1turn);
+    transform: rotate(-1turn)
+  }
+}
+*/
+
+.home {
+  //background-color: rgb(250, 250, 250);
+  padding: 5px;
+  display: flex;
+  //flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.btn-start {
+  margin: 5px;
+}
+
+.shadow {
+  //color: white;
+  text-shadow: 2px 2px 4px $grayshadow;
+}
+
+.shadow-max {
+  //color: white;
+  text-shadow: 4px 4px 8px $grayshadow;
+}
+
+.text-h1 {
+  font-size: 3rem;
+  font-weight: 300;
+  line-height: 3rem;
+  letter-spacing: -.01562em;
+}
+
+.text-h2 {
+  font-size: 3.75rem;
+  font-weight: 300;
+  line-height: 3.75rem;
+  letter-spacing: -.00833em;
+}
+
+.text-weight-bold {
+  font-weight: 700;
+}
+
+.miosottotit{
+  font-size: 2rem;
+  line-height: 2rem;
+  margin: 15px !important;
+  font-weight: bold;
+  text-shadow: 4px 4px 8px $grayshadow;
+}
+
+.subtitle1 {
+  font-size: 1.75rem;
+  line-height: 1.75rem;
+  text-shadow: 4px 4px 8px $grayshadow;
+  letter-spacing: .00937em;
+  &.big {
+    font-size: 1.5rem;
+  }
+}
+
+.text-subtitle2 {
+  font-size: 1.15rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: 4px 4px 8px $grayshadow;
+}
+
+.text-subtitle3 {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: 2px 2px 4px $grayshadow;
+}
+
+.homep-cover-img-1 {
+  background: #000 url(../../statics/images/cover.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img-2 {
+  background: #000 url(../../statics/images/hand_people.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img-3 {
+  background: #000 url(../../statics/images/cibo_sano.jpg) no-repeat 50% fixed;
+  //transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img.hide-filter:before {
+  opacity: 0
+}
+
+.landing__footer-icons {
+  font-size: 28px
+}
+
+.landing__footer-icons a {
+  margin: 0 8px 8px;
+  text-decoration: none;
+  outline: 0;
+  color: #fff;
+  transition: color .28s
+}
+
+.landing__footer-icons a:hover {
+  color: #e0e0e0
+}
+
+.doc-img {
+  max-width: 100%;
+}
+
+.mylist {
+  background: #3fdaff;
+  padding-left: 20px;
+}
+
+.clgutter {
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.carousel_img_3 {
+  //background-image: url(../../statics/images/cibo_sano.jpg);
+  background-size: contain !important;
+  background-position: 50% center !important;
+  background-repeat: no-repeat !important;
+}
+
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+
+  .landing__hero {
+    text-align: center;
+    min-height: 60vh
+  }
+
+  .landing__header {
+    height: 7vh
+  }
+  .clgutter {
+    margin-top: 0px;
+    padding: 0px;
+  }
+  .landing__hero .text-h1 {
+    font-size: 2rem;
+    line-height: 2.05rem;
+    margin-bottom: 24px
+  }
+
+  .landing > section.padding {
+    padding: 10px 16px
+    //padding-bottom: 90px
+  }
+
+  .landing__features h4, .landing__features h6 {
+    margin: 20px 0
+  }
+
+  h4 {
+    line-height: 1.4;
+    text-shadow: 4px 4px 8px $grayshadow;
+  }
+
+  .landing .feature-item {
+    text-align: center;
+    margin-top: 20px;
+  }
+  .landing__hero-content {
+    padding-bottom: 180px
+  }
+  .landing__hero-btns {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center
+  }
+
+  .q-col-gutter-sm {
+    padding: 10px 5px;
+  }
+
+  .subtitle1 {
+    font-size: 1rem;
+    line-height: 1rem;
+    text-shadow: 4px 4px 8px $grayshadow;
+  }
+  .text-subtitle2 {
+    font-size: 1rem;
+    padding: 10px 5px;
+    font-weight: bold;
+  }
+  .text-subtitle3 {
+    font-size: 0.75rem;
+    padding: 10px 5px;
+  }
+
+  .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: 12px;
+  color: white;
+  background-color: rgba(0, 0, 0, .3);
+}
+

src/root/malaga/malaga.ts

@@ -0,0 +1,87 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import { Logo } from '../../components/logo'
+
+import VueScrollReveal from 'vue-scroll-reveal'
+import { tools } from '@src/store/Modules/tools'
+
+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({
+  components: { Logo }
+})
+export default class Malaga extends Vue {
+  public text: string = ''
+  public visibile: boolean = false
+  public cardvisible: string = 'hidden'
+  public displaycard: string = 'block'
+  public $t: any
+  // public firstClassSection: string = 'landing_background fade homep-cover-img animate-fade homep-cover-img-1'
+  public firstClassSection: string = 'fade homep-cover-img animate-fade homep-cover-img-1'
+  public $q
+  public polling
+  public slide2 = 0
+  public animare: number = 0
+  public getImmagini = [
+    {title: 'Camera matrimoniale', subtitle: '320€ al mese: da maggio fino a settembre',
+     img: '../../statics/images/piso/camera_matrimoniale.jpg'},
+    {title: 'Scrivania - matrimoniale', subtitle: '',
+      img: '../../statics/images/piso/matrimoniale_scrivania.jpg'},
+    {title: 'Finestra - matrimoniale', subtitle: '',
+      img: '../../statics/images/piso/matrimoniale_finestra.jpg'},
+    {title: 'Armadio - matrimoniale', subtitle: '',
+      img: '../../statics/images/piso/matrimoniale_armadio.jpg'},
+    {title: 'Finestra dalla camera matrimoniale', subtitle: '',
+      img: '../../statics/images/piso/finestra_della_camera_matrimoniale.jpg'},
+    {title: 'Camera singola', subtitle: '220€ al mese: da maggio fino a settembre',
+      img: '../../statics/images/piso/singola_1.jpg'},
+    {title: 'Scrivania singola', subtitle: '',
+      img: '../../statics/images/piso/singola_scrivania.jpg'},
+    {title: 'Finestra singola', subtitle: '',
+      img: '../../statics/images/piso/singola_finestra.jpg'},
+    {title: 'Armadio singola', subtitle: '',
+      img: '../../statics/images/piso/singola_armadio.jpg'},
+    {title: 'Cucina', subtitle: '',
+      img: '../../statics/images/piso/cucina.jpg'},
+    {title: 'Cucina', subtitle: '',
+      img: '../../statics/images/piso/cucina2.jpg'},
+    {title: 'Corridoio', subtitle: '',
+      img: '../../statics/images/piso/corridoio.jpg'},
+    {title: 'Televisore e Wifi', subtitle: '',
+      img: '../../statics/images/piso/televisore.jpg'},
+    {title: 'Terrazza', subtitle: '',
+      img: '../../statics/images/piso/terrazza.jpg'},
+    {title: 'Vista dalla terrazza', subtitle: '',
+      img: '../../statics/images/piso/fuori_dalla_terrazza.jpg'},
+    {title: 'Sala', subtitle: '',
+      img: '../../statics/images/piso/sala.jpg'},
+    {title: 'Divano', subtitle: '',
+      img: '../../statics/images/piso/divano.jpg'},
+    {title: 'Corridoio', subtitle: '',
+      img: '../../statics/images/piso/corridoio2.jpg'},
+    {title: 'Tavolo della sala', subtitle: '',
+      img: '../../statics/images/piso/tavolo_sala.jpg'},
+    {title: 'Bagno', subtitle: '',
+      img: '../../statics/images/piso/bagno.jpg'},
+    {title: 'Vasca con Doccia', subtitle: '',
+      img: '../../statics/images/piso/bagno2.jpg'}
+  ]
+
+  public getenv(myvar) {
+    return process.env[myvar]
+  }
+
+}

src/root/malaga/malaga.vue

@@ -0,0 +1,69 @@
+<template>
+    <q-page class="text-white">
+        <div class="landing">
+            <section>
+                <div class="landing__hero">
+                    <q-carousel
+                            animated
+                            infinite
+                            arrows
+                            thumbnails
+                            transition-next="slide-left"
+                            transition-prev="slide-right"
+                            v-model="slide2"
+                            height="100%"
+                            width="100%"
+                    >
+                        <q-carousel-slide v-for="(rec, index) in getImmagini" :key="index" :name="index" :img-src="rec.img" class="carousel_slide">
+                            <div class="absolute-bottom custom-caption" style="margin-bottom: 70px">
+                                <div class="text-h5"><span class="text-h6 text-grey-2">{{index + 1}}. </span>{{rec.title}}</div>
+                                <div class="subtitle1">{{rec.subtitle}}</div>
+                            </div>
+                        </q-carousel-slide>
+                    </q-carousel>
+                </div>
+            </section>
+
+            <section class="padding bg-white text-grey-10 text-center">
+                <div class="landing__features row items-start q-col-gutter-sm">
+                    <div class="col-12 text-center"><h4>{{$t('piso.descrizione')}}</h4>
+                        <p v-html="$t('piso.descrapp_pag1')"></p>
+                    </div>
+                </div>
+            </section>
+            <section class="landing__footer">
+                <div class="text-center">
+                    <div class="landing__footer-icons row flex-center">
+                        <!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
+                        <!--<a href="https://twitter.com/" target="_blank"><i aria-hidden="true" class="q-icon fab fa-twitter"> </i></a>-->
+                        <!--<a href="https://discord.gg/5TDhbDg" target="_blank"><i aria-hidden="true"-->
+                        <!--class="q-icon fab fa-discord"> </i></a><a-->
+                        <!--href="https://forum.quasar-framework.org/" target="_blank"><i aria-hidden="true"-->
+                        <!--class="q-icon fas fa-comments"> </i></a><a-->
+                        <!--href="https://www.patreon.com/quasarframework" target="_blank"><i aria-hidden="true"-->
+                        <!--class="q-icon fab fa-patreon"> </i></a>-->
+                    </div>
+
+                    <div class="q-mt-xs text-weight-thin" style="text-shadow: 4px 4px 8px #555;">
+                        <!--Released under the-->
+                        <!--<a href="https://github.com/quasarframework/quasar/blob/dev/LICENSE" target="_blank"-->
+                        <!--rel="noopener noreferrer" class="doc-link">-->
+                        <!--MIT LICENSE-->
+                        <!--<i aria-hidden="true"-->
+                        <!--class="q-icon material-icons">launch</i></a>-->
+                        <!--| <a href="https://www.iubenda.com/privacy-policy/40685560" target="_blank"-->
+                        <!--rel="noopener noreferrer" class="doc-link">Privacy Policy<i aria-hidden="true"-->
+                        <!--class="q-icon material-icons">launch</i></a>-->
+                    </div>
+
+                </div>
+            </section>
+        </div>
+
+    </q-page>
+</template>
+<script lang="ts" src="./malaga.ts">
+</script>
+<style lang="scss" scoped>
+    @import './malaga.scss';
+</style>

src/router/route-config.ts

@@ -91,6 +91,11 @@ export const routesList: IMyRouteConfig[] = [
     name: 'Offline',
     component: () => import('@/views/offline/offline.vue')
   },
+  {
+    path: '/malaga',
+    name: 'malaga',
+    component: () => import('@/root/malaga/malaga.vue')
+  },
   {
     path: '/projects/:idProj',
     name: 'progetti',

src/statics/i18n.js

@@ -256,6 +256,56 @@ const messages = {
       privacyread:'Chi lo puo vedere:',
       privacywrite:'Chi lo puo modificare:',
       totalphases: 'Totale Fasi'
+    },
+    piso: {
+      affittasi:'Affittasi 2 Camere a Malaga',
+      quando: 'da Maggio a Settembre',
+      costo: '220€ singola, 320€ matrimoniale',
+      descrizione:'Appartamento situato in Carrettera de Cadiz - Quartiere Las Delicias',
+      descrapp_pag1: 'Si sub-affittano 2 camere in un modesto appartamento di 90m2, composto da 3 camere totali, 1 bagno con vasca + bide, sala, cucina, terrazzino coperto per ripostiglio e biciclette.<br>' +
+        'L\'appartamento è a 700m dalla spiaggia.<br>' +
+        'A 3,5 km dal centro.<br>' +
+        'E\' al 2° piano, con ascensore. <br>' +
+        'Spazi condivisi: Cucina, sala, bagno, TV, Wifi.<br>' +
+        '<h5>Regole</h5>' +
+        'Si cerca persona tranquilla, educata e silenziosa, rispettosa degli altri, nel condominio ci abitano persone locali, e non vogliono che si faccia rumore o feste.<br>' +
+        'L\'appartamento infatti é molto silenzioso, nonostante sia in un palazzo di 9 piani, ci abitano diverse persone anziane.' +
+        '' +
+        '<h5>Chi ci abiterà con voi?</h5>' +
+        'Attualmente ci abita fissa una studentessa spagnola.' +
+        '<h5>Periodo</h5>' +
+        ' Da maggio fino ai primi di Settembre (poi da decidere insieme)' +
+        '<h5>Costi</h5>' +
+        ' - 1 Camera Singola: <strong>220 €</strong><br>' +
+        ' - 1 Camera Matrimoniale: <strong>320 €</strong>' +
+        '<h5>Caparra</h5>' +
+        'La caparra da pagare in anticipo è di 300€<br>' +
+        'che verrá restituita alla fine della stagione, a Settembre.' +
+        '<h5>Vedere l\'appartamento</h5>' +
+        'Contattatemi per venire a vedere l\'appartamento.' +
+        '<h5>Quanto devo pagare per entrare?</h5>' +
+        'La Caparra + 1 mese anticipato:<br>' +
+        '- per la singola: 300€ + 220€ = 520€<br>' +
+        '- per la matrimoniale: 300€ + 320€ = 620€<br>' +
+        '<h5>Uscita anticipata dall\'appartamento</h5>' +
+        'Nel caso in cui si debba lasciare l\'appartamento prima della scadenza, è buona norma <strong>avvertire</strong> con 30 giorni di preavviso, per permetterci di trovare un\'altra persona fidata, ' +
+        'altrimenti parte della caparra verrá usata come indennizzo, salvo per motivazioni veramente importanti.' +
+        '<h5>Spese Aggiuntive:</h5>' +
+        'Le <strong>spese</strong> di luce, acqua, gas e internet Wifi con Fibra ottica, sono <strong>da pagare a parte</strong>, da dividere tra i coinquilini, (mediamente circa <strong>50€/mese a testa</strong>)<br><br>' +
+        'Opzionale: A disposizione una <strong>Bicicietta</strong> MTB (costo 25€ al mese per l\'usura).<br><br>' +
+        '' +
+        'P.S: I prezzi sono bassi perchè le camere vengono sub-affittate e non vogliamo lucrarci sopra, ma semplicemente mantenere l\'appartamento per ritornarci poi a Settembre<br>' +
+        '<h5>Contratto</h5>' +
+        'Per stare tranquilli, verrà richiesto di firmare un contratto (scrittura privata), in cui si confermano queste condizioni scritte qui sopra.<br>' +
+        'Necessita di foto documenti d\'identità (carta d\'identità o passaporto). ' +
+        '<h5>Per contattarci</h5>' +
+        'Paolo: su Whatsapp +34 644932796 <br>' +
+        'Inviare anche contatto Facebook' +
+        '' +
+        '' +
+        ''
+
+
     }
   },
   'es': {

src/views/offline/offline.ts

@@ -5,6 +5,6 @@ import { Component } from 'vue-property-decorator'
 })
 export default class Offline extends Vue {
   get logoimg() {
-    return '/statics/images/' + process.env.LOGO_REG
+    return 'º' + process.env.LOGO_REG
   }
 }

src/views/projects/proj-list/proj-list.ts

@@ -306,7 +306,7 @@ export default class ProjList extends Vue {
     clearInterval(this.polling)
   }
 
-  public static mydeleteitemproj(idobj: string) {
+  public mydeleteitemproj(idobj: string) {
     console.log('mydeleteitemtodo', idobj)
     return Projects.actions.deleteItem({ idobj })
   }
@@ -349,6 +349,9 @@ export default class ProjList extends Vue {
       id_parent: this.idProjAtt
     }
 
+    if (this.itemproj === undefined)
+      this.itemproj = Projects.getters.getRecordById(this.idProjAtt)
+
     if (this.isRootProject) {
       myobj.typeproj = TypeProj.TYPE_PROJECT
       myobj.id_main_project = this.idProjAtt