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="{'col-md-offset-1': idx%2==0, 'col-lg-offset-2': idx%2==0}"
  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   }
  59 };
  60 </script>
  61
  62 <style lang="sass" scoped>
  63 input#prefixFilter
  64   display: block
  65   margin: 0 auto
  66
  67 .variant
  68   box-sizing: border-box
  69   border: 1px solid brown
  70   background-color: lightyellow
  71   &:hover
  72     background-color: yellow
  73   a
  74     color: #663300
  75     text-decoration: none
  76   .boxtitle
  77     font-weight: bold
  78     margin-bottom: 0
  79   .description
  80     @media screen and (max-width: 767px)
  81       margin-top: 0
  82 </style>