Some more cleaning + fixes
[vchess.git] / client / src / views / Variants.vue
CommitLineData
5b020e73 1<template lang="pug">
7aa548e7
BA
2main
3 .row
9a3049f3 4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
910d631b
BA
5 input#prefixFilter(
6 v-model="curPrefix"
7 :placeholder="st.tr['Prefix?']"
8 )
7aa548e7
BA
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] }}
5b020e73
BA
16</template>
17
18<script>
19import { store } from "@/store";
20export default {
cf2343ce 21 name: "my-variants",
5b020e73
BA
22 data: function() {
23 return {
85e5b5c1 24 curPrefix: "",
6808d7a1 25 st: store.state
5b020e73 26 };
85e5b5c1
BA
27 },
28 computed: {
6808d7a1
BA
29 filteredVariants: function() {
30 const capitalizedPrefix = this.curPrefix.replace(/^\w/, c =>
31 c.toUpperCase()
32 );
85e5b5c1 33 const variants = this.st.variants
6808d7a1
BA
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 });
5b020e73 46 return variants;
6808d7a1 47 }
85e5b5c1 48 },
5b020e73
BA
49 methods: {
50 getLink: function(vname) {
51 return "/variants/" + vname;
6808d7a1
BA
52 }
53 }
5b020e73
BA
54};
55</script>
56
41c80bb6 57<style lang="sass" scoped>
bd76b456
BA
58input#prefixFilter
59 display: block
60 margin: 0 auto
910d631b 61
fb54f098
BA
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
5b020e73 77</style>