client/src/views/Faq.vue

   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   margin-bottom: 10px
  54   @media screen and (max-width: 767px)
  55     margin-left: var(--universal-margin)
  56     margin-right: var(--universal-margin)
  57
  58 .question
  59   color: darkblue
  60   font-size: 1.1em
  61   margin-top: 15px
  62   cursor: pointer
  63
  64 .answer
  65   margin-bottom: 10px
  66   ol, ul
  67     margin-top: 0
  68     margin-bottom: 0
  69 </style>