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(
  24           "raw-loader!@/translations/variants/" + this.st.lang + ".pug"
  25           ).default
  26         .replace('export default "', "")
  27         .replace(/";$/, "")
  28         // Next two lines fix a weird issue after last update (2019-11)
  29         .replace(/\\n/g, " ")
  30         .replace(/\\"/g, '"')
  31       );
  32     }
  33   },
  34   methods: {
  35     // oninput listener, required for smartphones:
  36     setCurPrefix: function(e) {
  37       this.curPrefix = e.target.value;
  38     },
  39     getLink: function(vname) {
  40       return "/variants/" + vname;
  41     },
  42     getVclasses: function(varray, idx) {
  43       const idxMod2 = idx % 2;
  44       return {
  45         'col-md-offset-1': idxMod2 == 0,
  46         'col-lg-offset-2': idxMod2 == 0,
  47         'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
  48       };
  49     },
  50   }
  51 };
  52 </script>
  53
  54 <style lang="sass" scoped>
  55 a#mainLink
  56   display: block
  57   margin: 10px auto
  58   text-align: center
  59   font-size: 1.3em
  60 </style>