e5d02856f5ade3bdcb2de8e47ecca8cabf5ba1c1
[vchess.git] / 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="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>