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       input#prefixFilter(
   6         v-model="curPrefix"
   7         @input="setCurPrefix($event)"
   8         :placeholder="st.tr['Prefix?']"
   9       )
  10     .variant.col-sm-12.col-md-5.col-lg-4(
  11       v-for="(v,idx) in filteredVariants"
  12       :class="getVclasses(filteredVariants, idx)"
  13     )
  14       router-link(:to="getLink(v.name)")
  15         h4.boxtitle.text-center {{ v.name }}
  16         p.description.text-center {{ st.tr[v.desc] }}
  17 </template>
  18
  19 <script>
  20 import { store } from "@/store";
  21 export default {
  22   name: "my-variants",
  23   data: function() {
  24     return {
  25       curPrefix: "",
  26       st: store.state
  27     };
  28   },
  29   computed: {
  30     filteredVariants: function() {
  31       const capitalizedPrefix = this.curPrefix.replace(/^\w/, c =>
  32         c.toUpperCase()
  33       );
  34       const variants = this.st.variants
  35         .filter(v => {
  36           return v.name.startsWith(capitalizedPrefix);
  37         })
  38         .map(v => {
  39           return {
  40             name: v.name,
  41             desc: v.description
  42           };
  43         })
  44         .sort((a, b) => {
  45           return a.name.localeCompare(b.name);
  46         });
  47       return variants;
  48     }
  49   },
  50   methods: {
  51     // oninput listener, required for smartphones:
  52     setCurPrefix: function(e) {
  53       this.curPrefix = e.target.value;
  54     },
  55     getLink: function(vname) {
  56       return "/variants/" + vname;
  57     },
  58     getVclasses: function(varray, idx) {
  59       const idxMod2 = idx % 2;
  60       return {
  61         'col-md-offset-1': idxMod2 == 0,
  62         'col-lg-offset-2': idxMod2 == 0,
  63         'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
  64       };
  65     },
  66   }
  67 };
  68 </script>
  69
  70 <style lang="sass" scoped>
  71 input#prefixFilter
  72   display: block
  73   margin: 0 auto
  74
  75 .variant
  76   box-sizing: border-box
  77   border: 1px solid brown
  78   background-color: lightyellow
  79   &:hover
  80     background-color: yellow
  81   a
  82     color: #663300
  83     text-decoration: none
  84   .boxtitle
  85     font-weight: bold
  86     margin-bottom: 0
  87   .description
  88     @media screen and (max-width: 767px)
  89       margin-top: 0
  90
  91 .last-noneighb
  92   margin: 0 auto
  93 </style>