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

- Update the way to use the data records on Vuex with Getters!

Browse Source 
- Fix: mongodb call passing array todos and categiroes already splitted
This commit is contained in:
Paolo Arena
2019-02-27 02:58:41 +01:00
parent 0e98ac1eaa
commit fa17de24f0
60 changed files with 3133 additions and 1839 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/root/home/home.scss
View File

@@ -1,3 +1,209 @@
.mycard {
visibility: hidden;
}
.landing {
background: #000 url(../../assets/images/cover.jpg) no-repeat 50% fixed;
background-size: cover
}
.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: 180px 16px
}
.landing > section > div {
position: relative;
max-width: 1040px;
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: 100vh
}
.landing__arrow {
bottom: 8px;
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
}
.landing__features h4, .landing__features h6 {
margin: 26px 0
}
.landing__features p {
opacity: .6;
font-size: 16px
}
.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, .1) 65%, #000);
padding-top: 72px !important;
padding-bottom: 72px !important
}
.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(https://cdn.quasar-framework.org/img/landing_first_section.png) !important
}
@media (max-width: 718px) {
.landing__hero {
text-align: center
}
.landing__hero .text-h1 {
font-size: 3rem;
line-height: 3.05rem;
margin-bottom: 24px
}
.landing > section.padding {
padding-top: 90px;
padding-bottom: 90px
}
.landing .feature-item {
text-align: center
}
.landing__hero-content {
padding-bottom: 180px
}
.landing__hero-btns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
}
body.mobile .landing {
background: unset
}
body.mobile .landing:before {
content: "";
position: fixed;
top: 0;
height: 100vh;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #000 url(../../assets/images/cover.jpg) 50%;
background-size: cover
}
@-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;
}
.shadow {
//color: white;
text-shadow: 2px 2px 4px #000000;
}
.shadow-max {
//color: white;
text-shadow: 4px 4px 8px #000000;
}
.text-h1 {
font-size: 6rem;
font-weight: 300;
line-height: 6rem;
letter-spacing: -.01562em;
}
.text-weight-bold {
font-weight: 700;
}
.text-subtitle1 {
font-size: 1.25rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: .00937em;
&.big {
font-size: 1.5rem;
}
}
.text-subtitle2 {
font-size: 1rem;
font-weight: 400;
line-height: 1.75rem;
letter-spacing: .00937em;
}

5
src/root/home/home.ts
View File

@@ -30,6 +30,7 @@ export default class Home extends Vue {
GlobalStore.actions.prova()
}
meta() {
return {
keywords: { name: 'keywords', content: 'Quasar website' },
@@ -95,7 +96,7 @@ export default class Home extends Vue {
options = {
body: 'You successfully subscribed to our Notification service!',
icon: '/statics/icons/app-icon-96x96.png',
image: '/src/images/sf-boat.jpg',
image: '/assets/images/sf-boat.jpg',
dir: 'ltr',
lang: 'enUs', // BCP 47,
vibrate: [100, 50, 200],
@@ -152,7 +153,7 @@ export default class Home extends Vue {
options = {
body: mythis.$t('notification.subscribed'),
icon: '/statics/icons/android-chrome-192x192.png',
image: '/statics/images/freeplanet.png',
image: '/assets/images/freeplanet.png',
dir: 'ltr',
lang: 'enUs', // BCP 47,
vibrate: [100, 50, 200],

110
src/root/home/home.vue
View File

@@ -1,33 +1,95 @@
<template >
<q-page class="flex flex-center">
<logo></logo>
<template>
<q-page class="text-white">
<div class="landing">
<section>
<div class="landing__hero">
<div style="height: 18vh;"></div>
<div class="landing__hero-content row justify-center q-gutter-xl">
<div class="row">
<logo></logo>
</div>
<div class="flex justify-end">
<div class="q-gutter-sm">
<div class="text-h1 shadow-max">FreePlanet</div>
<div class="text-subtitle1 shadow text-italic q-pl-sm">{{$t('msg.sottoTitoloApp')}}
</div>
<div class="text-subtitle1 shadow big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
</div>
<div class="text-subtitle2 shadow text-italic q-pl-sm ">{{$t('msg.sottoTitoloApp3')}}
</div>
<q-btn v-if="getPermission() !== 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="askfornotification" :label="$t('notification.ask')"/>
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
<div>
<q-btn v-if="getPermission() !== 'granted'" class="enable-notifications shadow"
color="primary" rounded
size="lg"
icon="notifications" @click="askfornotification"
:label="$t('notification.ask')"/>
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
</div>
<!--
<q-btn>
Canale Telegram: <a href="https://t.me/freeplanet_channel" target="_blank"
style="color: white;">
<q-icon class="fab fa-telegram" size="2rem"/>
</a>
</q-btn>
-->
<br>
<div>
<q-chip square color="secondary">
Status:
</q-chip>
<q-field
v-if="getPermission() === 'granted'"
icon="notifications"
:label="$t('notification.titlegranted')"
helper="Stato Notifiche">
</q-field>
<q-field
v-if="NotServiceWorker()"
icon="notifications"
label="Service Worker not present"
>
</q-field>
<div style="margin: 5px;">
<q-alert
type="info"
class="q-mb-sm">
{{$t('msg.underconstruction')}}
</q-alert>
</div>
<br>
<div>
<q-field
v-if="getPermission() === 'granted'"
icon="notifications"
class="shadow"
:label="$t('notification.titlegranted')"
helper="Stato Notifiche">
</q-field>
<q-field
v-if="NotServiceWorker()"
class="shadow"
icon="notifications"
label="Service Worker not present"
>
</q-field>
</div>
<!--<div class="q-pt-md q-pl-sm">-->
<!--<div class="landing__hero-btns q-gutter-md row items-center"><a tabindex="0"-->
<!--type="button"-->
<!--href="/introduction-to-quasar"-->
<!--class="q-btn inline relative-position q-btn-item non-selectable q-btn&#45;&#45;rectangle bg-white text-primary q-focusable q-hoverable q-btn&#45;&#45;push">-->
<!--<div class="q-focus-helper"></div>-->
<!--<div class="q-btn__content text-center col items-center q-anchor&#45;&#45;skip justify-center row">-->
<!--<div>About</div>-->
<!--</div>-->
<!--</a><a tabindex="0" type="button" href="/start"-->
<!--class="q-btn inline relative-position q-btn-item non-selectable q-btn&#45;&#45;rectangle bg-white text-primary q-focusable q-hoverable q-btn&#45;&#45;push">-->
<!--<div class="q-focus-helper"></div>-->
<!--<div class="q-btn__content text-center col items-center q-anchor&#45;&#45;skip justify-center row">-->
<!--<div>Get started</div>-->
<!--</div>-->
<!--</a>-->
<!--<div class="text-body2">v1.0.0-beta.4</div>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
</div>
</div>
</section>
</div>
</q-page>

98
src/root/home/old-home.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<q-page class="landing text-white">
<section>
<div class="landing__hero">
<div style="height: 28vh;"></div>
<div class="landing__hero-content row justify-center q-gutter-xl">
<div class="row"><img src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg"
class="landing__logo"></div>
<div class="flex justify-end">
<div class="q-gutter-sm">
<div class="text-h1">
<div class="text-weight-bold">Quasar</div>
<div>Framework</div>
</div>
<div class="text-subtitle1 text-italic q-pl-sm">High performance, <strong>Material
Design
2</strong>, full front end stack with <strong>Vuejs</strong></div>
<div class="q-pt-md q-pl-sm">
<div class="landing__hero-btns q-gutter-md row items-center"><a tabindex="0"
type="button"
href="/introduction-to-quasar"
class="q-btn inline relative-position q-btn-item non-selectable q-btn--rectangle bg-white text-primary q-focusable q-hoverable q-btn--push">
<div class="q-focus-helper"></div>
<div class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
<div>About</div>
</div>
</a><a tabindex="0" type="button" href="/start"
class="q-btn inline relative-position q-btn-item non-selectable q-btn--rectangle bg-white text-primary q-focusable q-hoverable q-btn--push">
<div class="q-focus-helper"></div>
<div class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
<div>Get started</div>
</div>
</a>
<div class="text-body2">v1.0.0-beta.4</div>
</div>
</div>
</div>
</div>
</div>
<div class="landing__arrow absolute-bottom text-center"><i aria-hidden="true"
class="q-icon text-h2 text-white material-icons">expand_more</i>
</div>
</div>
<!--<div>-->
<!--<logo></logo>-->
<!--</div>-->
<!--<div>-->
<!--&lt;!&ndash; the row with a type of gutter &ndash;&gt;-->
<!--<q-alert-->
<!--avatar="assets/boy-avatar.png"-->
<!--color="primary"-->
<!--message="Jack"-->
<!--detail="Per un mondo più Consapevole"-->
<!--/>-->
<!--</div>-->
<!--<div>-->
<!--<q-btn v-if="getPermission() !== 'granted'" class="enable-notifications" color="primary" rounded-->
<!--size="lg"-->
<!--icon="notifications" @click="askfornotification" :label="$t('notification.ask')"/>-->
<!--&lt;!&ndash;<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>&ndash;&gt;-->
<!--&lt;!&ndash;<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>&ndash;&gt;-->
<!--</div>-->
<!--<div>-->
<!--<q-chip square color="secondary">-->
<!--{{$t('notification.status')}}-->
<!--</q-chip>-->
<!--</div>-->
<!--<div>-->
<!--<q-field-->
<!--v-if="getPermission() === 'granted'"-->
<!--icon="notifications"-->
<!--:label="$t('notification.titlegranted')"-->
<!--helper="Stato Notifiche">-->
<!--</q-field>-->
<!--<q-field-->
<!--v-if="NotServiceWorker()"-->
<!--icon="notifications"-->
<!--label="Service Worker not present"-->
<!--&gt;-->
<!--</q-field>-->
<!--</div>-->
</section>
</q-page>
</template>
<script lang="ts" src="./home.ts">
</script>
<style lang="scss" scoped>
@import './home.scss';
</style>