Sabe Jones
c51c90ba41
commit 7d6320ee2d6e1dac5ac025c188162cba35ed49bf Author: Sabe Jones <sabe@habitica.com> Date: Mon May 6 16:22:53 2024 -0500 fix(faq): copy updates commit 234870a7b2bc3b23ba2a044a1010fdc9b417bc45 Author: Sabe Jones <sabe@habitica.com> Date: Fri May 3 16:06:48 2024 -0500 fix(faq): cleaner layout commit 06f162cc7a6a2b94b916ae0514b08ede09e7a2dc Author: Sabe Jones <sabe@habitica.com> Date: Tue Apr 30 17:21:50 2024 -0500 feat(faq): Content Schedule notes
121 lines
2.9 KiB
Vue
121 lines
2.9 KiB
Vue
<template>
|
|
<div class="top-container mx-auto">
|
|
<div class="main-text mr-4 col-8">
|
|
<!-- title -->
|
|
<div
|
|
class="title-details"
|
|
role="tablist"
|
|
>
|
|
<div class="body-text">
|
|
<h1
|
|
v-once
|
|
id="faq-heading"
|
|
>
|
|
{{ $t('frequentlyAskedQuestions') }}
|
|
</h1>
|
|
<!-- subheadings -->
|
|
<div
|
|
v-for="(entry, index) in faq.questions"
|
|
:key="index"
|
|
class="body-text"
|
|
>
|
|
<h2
|
|
v-if="index === 0"
|
|
v-once
|
|
>
|
|
{{ $t('commonQuestions') }}
|
|
</h2>
|
|
<h2
|
|
v-if="entry.heading === 'play-with-others'"
|
|
v-once
|
|
id="parties"
|
|
>
|
|
{{ $t('parties') }}
|
|
</h2>
|
|
<h2
|
|
v-if="entry.heading === 'what-is-group-plan'"
|
|
v-once
|
|
id="group-plans"
|
|
>
|
|
{{ $t('groupPlan') }}
|
|
</h2>
|
|
<!-- entry header -->
|
|
<h3
|
|
v-once
|
|
v-b-toggle="entry.heading"
|
|
role="tab"
|
|
variant="info"
|
|
class="headings"
|
|
@click="handleClick($event)"
|
|
>
|
|
{{ entry.question }}
|
|
</h3>
|
|
<b-collapse
|
|
:id="entry.heading"
|
|
:visible="isVisible(entry.heading)"
|
|
accordion="faq"
|
|
role="tabpanel"
|
|
>
|
|
<!-- questions -->
|
|
<div
|
|
v-once
|
|
v-markdown="entry.web"
|
|
class="card-body p-0 pb-3"
|
|
></div>
|
|
</b-collapse>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<faq-sidebar />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~@/assets/scss/faq.scss';
|
|
</style>
|
|
|
|
<script>
|
|
import FaqSidebar from '@/components/shared/faqSidebar';
|
|
import markdownDirective from '@/directives/markdown';
|
|
|
|
export default {
|
|
components: {
|
|
FaqSidebar,
|
|
},
|
|
directives: {
|
|
markdown: markdownDirective,
|
|
},
|
|
data () {
|
|
return {
|
|
faq: {},
|
|
headings: [],
|
|
stillNeedHelp: '',
|
|
};
|
|
},
|
|
async mounted () {
|
|
this.$store.dispatch('common:setTitle', {
|
|
section: this.$t('help'),
|
|
subSection: this.$t('faq'),
|
|
});
|
|
this.faq = await this.$store.dispatch('faq:getFAQ');
|
|
for (const entry of this.faq.questions) {
|
|
this.headings.push(entry.heading);
|
|
}
|
|
this.stillNeedHelp = this.faq.stillNeedHelp.web;
|
|
document.body.style.background = '#ffffff';
|
|
},
|
|
methods: {
|
|
isVisible (heading) {
|
|
const hash = window.location.hash.replace('#', '');
|
|
return hash && this.headings.includes(hash) && hash === heading;
|
|
},
|
|
handleClick (e) {
|
|
if (!e) return;
|
|
const heading = e.target.nextElementSibling.id;
|
|
window.history.pushState({}, heading, `#${heading}`);
|
|
},
|
|
},
|
|
};
|
|
</script>
|