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