mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 06:37:23 +01:00
535ee2b2a7
* Turning H2s into anchors to add hand cursor and to create addressable page fragments adding ref to target individual entries adding scroll handler to make sure expanded result is in view. * combining click handler directives as per CR * changing question display to always render, then hide via CSS, vs only render when state changes. * updating pug template to include heading in each URL fragment * simplifying logic & moving to vue-bootstrap accordion since multiple open panels is not required * adding pointer cursor to FAQ headings * moving initial hash checking to data prop instead of mounted so it does not trigger oddities on on hash change (re-mount) * using new pug HTML for bootstrap collapse * removing extraneous markup * updating styling to match existing page * removing fancier than necessary markup, and attendant styles * using more standard event property
98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
<template lang="pug">
|
|
.container-fluid(role="tablist")
|
|
.row
|
|
.col-12.col-md-6.offset-md-3
|
|
h1#faq-heading {{ $t('frequentlyAskedQuestions') }}
|
|
.faq-question(v-for='(heading, index) in headings', :key="index")
|
|
h2(role="tab", v-b-toggle="heading", @click="handleClick($event)", variant="info") {{ $t(`faqQuestion${index}`) }}
|
|
b-collapse(:id="heading", :visible="isVisible(heading)", accordion="faq", role="tabpanel")
|
|
div.card-body(v-markdown="$t('webFaqAnswer' + index, replacements)")
|
|
hr
|
|
p(v-markdown="$t('webFaqStillNeedHelp')")
|
|
</template>
|
|
|
|
<style lang='scss' scoped>
|
|
.card-body {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.faq-question h2 {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.faq-question .card-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.static-wrapper .faq-question h2 {
|
|
margin: 0 0 16px 0;
|
|
}
|
|
|
|
.faq-question a {
|
|
text-decoration: none;
|
|
color: #4F2A93;
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.container-fluid {
|
|
margin: auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// @TODO: env.EMAILS.TECH_ASSISTANCE_EMAIL
|
|
const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
|
|
|
|
import markdownDirective from 'client/directives/markdown';
|
|
|
|
export default {
|
|
directives: {
|
|
markdown: markdownDirective,
|
|
},
|
|
data () {
|
|
let headings = [
|
|
'overview',
|
|
'set-up-tasks',
|
|
'sample-tasks',
|
|
'task-color',
|
|
'health',
|
|
'party-with-friends',
|
|
'pets-mounts',
|
|
'character-classes',
|
|
'blue-mana-bar',
|
|
'monsters-quests',
|
|
'gems',
|
|
'bugs-features',
|
|
'world-boss',
|
|
];
|
|
|
|
const hash = window.location.hash.replace('#', '');
|
|
|
|
return {
|
|
headings,
|
|
replacements: {
|
|
techAssistanceEmail: TECH_ASSISTANCE_EMAIL,
|
|
wikiTechAssistanceEmail: `mailto:${TECH_ASSISTANCE_EMAIL}`,
|
|
},
|
|
visible: hash && headings.includes(hash) ? hash : null,
|
|
// @TODO webFaqStillNeedHelp: {
|
|
// linkStart: '[',
|
|
// linkEnd: '](/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a)',
|
|
// },
|
|
// "webFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](http://habitica.wikia.com/wiki/FAQ), come ask in the <%= linkStart %>Habitica Help guild<%= linkEnd %>! We're happy to help."
|
|
};
|
|
},
|
|
methods: {
|
|
isVisible (heading) {
|
|
return this.visible && this.visible === heading;
|
|
},
|
|
handleClick (e) {
|
|
if (!e) return;
|
|
const heading = e.target.nextElementSibling.id;
|
|
history.pushState({}, heading, `#${heading}`);
|
|
},
|
|
},
|
|
};
|
|
</script>
|