changeset 183:240bbac435f4

base: implemented language button: - `component.menu` can now be used with a `{% call %}`, allowing extra HTML to be added after in the <nav> element - a language dropdown is shown if more than one translation is available, allowing to change page locale - if javascript is available, only the dropdown is visible, and changing it reload the page with new locale - if javascript is not available, a submit button is display to change the locale
author Goffi <goffi@goffi.org>
date Wed, 10 Apr 2019 21:05:58 +0200
parents 29214fa3a53b
children 6b13a2d800e5
files sat_templates/templates/default/base/base.html sat_templates/templates/default/components/common.html sat_templates/templates/default/static/styles.css sat_templates/templates/default/static/styles_noscript.css
diffstat 4 files changed, 59 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/templates/default/base/base.html	Wed Apr 10 21:05:56 2019 +0200
+++ b/sat_templates/templates/default/base/base.html	Wed Apr 10 21:05:58 2019 +0200
@@ -67,7 +67,22 @@
 <body>
     {% if main_menu %}
         {% block main_menu %}
-            {{ component.menu(main_menu, class="main_menu") }}
+            {% call component.menu(main_menu, class="main_menu") %}
+            <form action="" method="get" class="menu__language">
+                <select name="{{C.KEY_LANG}}" id="{{C.KEY_LANG}}" onchange="this.form.submit()">
+                    {% if locales|length>1 %}
+                        {% for l in locales %}
+                            <option value="{{l}}" {{"selected" if l==locale}}>
+                                {{l.language_name}}
+                            </option>
+                        {% endfor %}
+                    {% endif %}
+                </select>
+                <button type="submit" class="menu__language-btn">
+                    {% trans %}change{% endtrans %}
+                </button>
+            </form>
+            {% endcall %}
         {% endblock main_menu %}
     {% endif %}
 
--- a/sat_templates/templates/default/components/common.html	Wed Apr 10 21:05:56 2019 +0200
+++ b/sat_templates/templates/default/components/common.html	Wed Apr 10 21:05:58 2019 +0200
@@ -7,5 +7,8 @@
             <li><a class="menu_item menu_item--{{name}}" {{ {'href': url}|xmlattr }}>{{ml.label[name]}}</a></li>
         {% endfor %}
         </ul>
+        {% if caller is defined %}
+            {{ caller()}}
+        {% endif %}
     </nav>
 {% endmacro %}
--- a/sat_templates/templates/default/static/styles.css	Wed Apr 10 21:05:56 2019 +0200
+++ b/sat_templates/templates/default/static/styles.css	Wed Apr 10 21:05:58 2019 +0200
@@ -791,15 +791,20 @@
 
 .main_menu {
     min-width: 200px;
-    /* background-color: #eaeaea; */
     background-color: #333;
     color: white;
     overflow: auto;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    justify-content: space-between;
+    padding-bottom: 0.5em;
 }
 
 .main_menu ul {
     flex-direction: row;
     flex-wrap: wrap;
+    margin-bottom: 0.2em;
 }
 
 .main_menu li {
@@ -819,6 +824,31 @@
     font-weight: bold;
 }
 
+.menu__language {
+    display: flex;
+    flex-direction: row;
+	justify-content: center;
+    padding: 0 0.3em;
+}
+
+.menu__language select {
+    border: none;
+    font-size: 0.8em;
+}
+
+.menu__language button {
+    display: none;
+    border: none;
+    background-color: var(--color-prim--light);
+    margin-left: 1em;
+    font-size: 0.8em;
+}
+
+.menu__language button:hover {
+    background-color: var(--color-prim--dark);
+    cursor: pointer;
+}
+
 .category_menu ul {
     justify-content: center;
 }
@@ -1310,4 +1340,5 @@
         flex-direction: column;
         padding-left: 2em;
     }
+
 }
--- a/sat_templates/templates/default/static/styles_noscript.css	Wed Apr 10 21:05:56 2019 +0200
+++ b/sat_templates/templates/default/static/styles_noscript.css	Wed Apr 10 21:05:58 2019 +0200
@@ -27,3 +27,11 @@
     max-height: none;
     opacity: 1;
 }
+
+/*********
+ * Menus *
+ *********/
+
+.menu__language button {
+    display: initial;
+}