add CloseButton to PageView

This commit is contained in:
axolotle
2021-07-05 16:42:17 +02:00
parent 348e28df3c
commit e7ab42d864
2 changed files with 38 additions and 15 deletions
+28
View File
@@ -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
View File
@@ -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>