move bienvenue popup to HomeView

src/App.vue

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

src/pages/Home.vue

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

src/pages/Introduction.vue

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