Commit | Line | Data |
---|---|---|
ff0150d1 BA |
1 | <template lang="pug"> |
2 | main | |
3 | .row | |
4 | .col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3 | |
5 | div#faqDiv(v-html="content") | |
6 | </template> | |
7 | ||
8 | <script> | |
9 | import { store } from "@/store"; | |
10 | export default { | |
11 | name: "my-faq", | |
12 | data: function() { | |
13 | return { st: store.state }; | |
14 | }, | |
15 | computed: { | |
16 | content: function() { | |
17 | // (AJAX) Request to get FAQ content (plain text, HTML) | |
18 | return ( | |
19 | require("raw-loader!@/translations/faq/" + this.st.lang + ".pug") | |
20 | // Next two lines fix a weird issue after last update (2019-11) | |
21 | .replace(/\\n/g, " ") | |
22 | .replace(/\\"/g, '"') | |
23 | .replace('module.exports = "', "") | |
24 | .replace(/"$/, "") | |
25 | ); | |
26 | } | |
27 | }, | |
28 | mounted: function() { | |
29 | this.re_setListeners(); | |
30 | }, | |
31 | updated: function() { | |
32 | this.re_setListeners(); | |
33 | }, | |
34 | methods: { | |
35 | re_setListeners: function() { | |
36 | document.querySelectorAll(".answer").forEach(a => { | |
37 | a.style.display = "none"; | |
38 | }); | |
39 | document.querySelectorAll(".question").forEach(q => { | |
40 | q.addEventListener("click", (e) => { | |
41 | let answerDiv = e.target.nextSibling; | |
42 | const answerVisible = (answerDiv.style.display == "block"); | |
43 | answerDiv.style.display = (answerVisible ? "none" : "block"); | |
44 | }); | |
45 | }); | |
46 | } | |
47 | } | |
48 | }; | |
49 | </script> | |
50 | ||
51 | <style lang="sass"> | |
52 | #faqDiv | |
53 | @media screen and (max-width: 767px) | |
54 | margin-left: var(--universal-margin) | |
55 | margin-right: var(--universal-margin) | |
56 | ||
57 | .question | |
58 | color: darkblue | |
59 | font-size: 1.1em | |
60 | margin-top: 15px | |
61 | cursor: pointer | |
62 | ||
63 | .answer | |
b9ce3d0f | 64 | margin-bottom: 10px |
ff0150d1 BA |
65 | ol, ul |
66 | margin-top: 0 | |
67 | margin-bottom: 0 | |
68 | </style> |