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 import afterRawLoad from "@/utils/afterRawLoad";
  13 export default {
  14   name: "my-variants",
  15   data: function() {
  16     return {
  17       st: store.state
  18     };
  19   },
  20   computed: {
  21     content: function() {
  22       return (
  23         afterRawLoad(
  24           require(
  25             "raw-loader!@/translations/variants/" + this.st.lang + ".pug"
  26           ).default
  27         )
  28       );
  29     }
  30   },
  31   methods: {
  32     // oninput listener, required for smartphones:
  33     setCurPrefix: function(e) {
  34       this.curPrefix = e.target.value;
  35     },
  36     getLink: function(vname) {
  37       return "/variants/" + vname;
  38     },
  39     getVclasses: function(varray, idx) {
  40       const idxMod2 = idx % 2;
  41       return {
  42         'col-md-offset-1': idxMod2 == 0,
  43         'col-lg-offset-2': idxMod2 == 0,
  44         'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
  45       };
  46     },
  47   }
  48 };
  49 </script>
  50
  51 <style lang="sass" scoped>
  52 a#mainLink
  53   display: block
  54   margin: 10px auto
  55   text-align: center
  56   font-size: 1.3em
  57 </style>