ScoDoc/app/templates/sco_page.j2

{%- extends 'babase.j2' -%}
{# -*- Base des pages ordinaires, dans départements -*- #}

{% block styles %}
{{super()}}
<link type="text/css" rel="stylesheet"
    href="{{scu.STATIC_DIR}}/libjs/jquery-ui-1.10.4.custom/css/smoothness/jquery-ui-1.10.4.custom.min.css" />
<link type="text/css" rel="stylesheet"
            href="{{scu.STATIC_DIR}}/libjs/timepicker-1.3.5/jquery.timepicker.min.css" />
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc.css">
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc97.css">
<link href="{{scu.STATIC_DIR}}/css/menu.css" rel="stylesheet" type="text/css" />
<link href="{{scu.STATIC_DIR}}/css/gt_table.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/qtip/jquery.qtip-3.0.3.min.css" />
{#
<link href="{{scu.STATIC_DIR}}/css/tooltip.css" rel="stylesheet" type="text/css" /> #}
<link rel="stylesheet" type="text/css" href="{{scu.STATIC_DIR}}/DataTables/datatables.min.css" />
{% endblock %}

{% block title %}
{% if title %}{{ title }} - ScoDoc{% else %}ScoDoc{% endif %}
{% endblock %}

{% block content %}
<!-- sco_page revamp -->
<div class="overlay" id="overlay" onclick="closeMobileMenu()"></div>
    <div class="hamburger-menu" id="hamburgerMenu">
        {% block hamburger_menu %}
            {% include "hamburger_menu.j2" %}
        {% endblock %}
    </div>
    <div class="scodoc-container">
        <div class="app-corner">
            <div class="hamburger">
                <div class="hamburger-icon" onclick="toggleMobileMenu()">☰</div>
                <div class="scodoc-index"><a class="sco-title" href="{{
                    url_for('scodoc.index', scodoc_dept=g.scodoc_dept) }}"
                    >ScoDoc</a>
                </div>
            </div>
            <div class="toggle-sidebar" onclick="toggleSidebar()">
                <img id="toggle-sidebar-img" src="{{scu.STATIC_DIR}}/icons/back.svg" width="12px" alt="toggle sidebar"/>
            </div>
        </div>
        <div class="formsemestre-page-header">
            {% include "flashed_messages.j2" %}
            {% if sco.formsemestre %}
                {% block formsemestre_header %}
                    {% include "formsemestre_header.j2" %}
                {% endblock %}
            {% endif %}
        </div>
        <div id="sidebar">
            {% include "sidebar.j2" %}
        </div>

        <div id="app-content">
            <div id="gtrcontent" class="gtrcontent">
                <div class="sco-app-content">
                    {% block app_content %}
                        {{ content | safe }}
                    {% endblock %}
                </div>
            </div>
        </div>
    </div>
<!-- sco_page -->
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/libjs/menu.js"></script>
<script src="{{scu.STATIC_DIR}}/libjs/bubble.js"></script>
<script src="{{scu.STATIC_DIR}}/js/scodoc.js"></script>
<script src="{{scu.STATIC_DIR}}/DataTables/datatables.min.js"></script>
<script>
    window.onload = function () {
        if (document.getElementById('gtrcontent')) {
            enableTooltips("gtrcontent");
        }
        if (document.getElementById('sidebar')) {
            enableTooltips("sidebar");
        }
    };
    const SCO_URL = "{{ url_for('scolar.index_html', scodoc_dept=g.scodoc_dept) }}";
    function toggleSidebar() {
        document.getElementById('sidebar').classList.toggle('collapsed');
        document.getElementById('app-content').classList.toggle('collapsed');
        document.getElementById('toggle-sidebar-img').classList.toggle('collapsed');
    }

    function toggleMobileMenu() {
        const menu = document.getElementById('hamburgerMenu');
        const overlay = document.getElementById('overlay');
        if (menu.style.display === 'none' || menu.style.display === '') {
            menu.style.display = 'flex';
            overlay.style.display = 'block';
        } else {
            menu.style.display = 'none';
            overlay.style.display = 'none';
        }
    }

    function closeMobileMenu() {
        document.getElementById('hamburgerMenu').style.display = 'none';
        document.getElementById('overlay').style.display = 'none';
    }

    // Ensure the hamburger menu and overlay are hidden initially
    document.getElementById('hamburgerMenu').style.display = 'none';
    document.getElementById('overlay').style.display = 'none';
</script>

{% endblock %}

{% macro render_field_errors(form, field_name) %}
    {% if form[field_name].errors %}
        <div>
            {% for error in form[field_name].errors %}
                <span class="wtf-field-error">{{ error }}</span>
            {% endfor %}
        </div>
    {% endif %}
{% endmacro %}