4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
7 @input="setCurPrefix($event)"
8 :placeholder="st.tr['Prefix?']"
10 .variant.col-sm-12.col-md-5.col-lg-4(
11 v-for="(v,idx) in filteredVariants"
12 :class="getVclasses(filteredVariants, idx)"
14 router-link(:to="getLink(v.name)")
15 h4.boxtitle.text-center {{ v.name }}
16 p.description.text-center {{ st.tr[v.desc] }}
20 import { store } from "@/store";
30 document.getElementById("prefixFilter").focus();
33 filteredVariants: function() {
34 const capitalizedPrefix = this.curPrefix.replace(/^\w/, c =>
37 const variants = this.st.variants
39 return v.name.startsWith(capitalizedPrefix);
48 return a.name.localeCompare(b.name);
54 // oninput listener, required for smartphones:
55 setCurPrefix: function(e) {
56 this.curPrefix = e.target.value;
58 getLink: function(vname) {
59 return "/variants/" + vname;
61 getVclasses: function(varray, idx) {
62 const idxMod2 = idx % 2;
64 'col-md-offset-1': idxMod2 == 0,
65 'col-lg-offset-2': idxMod2 == 0,
66 'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
73 <style lang="sass" scoped>
79 box-sizing: border-box
80 border: 1px solid brown
81 background-color: lightyellow
83 background-color: yellow
91 @media screen and (max-width: 767px)