Browse Source

add CloseButton to PageView

axolotle 2 years ago
parent
commit
e7ab42d864
2 changed files with 38 additions and 15 deletions
  1. 28 0
      src/components/layouts/PageView.vue
  2. 10 15
      src/pages/Introduction.vue

+ 28 - 0
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;

+ 10 - 15
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>