client/src/views/Variants.vue

   1 <template lang="pug">
   2 main
   3   .row
   4     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
   5       a#mainLink(href="/#/variants/list")
   6         | {{ st.tr["View alphabetical variants list"] }}
   7       div(v-html="content")
   8 </template>
   9
  10 <script>
  11 import { store } from "@/store";
  12 export default {
  13   name: "my-variants",
  14   data: function() {
  15     return {
  16       st: store.state
  17     };
  18   },
  19   computed: {
  20     content: function() {
  21       // (AJAX) Request to get rules content (plain text, HTML)
  22       return (
  23         require("raw-loader!@/translations/variants/" + this.st.lang + ".pug")
  24         // Next two lines fix a weird issue after last update (2019-11)
  25         .replace(/\\n/g, " ")
  26         .replace(/\\"/g, '"')
  27         .replace('module.exports = "', "")
  28         .replace(/"$/, "")
  29       );
  30     }
  31   },
  32   methods: {
  33     // oninput listener, required for smartphones:
  34     setCurPrefix: function(e) {
  35       this.curPrefix = e.target.value;
  36     },
  37     getLink: function(vname) {
  38       return "/variants/" + vname;
  39     },
  40     getVclasses: function(varray, idx) {
  41       const idxMod2 = idx % 2;
  42       return {
  43         'col-md-offset-1': idxMod2 == 0,
  44         'col-lg-offset-2': idxMod2 == 0,
  45         'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
  46       };
  47     },
  48   }
  49 };
  50 </script>
  51
  52 <style lang="sass" scoped>
  53 a#mainLink
  54   display: block
  55   margin: 10px auto
  56   text-align: center
  57   font-size: 1.3em
  58 </style>