Step toward a one-page application

[vchess.git] / public / javascripts / components / variantSummary.js

diff --git a/public/javascripts/components/variantSummary.js b/public/javascripts/components/variantSummary.js
index 620f810..16b06ce 100644 (file)
--- a/public/javascripts/components/variantSummary.js
+++ b/public/javascripts/components/variantSummary.js
@@ -1,8 +1,9 @@
 // Show a variant summary on index
 Vue.component('my-variant-summary', {
-       props: ['vobj'],
+       props: ['vobj','index'],
        template: `
-               <div class="variant col-sm-12" :id="vobj.name">
+               <div class="variant col-sm-12 col-md-5 col-lg-4" :id="vobj.name"
+                       :class="{'col-md-offset-1': index%2==0, 'col-lg-offset-2': index%2==0}">
                        <a :href="url">
                                <h4 class="boxtitle text-center">
                                        {{ vobj.name }}
@@ -11,7 +12,7 @@ Vue.component('my-variant-summary', {
                                        </span>
                                </h4>
                                <p class="description text-center">
-                                       {{ vobj.desc }}
+                                       {{ translate(vobj.desc) }}
                                </p>
                        </a>
                </div>
@@ -21,4 +22,9 @@ Vue.component('my-variant-summary', {
                        return "/" + this.vobj.name;
                },
        },
+       methods: {
+               translate: function(text) {
+                       return translations[text];
+               },
+       },
 })