add CloseButton to PageView
This commit is contained in:
@@ -1,5 +1,9 @@
|
|||||||
<template lang="html">
|
<template lang="html">
|
||||||
<div class="page" :class="'page-' + slug">
|
<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 class="page-wrapper" v-html="page.content" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -58,6 +62,30 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.page {
|
.page {
|
||||||
font-size: 1rem;
|
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) {
|
@include media-breakpoint-up($size-bp) {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
|||||||
+10
-15
@@ -5,14 +5,21 @@
|
|||||||
:show="page === undefined"
|
:show="page === undefined"
|
||||||
z-index="0"
|
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>
|
</b-overlay>
|
||||||
|
|
||||||
<div v-if="visited === false" class="page-popup">
|
<div v-if="visited === false" class="page-popup">
|
||||||
<div class="page-popup-container h-100">
|
<div class="page-popup-container h-100">
|
||||||
<b-overlay :show="popup === undefined" z-index="0" class="h-100">
|
<b-overlay :show="popup === undefined" z-index="0" class="h-100">
|
||||||
<button-close @click="onPopupClose()" />
|
<page-view
|
||||||
<page-view v-if="popup" :page="popup" slug="welcome" />
|
v-if="popup"
|
||||||
|
:page="popup" slug="welcome"
|
||||||
|
@close="onPopupClose()"
|
||||||
|
/>
|
||||||
</b-overlay>
|
</b-overlay>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -106,17 +113,5 @@ export default {
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(0, -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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user