view sat_templates/templates/default/base/base.html @ 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 178f55b825b7
children cda2aad3eed0
line wrap: on
line source

{% set embedded = True %} {# embedded is set to avoid including base.html several times if a generic page is included (e.g. blog/articles.html) #}
{% import 'components/common.html' as component with context %}
{{ script.include('common', '') }} {# common.js is, as its name state, a common script, so it's useful to import it here #}
{{ script.include('dom_update') }} {# will check page for dom element to modify when javascript is enabled #}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% if norobots %}
        <meta name="robots" content="noindex, nofollow">
    {% endif %}

    <title>{% block title %}{{C.APP_NAME}}{% endblock %}</title>

    {% if css_content is defined %}
        <style type="text/css">
            {{css_content}}
        </style>
        {% if css_content_noscript is defined %}
        <noscript>
            <style type="text/css">
                {{css_content_noscript}}
            </style>
        </noscript>
        {% endif %}
    {% else %}
        {% for css_file in css_files %}
            <link rel='stylesheet' type="text/css" href='{{css_file}}'>
        {% endfor %}
        {% if css_files_noscript %}
            <noscript>
                {% for css_file in css_files_noscript %}
                    <link rel='stylesheet' type="text/css" href='{{css_file}}'>
                {% endfor %}
            </noscript>
        {% endif %}
    {% endif %}

    {% if xmpp_uri is defined %}
        <link rel="alternate" type="application/atom+xml" href="{{xmpp_uri}}" >
    {% endif %}

    {% if dynamic_style is defined %}
    {# be extra careful about dynamic style, insure escaping if you use untrusted values ! #}
        <style type="text/css">
        {{dynamic_style}}
        </style>
    {% endif %}

    {# JS handling #}
    {% if websocket is defined %}
        {{ script.include('websocket', '') }}
    {% endif %}
    {# FIXME: following ugly hack is temporarily needed for dom_update, until a proper way to handle gettext dynamicly is implemented #}
    <script>expand_txt="{% trans %}Click to expand…{% endtrans %}"; reduce_txt="{% trans %}Click to reduce…{% endtrans %}";</script>
    {{ script.generate_scripts() }}
    {% if websocket is defined %}
        <script>var socket=new WSHandler("{{websocket.url}}", "{{websocket.token}}", {{websocket.debug}});</script>
    {% endif %}

    {% block favicon %}
        <link rel="icon" href="{{media_path}}icons/apps/64/sat.png">
    {% endblock favicon %}
</head>
<body>
    {% if main_menu %}
        {% block 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 %}

    <main id='main_area'>
        <header>
            {% if confirm %}
            {# confirmation message used when post data has been handled correctly #}
                {% block confirm %}
                    <div class="box post_confirm">
                        {% block confirm_message %}
                            {% trans %}Your data has been sent correctly.{% endtrans %}
                        {% endblock confirm_message %}
                    </div>
                {% endblock confirm %}
            {% endif %}

        </header>

        <div id="body">
        {% block category_menu scoped %}
            {% if category_menu is defined %}
                {{ component.menu(category_menu, class="category_menu") }}
            {% endif %}
        {% endblock category_menu %}
        {% block body %}
        {% endblock body %}
        </div>
        <footer class="page__footer">{% block footer %}<span>{% trans app_name=C.APP_NAME %}Powered by {{app_name}}{% endtrans %}</span>{% endblock %}</footer>
    </main>
</body>
</html>