Add poor man's translation

playground/static/playground/css/styles.css

@@ -1900,3 +1900,25 @@ ol[data-alternative]:before {
 .autocomplete-suggestions strong { font-weight: bold; }
 /* .autocomplete-group { padding: 2px 5px; } */
 /* .autocomplete-group strong { display: block; border-bottom: 1px solid #000; } */
+
+
+
+
+
+
+
+
+
+
+
+
+
+.is-fr, .is-en { display: none; }
+
+[lang="fr"] .is-fr {
+    display: block
+}
+
+[lang="en"] .is-en {
+    display: block
+}

playground/static/playground/js/main.js

@@ -29,6 +29,7 @@ window.W = window.W || {};
 
     W.config = W.config || {};
     W.config.lang = W.utils.getUserLanguage();
+    $('html').attr('lang', W.config.lang);
 
     var scoreApp = new W.ScoreApp();
     scoreApp.start();

playground/static/playground/js/views.js

@@ -3005,6 +3005,7 @@ window.W = window.W || {};
         switchLanguage: function (view, event) {
             W.config.lang = $(event.currentTarget).attr("data-lang");
             var lang = W.utils.setCookie("lang", W.config.lang);
+            $('html').attr('lang', W.config.lang);
             
             _.each(this.getRegions(), function(element, index, list) {
                 var currentView = element.currentView;

playground/templates/playground/underscore/about.mtpl

 {% load flatpages %}
-{% get_flatpages '/la-notation-w/' as about_pages %}
 
-{% for page in about_pages %}
-{{ page.content|safe }}
-{% endfor %}
+{% get_flatpages '/la-notation-w/' as about_pages_fr %}
+{% get_flatpages '/la-notation-w/en/' as about_pages_en %}
+
+<div class="is-en">
+    {% for page in about_pages %}
+    {{ page.content|safe }}
+    {% endfor %}
+</div>
+
+<div class="is-en">
+    {% if about_pages_en %}
+        {% for page in about_pages_en %}
+        {{ page.content|safe }}
+        {% endfor %}
+    {% else %}
+        {% for page in about_pages_fr %}
+        {{ page.content|safe }}
+        {% endfor %}
+    {% endif %}
+</div>

playground/templates/playground/underscore/credits.mtpl

 {% load flatpages %}
-{% get_flatpages '/credits/' as credits_pages %}
+{% get_flatpages '/credits/' as credits_pages_fr %}
+{% get_flatpages '/credits/en/' as credits_pages_en %}
 
-{% for page in credits_pages %}
-{{ page.content|safe }}
-{% endfor %}
+<div class="is-fr">
+    {% for page in credits_pages_fr %}
+    {{ page.content|safe }}
+    {% endfor %}
+</div>
+
+<div class="is-en">
+    {% if credits_pages_en %}
+        {% for page in credits_pages_en %}
+        {{ page.content|safe }}
+        {% endfor %}
+    {% else %}
+        {% for page in credits_pages_fr %}
+        {{ page.content|safe }}
+        {% endfor %}
+    {% endif %}
+</div>

playground/templates/playground/underscore/home.mtpl

-<div class="intro body-text body-text--about">
 {% load flatpages %}
-{% get_flatpages '/introduction/' as intro_pages %}
 
-{% for page in intro_pages %}
-{{ page.content|safe }}
-{% endfor %}
+{% get_flatpages '/introduction/' as intro_pages_fr %}
+{% get_flatpages '/introduction-en/' as intro_pages_en %}
+
+<div class="intro body-text body-text--about">
+    {# Poor man translation: only show selected language using CSS #}
+    <div class="is-fr">
+        {% for page in intro_pages_fr %}
+        {{ page.content|safe }}
+        {% endfor %}
+    </div>
+
+    <div class="is-en">
+        {# Try to get english translation; fallback to french #}
+        {% if intro_pages_en %}
+            {% for page in intro_pages_en %}
+            {{ page.content|safe }}
+            {% endfor %}
+        {% else %}
+            {% for page in intro_pages_fr %}
+            {{ page.content|safe }}
+            {% endfor %}
+        {% endif %}
+    </div>
 </div>
 
 <div class="scores-list">