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 import afterRawLoad from "@/utils/afterRawLoad";
  11 export default {
  12   name: "my-faq",
  13   data: function() {
  14     return { st: store.state };
  15   },
  16   computed: {
  17     content: function() {
  18       return (
  19         afterRawLoad(
  20           require(
  21             "raw-loader!@/translations/faq/" + this.st.lang + ".pug"
  22           ).default
  23         )
  24       );
  25     }
  26   },
  27   mounted: function() {
  28     this.re_setListeners();
  29   },
  30   updated: function() {
  31     this.re_setListeners();
  32   },
  33   methods: {
  34     re_setListeners: function() {
  35       document.querySelectorAll(".answer").forEach(a => {
  36         a.style.display = "none";
  37       });
  38       document.querySelectorAll(".question").forEach(q => {
  39         q.addEventListener("click", (e) => {
  40           let answerDiv = e.target.nextSibling;
  41           const answerVisible = (answerDiv.style.display == "block");
  42           answerDiv.style.display = (answerVisible ? "none" : "block");
  43         });
  44       });
  45     }
  46   }
  47 };
  48 </script>
  49
  50 <style lang="sass">
  51 #faqDiv
  52   margin-bottom: 10px
  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
  64   margin-bottom: 10px
  65   ol, ul
  66     margin-top: 0
  67     margin-bottom: 0
  68 </style>