X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FVariants.vue;h=da6478b43f33053a904cf2862ddeeedda73407d3;hb=70c9745d34b705eb8a4dc72b6e4655739d31347c;hp=2a3f6cf02384f8b948ea1df983918f6bc90a1095;hpb=09d375717c256a2cbd71a5d3b3a4e21aee17c0ec;p=vchess.git

diff --git a/client/src/views/Variants.vue b/client/src/views/Variants.vue
index 2a3f6cf0..da6478b4 100644
--- a/client/src/views/Variants.vue
+++ b/client/src/views/Variants.vue
@@ -2,49 +2,30 @@
 main
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-      input#prefixFilter(
-        v-model="curPrefix"
-        @input="setCurPrefix($event)"
-        :placeholder="st.tr['Prefix?']"
-      )
-    .variant.col-sm-12.col-md-5.col-lg-4(
-      v-for="(v,idx) in filteredVariants"
-      :class="getVclasses(filteredVariants, idx)"
-    )
-      router-link(:to="getLink(v.name)")
-        h4.boxtitle.text-center {{ v.name }}
-        p.description.text-center {{ st.tr[v.desc] }}
+      a#mainLink(href="/#/variants/list")
+        | {{ st.tr["View alphabetical variants list"] }}
+      div(v-html="content")
 </template>
 
 <script>
 import { store } from "@/store";
+import afterRawLoad from "@/utils/afterRawLoad";
 export default {
   name: "my-variants",
   data: function() {
     return {
-      curPrefix: "",
       st: store.state
     };
   },
   computed: {
-    filteredVariants: function() {
-      const capitalizedPrefix = this.curPrefix.replace(/^\w/, c =>
-        c.toUpperCase()
+    content: function() {
+      return (
+        afterRawLoad(
+          require(
+            "raw-loader!@/translations/variants/" + this.st.lang + ".pug"
+          ).default
+        )
       );
-      const variants = this.st.variants
-        .filter(v => {
-          return v.name.startsWith(capitalizedPrefix);
-        })
-        .map(v => {
-          return {
-            name: v.name,
-            desc: v.description
-          };
-        })
-        .sort((a, b) => {
-          return a.name.localeCompare(b.name);
-        });
-      return variants;
     }
   },
   methods: {
@@ -68,26 +49,9 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-input#prefixFilter
+a#mainLink
   display: block
-  margin: 0 auto
-
-.variant
-  box-sizing: border-box
-  border: 1px solid brown
-  background-color: lightyellow
-  &:hover
-    background-color: yellow
-  a
-    color: #663300
-    text-decoration: none
-  .boxtitle
-    font-weight: bold
-    margin-bottom: 0
-  .description
-    @media screen and (max-width: 767px)
-      margin-top: 0
-
-.last-noneighb
-  margin: 0 auto
+  margin: 10px auto
+  text-align: center
+  font-size: 1.3em
 </style>