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