Mercurial > libervia-templates
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; +}