Fixes. TODO: autofocus on forms, and understand why email autofill in name field
[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="{'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>