From e7ab42d864c68a21bf60a5f0a9dc220d56006c18 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Jul 2021 16:42:17 +0200
Subject: [PATCH] add CloseButton to PageView

---
 src/components/layouts/PageView.vue | 28 ++++++++++++++++++++++++++++
 src/pages/Introduction.vue          | 25 ++++++++++---------------
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/layouts/PageView.vue b/src/components/layouts/PageView.vue
index eb94ef0..7cf8281 100644
--- a/src/components/layouts/PageView.vue
+++ b/src/components/layouts/PageView.vue
@@ -1,5 +1,9 @@
 <template lang="html">
   <div class="page" :class="'page-' + slug">
+    <div class="btn-close-wrapper">
+      <button-close @click="$emit('close')" />
+    </div>
+
     <div class="page-wrapper" v-html="page.content" />
   </div>
 </template>
@@ -58,6 +62,30 @@ export default {
 <style lang="scss">
 .page {
   font-size: 1rem;
+  position: relative;
+
+  .btn-close-wrapper {
+    position: sticky;
+    z-index: 2;
+    float: right;
+    height: 0;
+    right: 0;
+    top: $node-view-spacer-sm-y;
+
+    @include media-breakpoint-up($size-bp) {
+      top: $node-view-spacer-y;
+    }
+
+    .btn-close {
+      position: absolute;
+      padding: 0.5rem;
+      width: 2.25rem;
+      height: 2.25rem;
+      top: -.5rem;
+      right: -.5rem;
+      background-color: $white;
+    }
+  }
 
   @include media-breakpoint-up($size-bp) {
     font-size: 1.5rem;
diff --git a/src/pages/Introduction.vue b/src/pages/Introduction.vue
index 21ca38d..77b3ae5 100644
--- a/src/pages/Introduction.vue
+++ b/src/pages/Introduction.vue
@@ -5,14 +5,21 @@
       :show="page === undefined"
       z-index="0"
     >
-      <page-view v-if="page" :page="page" slug="intro" />
+      <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">
-          <button-close @click="onPopupClose()" />
-          <page-view v-if="popup" :page="popup" slug="welcome" />
+          <page-view
+            v-if="popup"
+            :page="popup" slug="welcome"
+            @close="onPopupClose()"
+          />
         </b-overlay>
       </div>
     </div>
@@ -106,17 +113,5 @@ export default {
     top: 50%;
     transform: translate(0, -50%);
   }
-
-  &-container {
-    position: relative;
-
-    .btn-close {
-      position: sticky;
-      z-index: 2;
-      float: right;
-      right: $node-view-spacer-sm-x;
-      top: $node-view-spacer-sm-y;
-    }
-  }
 }
 </style>