view sat_templates/templates/default/base/base.html @ 295:1de599c5a68f

bulma (base): loading screen: when the `loading_screen` variable is set before extending `base/base.html`, a loading modal is shown (and must be removed via JavaScript). This avoids the user to try to use an interface which is not reactive or working normally because JS is not fully loaded yet.
author Goffi <goffi@goffi.org>
date Fri, 27 Nov 2020 12:24:03 +0100
parents caa3767707fb
children
line wrap: on
line source

 {# embedded is set to avoid including base.html several times if a generic page is included (e.g. blog/articles.html) #}
{% set embedded = True %}
{% import 'components/common.html' as component with context %}
{{ script.include('common', '') }} {# common.js is, as its name states, 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 links is defined %}
        {% for link_data in links %}
            <link{{link_data|xmlattr}}>
        {% endfor %}
    {% 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 csrf_token is defined %}
        <script>var csrf_token = "{{csrf_token}}";</script>
    {% endif %}
    {% 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() }}
    {% for script in scripts %}
        <script{{ {'src': script.src, 'type': script.type} | xmlattr }}>{{script.content|safe}}</script>
    {% endfor %}
    {% 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{{ {'onload': body_onload} | xmlattr }}>
    {% if atom_url is defined %}
        {{ icon_defs('feed') }}
    {% endif %}
    {% 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 %}
            {% if notifications %}
                {% block notifications %}
                    {% for notification in notifications %}
                        <div class="box notification notification--{{notification.level}}">
                            {{ notification.message }}
                        </div>
                    {% endfor %}
                {% endblock notifications %}
            {% 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 %}
                    {% if atom_url is defined %}

                        <a href="{{atom_url}}" class="text--clickable">
                            {% trans %}subscribe{% endtrans %} {{ icon('feed', cls='icon--text')}}
                        </a>
                    {% endif %}
                </span>
            {% endblock %}
        </footer>
    </main>
</body>
</html>