client/src/views/VariantList.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.display }}
  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   mounted: function() {
  30     document.getElementById("prefixFilter").focus();
  31   },
  32   computed: {
  33     filteredVariants: function() {
  34       const capitalizedPrefix = this.curPrefix.replace(/^\w/, c =>
  35         c.toUpperCase()
  36       );
  37       const variants = this.st.variants
  38         .filter(v => {
  39           return v.display.startsWith(capitalizedPrefix);
  40         })
  41         .map(v => {
  42           return {
  43             name: v.name,
  44             desc: v.description,
  45             display: v.display
  46           };
  47         })
  48         .sort((a, b) => {
  49           return a.display.localeCompare(b.display);
  50         });
  51       return variants;
  52     }
  53   },
  54   methods: {
  55     // oninput listener, required for smartphones:
  56     setCurPrefix: function(e) {
  57       this.curPrefix = e.target.value;
  58     },
  59     getLink: function(vname) {
  60       return "/variants/" + vname;
  61     },
  62     getVclasses: function(varray, idx) {
  63       const idxMod2 = idx % 2;
  64       return {
  65         'col-md-offset-1': idxMod2 == 0,
  66         'col-lg-offset-2': idxMod2 == 0,
  67         'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
  68       };
  69     },
  70   }
  71 };
  72 </script>
  73
  74 <style lang="sass" scoped>
  75 input#prefixFilter
  76   display: block
  77   margin: 0 auto
  78
  79 .variant
  80   box-sizing: border-box
  81   border: 1px solid brown
  82   background-color: lightyellow
  83   &:hover
  84     background-color: yellow
  85   a
  86     color: #663300
  87     text-decoration: none
  88   .boxtitle
  89     font-weight: bold
  90     margin-bottom: 0
  91   .description
  92     @media screen and (max-width: 767px)
  93       margin-top: 0
  94
  95 .last-noneighb
  96   margin: 0 auto
  97 </style>