view sat_templates/templates/bulma/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 f1a39607d6a5
children c9396c3711e4
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 #}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {# using SVG directly doesn't always play well with Bulma, so we also use the icon font #}
    <link rel='stylesheet' type="text/css" href='{{media_path}}fonts/fontello/css/fontello.css'>
    <link rel='stylesheet' type="text/css" href='{{build_path}}bulma_sat.css'>

    {% 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 %}

    {% if csrf_token is defined %}
        <script>var csrf_token = "{{csrf_token}}"; var session_uuid="{{session_uuid}}";</script>
    {% endif %}

    {{ script.generate_scripts() }}

    {% for script in scripts %}
        <script{{ {'src': script.src, 'type': script.type} | xmlattr }}>{{script.content|safe}}</script>
    {% endfor %}

    {% block favicon %}
        <link rel="icon" href="{{media_path}}icons/apps/64/sat.png">
    {% endblock favicon %}
</head>
<body{{ {'onload': body_onload} | xmlattr }}{{ ' class="body--fullscreen"'|safe if full_screen_body }}>
    {% if atom_url is defined %}
        {{ icon_defs('feed') }}
    {% endif %}
    {% if loading_screen %}
        <div id="loading_screen" class="modal is-active">
            <div class="modal-background"></div>
            <div class="modal-content">
                <div class="notification has-text-centered">
                    <span class="icon is-large">
                        <i class="icon-loading icon_animate_spin"></i>
                    </span>
                    {% trans %}page is loading, please wait…{% endtrans %}
                </div>
            </div>
        </div>
    {% endif %}
    {% if main_menu %}
        {% block main_menu %}
            {{ component.menu(main_menu, class="main_menu") }}
        {% endblock main_menu %}
    {% endif %}
    {% block body_wrapper %}
    <div id="body" class="container">
        {% if confirm %}
            <article class="message is-success mt-4">
                <div class="message-header">
                    {% trans %}Success{% endtrans %}
                    <button class="delete" aria-label="delete" onclick="this.parentElement.parentElement.remove()"></button>
                </div>
                <div class="message-body">
                    {% trans %}Your data has been sent correctly.{% endtrans %}
                </div>
            </article>
        {% endif %}
        {% if notifications %}
                {% for notification in notifications %}
                    <article class="message {{ {C.LVL_WARNING: "is-warning"}.get(notification.level, "is-info") }} mt-4">
                        <div class="message-header">
                            {% trans %}Notification{% endtrans %}
                            <button class="delete" aria-label="delete" onclick="this.parentElement.parentElement.remove()"></button>
                        </div>
                        <div class="message-body">
                            {{ notification.message }}
                        </div>
                    </article>
                {% endfor %}
        {% endif %}
        <div id="notifs_area"></div>
        {% block body %}
        {% endblock body %}
    </div>
    {% endblock body_wrapper%}
</body>
</html>