|
@@ -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>
|