Implement language selection as select element

Close #265

aleksis/core/static/js/main.js

@@ -45,6 +45,19 @@ $(document).ready( function () {
     // Initialize select [MAT]
     $('select').formSelect();
 
+    // If JS is activated, the language form will be auto-submitted
+    $('.language-field select').change(function () {
+
+        // Ugly bug fix to ensure correct value
+        const selectEl = $("select[name=language]");
+        selectEl.val(selectEl.val());
+
+        $(".language-form").submit();
+    });
+
+    // If auto-submit is activated (see above), the language submit must not be visible
+    $(".language-submit-p").hide();
+
     // Initalize print button
     $("#print").click(function () {
         window.print();

aleksis/core/static/style.scss

@@ -258,6 +258,15 @@ ul.footer-ul {
   line-height: 36px;
 }
 
+// Language form in footer
+
+.language-field .select-dropdown {
+  @extend .white-text;
+}
+
+.language-field svg path:first-child {
+  fill: white;
+}
 
 /* Collections */
 

aleksis/core/templates/core/base.html

@@ -121,10 +121,9 @@
   <div class="container">
     <div class="row no-margin footer-row-large">
       <div class="col l6 s12 no-pad-left height-inherit">
-        <p class="white-text valign-bot">
+        <div class="white-text valign-bot">
           {% include 'core/language_form.html' %}
-
-        </p>
+        </div>
       </div>
       <div class="col xl15 l6 offset-xl01 s12 no-pad-right">
         <ul class="no-margin right">
@@ -133,10 +132,9 @@
       </div>
     </div>
     <div class="row no-margin footer-row-small">
-            <span class="white-text make-it-higher">
-  {% include 'core/language_form.html' %}
-
-            </span>
+      <div class="white-text make-it-higher">
+        {% include 'core/language_form.html' %}
+      </div>
       <ul class="no-margin footer-ul">
         {% include "core/footer-menu.html" %}
       </ul>

aleksis/core/templates/core/language_form.html

@@ -3,17 +3,29 @@
 {% load i18n %}
 
 
-<form action="{% url 'set_language' %}" method="post">
+<form action="{% url 'set_language' %}" method="post" class="language-form">
   {% csrf_token %}
   <input name="next" type="hidden" value="{{ request.get_full_path }}">
 
   {% get_current_language as LANGUAGE_CODE %}
   {% get_available_languages as LANGUAGES %}
   {% get_language_info_list for LANGUAGES as languages %}
-  {% for language in languages %}
-    <button type="submit" value="{{ language.code }}" name="language"
-            class="blue-text text-lighten-4 btn-flat {% if language == LANGUAGE_CODE %} disabled {% endif %}">
-      {{ language.code }}
+
+  {# Select #}
+  <div class="input-field language-field">
+    <span>{% trans "Language" %}</span>
+    <select name="language" id="language-select">
+      {% for language in languages %}
+        <option value="{{ language.code }}" {% if language.code == LANGUAGE_CODE %}
+                selected {% endif %}>{{ language.name_local }}</option>
+      {% endfor %}
+    </select>
+  </div>
+
+  {# Submit button (only visible if JS isn't activated #}
+  <p class="language-submit-p">
+    <button type="submit" class="btn-flat waves-effect waves-light white-text">
+      {% trans "Select language" %}
     </button>
-  {% endfor %}
+  </p>
 </form>