view sat_templates/templates/default/base/base.html @ 230:0e69b5843c2f

theme: bulma theme first draft: This theme uses the Bulma CSS framework, Brython to handle the menu on touch devices, and Sass to customize Bulma. CSS default fallbacks are disabled as Bulma uses its own naming conventions, and default fallbacks would lead to hard to debug conflicts. `common.js` has been slightly improved to handle custom classed in `tab_select` The theme is not complete yet, but it is functional.
author Goffi <goffi@goffi.org>
date Tue, 19 May 2020 00:02:34 +0200
parents 739c3e6999fa
children caa3767707fb
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 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}}</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>