view sat_templates/templates/bulma/base/base.html @ 289:f1a39607d6a5

bulma (base/base.html): `full_screen_body` parameter + body_wrapper: - if `full_screen_body` is set in template, the `body--fullscreen` class will be added to `<body>` element. It will then be a flexbox container (in columns), and displayed on the whole viewport. - new `body_wrapper` block, if a page needs to replace the `#body` container.
author Goffi <goffi@goffi.org>
date Mon, 28 Sep 2020 17:25:26 +0200
parents cf3fcbc797bc
children 1de599c5a68f
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 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>