enfrancais-app/src/pages/Introduction.vue

<template>
  <div class="view-introduction" :class="{ 'overflow-hidden': visited === false }">
    <b-overlay
      class="intro"
      :show="page === undefined"
      z-index="0"
    >
      <page-view
        v-if="page"
        :page="page" slug="intro"
        @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'


export default {
  name: 'Introduction',

  components: {
    PageView
  },

  data () {
    return {
      page: undefined,
      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')
    }
    this.page = await this.$store.dispatch('QUERY_PAGE', 'intro')
  }
}
</script>

<style lang="scss" scoped>
.view-introduction {
  height: 100%;
  position: relative;

  &.overflow-hidden {
    overflow: hidden;
  }
}

.intro {
  height: 100%;

  .page-intro {
    font-family: $font-family-text;
    font-size: 1.5rem;

    @include media-breakpoint-up($size-bp) {
      font-size: 2rem;
    }

    @include media-breakpoint-up($layout-bp) {
      ::v-deep .page-wrapper {
        max-width: 70%;
        margin: auto;
      }
    }
  }
}

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