Attempt to clarify installation instructions a little
[vchess.git] / client / src / views / VariantList.vue
CommitLineData
737a5daf
BA
1<template lang="pug">
2main
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)")
eaa5ad3e 15 h4.boxtitle.text-center {{ v.display }}
737a5daf
BA
16 p.description.text-center {{ st.tr[v.desc] }}
17</template>
18
19<script>
20import { store } from "@/store";
21export 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 => {
f20f9639 39 return v.display.startsWith(capitalizedPrefix);
737a5daf
BA
40 })
41 .map(v => {
42 return {
43 name: v.name,
eaa5ad3e
BA
44 desc: v.description,
45 display: v.display
737a5daf
BA
46 };
47 })
48 .sort((a, b) => {
f20f9639 49 return a.display.localeCompare(b.display);
737a5daf
BA
50 });
51 return variants;
52 }
53 },
54 methods: {
55 // oninput listener, required for smartphones:
56 setCurPrefix: function(e) {
57 this.curPrefix = e.target.value;
58 },
59 getLink: function(vname) {
60 return "/variants/" + vname;
61 },
62 getVclasses: function(varray, idx) {
63 const idxMod2 = idx % 2;
64 return {
65 'col-md-offset-1': idxMod2 == 0,
66 'col-lg-offset-2': idxMod2 == 0,
67 'last-noneighb': idxMod2 == 0 && idx == varray.length - 1
68 };
69 },
70 }
71};
72</script>
73
74<style lang="sass" scoped>
75input#prefixFilter
76 display: block
77 margin: 0 auto
78
79.variant
80 box-sizing: border-box
81 border: 1px solid brown
82 background-color: lightyellow
83 &:hover
84 background-color: yellow
85 a
86 color: #663300
87 text-decoration: none
88 .boxtitle
89 font-weight: bold
90 margin-bottom: 0
91 .description
92 @media screen and (max-width: 767px)
93 margin-top: 0
94
95.last-noneighb
96 margin: 0 auto
97</style>