add popup welcome on first visit
This commit is contained in:
axolotle
@@ -86,6 +86,7 @@ $font-family-sans-serif: 'Noto Sans';
|
||||
$font-family-text: 'Redaction'; // custom
|
||||
|
||||
$font-size-base: 1rem;
|
||||
$font-size-base-em: 1em;
|
||||
$font-size-sm: $font-size-base * .9;
|
||||
|
||||
$line-height-base: 1.5;
|
||||
@@ -95,6 +96,13 @@ $line-height-sm: $line-height-base;
|
||||
// Headings
|
||||
$headings-font-weight: 700;
|
||||
$headings-line-height: $line-height-base;
|
||||
$h1-font-size: $font-size-base-em * 2.5;
|
||||
$h2-font-size: $font-size-base-em * 2;
|
||||
$h3-font-size: $font-size-base-em * 1.75;
|
||||
$h4-font-size: $font-size-base-em * 1.5;
|
||||
$h5-font-size: $font-size-base-em * 1.25;
|
||||
$h6-font-size: $font-size-base-em;
|
||||
|
||||
// Buttons
|
||||
$input-btn-padding-y: 0;
|
||||
$input-btn-padding-x: .5rem;
|
||||
@@ -161,7 +169,7 @@ $popover-arrow-outer-color: null;
|
||||
|
||||
// HEADER
|
||||
$header-spacer-sm: 18px;
|
||||
$header-spacer: 35px;
|
||||
$header-spacer: 30px;
|
||||
$header-height: 86px;
|
||||
|
||||
// NODEVIEW
|
||||
|
||||
@@ -52,6 +52,6 @@ a:hover {
|
||||
@if $color == 'depart' {
|
||||
@include text-emphasis-variant(".text-#{$color}", $black, true);
|
||||
} @else {
|
||||
@include text-emphasis-variant(".text-#{$color}", darken($value, 30%), true);
|
||||
@include text-emphasis-variant(".text-#{$color}", darken($value, 15%), true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template lang="html">
|
||||
<div class="page wh-100" :class="'page-' + slug">
|
||||
<div class="page" :class="'page-' + slug">
|
||||
<div class="page-wrapper" v-html="page.content" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -13,16 +13,9 @@ export default {
|
||||
slug: { type: String, required: true }
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
links: undefined
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addFootnotes () {
|
||||
const links = this.$el.querySelectorAll('.page-wrapper a')
|
||||
console.log('addFootnotes', links)
|
||||
links.forEach((link, i) => {
|
||||
const number = parseInt(link.hash.replace('#', ''))
|
||||
if (!isNaN(number)) {
|
||||
@@ -38,8 +31,6 @@ export default {
|
||||
this.addFootnoteContent(link, i)
|
||||
}
|
||||
})
|
||||
|
||||
this.links = links
|
||||
},
|
||||
|
||||
addFootnoteContent (link, i) {
|
||||
@@ -51,13 +42,14 @@ export default {
|
||||
},
|
||||
|
||||
onFootnoteLinkClick (e) {
|
||||
document.getElementById(e.target.id + '-content').classList.toggle('show')
|
||||
console.log('onFootnoteLinkClick', e.target.dataset.number, e)
|
||||
const container = document.getElementById(e.target.id + '-content')
|
||||
if (container) {
|
||||
container.classList.toggle('show')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
console.log('mounted', this.page.notes)
|
||||
if (this.page.notes) this.addFootnotes()
|
||||
}
|
||||
}
|
||||
@@ -65,6 +57,12 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
font-size: 1rem;
|
||||
|
||||
@include media-breakpoint-up($size-bp) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
|
||||
|
||||
@include media-breakpoint-up($size-bp) {
|
||||
@@ -135,7 +133,5 @@ export default {
|
||||
margin: 0 0 1em 2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div
|
||||
class="node-view-footer" :class="'node-view-footer-' + mode"
|
||||
>
|
||||
<div class="node-view-footer-wrapper d-flex w-100">
|
||||
<div class="node-view-footer-wrapper w-100">
|
||||
<div class="tags mb-n2">
|
||||
<b-badge
|
||||
v-for="tag in node.tags" :key="tag.id"
|
||||
|
||||
+14
-3
@@ -1,10 +1,21 @@
|
||||
<template>
|
||||
<component-debug :component="this">
|
||||
</component-debug>
|
||||
<div class="view-home">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Home'
|
||||
name: 'Home',
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
+84
-10
@@ -1,14 +1,27 @@
|
||||
<template>
|
||||
<b-overlay
|
||||
class="intro"
|
||||
:show="page === undefined"
|
||||
z-index="0"
|
||||
>
|
||||
<page-view v-if="page" :page="page" slug="intro" />
|
||||
</b-overlay>
|
||||
<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" />
|
||||
</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" />
|
||||
</b-overlay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
import { PageView } from '@/components/layouts'
|
||||
|
||||
|
||||
@@ -21,20 +34,42 @@ export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
page: undefined
|
||||
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 {
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.page-intro {
|
||||
font-family: $font-family-text;
|
||||
@@ -45,4 +80,43 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
|
||||
&-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>
|
||||
|
||||
@@ -7,14 +7,20 @@ export default {
|
||||
welcome: undefined,
|
||||
intro: undefined,
|
||||
ids: {
|
||||
welcome: 1,
|
||||
welcome: 208,
|
||||
intro: 207
|
||||
}
|
||||
},
|
||||
visited: localStorage.getItem('visited') === 'true'
|
||||
},
|
||||
|
||||
mutations: {
|
||||
'SET_PAGE' (state, { slug, page }) {
|
||||
state[slug] = page
|
||||
},
|
||||
|
||||
'SET_VISITED' (state, visited) {
|
||||
state.visited = visited
|
||||
localStorage.setItem('visited', visited)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -29,5 +35,6 @@ export default {
|
||||
},
|
||||
|
||||
getters: {
|
||||
visited: state => state.visited
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user