move bienvenue popup to HomeView
This commit is contained in:
axolotle
@@ -23,12 +23,6 @@ export default {
|
||||
NodesHistory
|
||||
},
|
||||
|
||||
created () {
|
||||
if (!this.$store.state.pages.visited) {
|
||||
this.$router.push({ name: 'introduction' })
|
||||
}
|
||||
},
|
||||
|
||||
metaInfo () {
|
||||
return {
|
||||
// if no subcomponents specify a metaInfo.title, try to get one from the route name.
|
||||
|
||||
+114
-34
@@ -1,44 +1,92 @@
|
||||
<template>
|
||||
<div class="view-home">
|
||||
<div class="home-library" @click="$router.push('/library')">
|
||||
<div class="wrapper" />
|
||||
<b-button :to="{ name: 'library' }" variant="dark">
|
||||
{{ $t('sections.library') }}
|
||||
</b-button>
|
||||
<div class="home-sections">
|
||||
<div class="home-library" @click="$router.push('/library')">
|
||||
<div class="wrapper" />
|
||||
<b-button :to="{ name: 'library' }" variant="dark">
|
||||
{{ $t('sections.library') }}
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<div class="home-kit" @click="$router.push('/kit')">
|
||||
<div class="wrapper" />
|
||||
<b-button :to="{ name: 'kit' }" variant="kit">
|
||||
{{ $t('sections.kit') }}
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<div class="home-creations" @click="$router.push('/gallery')">
|
||||
<div class="wrapper" />
|
||||
<b-button :to="{ name: 'gallery' }" variant="creation">
|
||||
{{ $t('sections.gallery') }}
|
||||
</b-button>
|
||||
<div
|
||||
v-for="(item, i) in [['top', 'left'], ['top', 'right'], ['bottom', 'right'], ['bottom', 'left']]" :key="i"
|
||||
class="home-creations-circle" :class="item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-kit" @click="$router.push('/kit')">
|
||||
<div class="wrapper" />
|
||||
<b-button :to="{ name: 'kit' }" variant="kit">
|
||||
{{ $t('sections.kit') }}
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<div class="home-creations" @click="$router.push('/gallery')">
|
||||
<div class="wrapper" />
|
||||
<b-button :to="{ name: 'gallery' }" variant="creation">
|
||||
{{ $t('sections.gallery') }}
|
||||
</b-button>
|
||||
<div
|
||||
v-for="(item, i) in [['top', 'left'], ['top', 'right'], ['bottom', 'right'], ['bottom', 'left']]" :key="i"
|
||||
class="home-creations-circle" :class="item"
|
||||
/>
|
||||
<div v-if="visited === false" class="page-popup">
|
||||
<div class="page-popup-container h-100">
|
||||
<b-overlay :show="popup === undefined" z-index="0" class="h-100">
|
||||
<page-view
|
||||
v-if="popup"
|
||||
:page="popup" slug="welcome"
|
||||
@close="onPopupClose()"
|
||||
/>
|
||||
</b-overlay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
import { PageView } from '@/components/layouts'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Home'
|
||||
name: 'Home',
|
||||
|
||||
components: {
|
||||
PageView
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
popup: undefined
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['visited'])
|
||||
},
|
||||
|
||||
methods: {
|
||||
onPopupClose () {
|
||||
this.$store.commit('SET_VISITED', true)
|
||||
}
|
||||
},
|
||||
|
||||
async created () {
|
||||
if (this.visited === false) {
|
||||
this.popup = await this.$store.dispatch('QUERY_PAGE', 'welcome')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.view-home {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
&, .home-sections {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
.home-sections > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -64,20 +112,24 @@ export default {
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($size-bp-down) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.home-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($size-bp) {
|
||||
display: grid;
|
||||
grid-template: 'a b'
|
||||
'a c';
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
.home-sections {
|
||||
display: grid;
|
||||
grid-template: 'a b'
|
||||
'a c';
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.home-library {
|
||||
grid-area: a;
|
||||
@@ -168,4 +220,32 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-popup {
|
||||
border: $line;
|
||||
background-color: $white;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
&-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($size-bp-down) {
|
||||
top: -2px;
|
||||
height: calc(100% + 2px);
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($size-bp) {
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="view-introduction" :class="{ 'overflow-hidden': visited === false }">
|
||||
<div class="view-introduction">
|
||||
<b-overlay
|
||||
class="intro"
|
||||
:show="page === undefined"
|
||||
@@ -11,24 +11,10 @@
|
||||
@close="$router.push({ name: 'home' })"
|
||||
/>
|
||||
</b-overlay>
|
||||
|
||||
<div v-if="visited === false" class="page-popup">
|
||||
<div class="page-popup-container h-100">
|
||||
<b-overlay :show="popup === undefined" z-index="0" class="h-100">
|
||||
<page-view
|
||||
v-if="popup"
|
||||
:page="popup" slug="welcome"
|
||||
@close="onPopupClose()"
|
||||
/>
|
||||
</b-overlay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
import { PageView } from '@/components/layouts'
|
||||
|
||||
|
||||
@@ -41,25 +27,11 @@ export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
page: undefined,
|
||||
popup: undefined
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['visited'])
|
||||
},
|
||||
|
||||
methods: {
|
||||
onPopupClose () {
|
||||
this.$store.commit('SET_VISITED', true)
|
||||
page: undefined
|
||||
}
|
||||
},
|
||||
|
||||
async created () {
|
||||
if (this.visited === false) {
|
||||
this.popup = await this.$store.dispatch('QUERY_PAGE', 'welcome')
|
||||
}
|
||||
this.page = await this.$store.dispatch('QUERY_PAGE', 'intro')
|
||||
}
|
||||
}
|
||||
@@ -94,31 +66,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-popup {
|
||||
border: $line;
|
||||
background-color: $white;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
&-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down($size-bp-down) {
|
||||
top: -2px;
|
||||
height: calc(100% + 2px);
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($size-bp) {
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user