HaitiWater/code/haitiwater/templates/base.html

{% load staticfiles %}
{% load compress %}
{% load group_filter %}

<!doctype html>
<html class="fixed">

	<head>
		<!-- Basic -->
		<meta charset="UTF-8">
		<title>HaïtiWater {{ project_version }}</title>
		<meta name="keywords" content="Haïti water management system" />
		<meta name="description" content="Système de gestion d'eau en Haïti">

        <!-- Favicon -->
        <link rel="shortcut icon" type="image/png" href="{% static "images/favicon.ico" %}"/>

		<!-- Mobile Metas -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

		<!-- Web Fonts  -->
        <link rel="stylesheet" href="{% static "vendor/fonts-google/open-sans.css" %}"/>
		<!-- Vendor CSS -->
		<link rel="stylesheet" href="{% static "vendor/fontawesome/css/all.min.css" %}"/>
		<link rel="stylesheet" href="{% static "vendor/intro/intro.min.css" %}"/>

        <!-- Uncompessed (minified) Vendor JS -->
        <script src="{% static "vendor/intro/intro.min.js" %}"></script>

        {% compress css %}
            {# Local Vendors #}
            <link rel="stylesheet" href="{% static "vendor/bootstrap/css/bootstrap.css" %}"/>
            <link rel="stylesheet" href="{% static "vendor/magnific-popup/magnific-popup.css" %}"/>
            <link rel="stylesheet" href="{% static "vendor/pnotify/pnotify.custom.css" %}"/>
            <link rel="stylesheet" href="{% static "vendor/bootstrap-datepicker/css/datepicker3.css" %}"/>

            {# Specific Page Vendor CSS #}
            <link rel="stylesheet" href="{% static "vendor/bootstrap-multiselect/bootstrap-multiselect.css" %}"/>
            <link rel="stylesheet" href="{% static "vendor/morris/morris.css" %}"/>

            {# Theme CSS #}
            <link rel="stylesheet" href="{% static "stylesheets/theme.css" %}"/>
            <link rel="stylesheet" href="{% static "stylesheets/theme-extension.css" %}"/>
            <link rel="stylesheet" href="{% static "stylesheets/theme-special-cases.css" %}"/>

            {# Skin CSS #}
            <link rel="stylesheet" href="{% static "stylesheets/skins/default.css" %}"/>
        {% endcompress %}

        <!-- Vendors JS -->
        {% compress js %}
            <script src="{% static "vendor/jquery/jquery.js" %}"></script>
            <script src="{% static "vendor/nanoscroller/nanoscroller.js" %}"></script>
            <script src="{% static "vendor/bootstrap/js/bootstrap.js" %}"></script>
            <script src="{% static "vendor/magnific-popup/magnific-popup.js" %}"></script>
            <script src="{% static "vendor/modernizr/modernizr.js"%}"></script>
            <script src="{% static "vendor/pnotify/pnotify.custom.js"%}"></script>
            <script src="{% static "vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"%}"></script>

            {# Theme Base, Components and Settings #}
            <script src="{% static "javascripts/theme.js" %}"></script>

            {# Theme Custom #}
            <script src="{% static "javascripts/theme.custom.js" %}"></script>

            {# Theme Initialization Files #}
            <script src="{% static "javascripts/theme.init.js" %}"></script>

            {# Scripts often needed, requested in main template for preload #}
            <script src="{% static "javascripts/tables/genericTableHandler.js" %}"></script>
            <script src="{% static "javascripts/tables/genericModalHandler.js" %}"></script>

            {# Service worker installation #}
            <script src="{% static "javascripts/sw.install.js" %}"></script>
        {% endcompress %}

        {% block page_import %}
            {# Imports from extending pages #}
        {% endblock %}
	</head>

	<body>
		<section class="body">

			<!-- Header Section -->
			<header class="header">

                <!-- Logo -->
				<div class="logo-container">
					<a href="/accueil/" class="logo">
						<img src="{% static "images/logo.png" %}" height="35" alt="{{ project_name }}" />
					</a>
					<div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
						<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
					</div>
				</div>

				<div class="header-right">

                    <!-- Notification -->
					{% if user.is_authenticated %}
                        <ul class="notifications">
                            <li>
                                <a id="notification-parent" href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
                                    <i class="fa fa-bell"></i>
                                    <span id="alert-badge" class="badge">?</span>
                                </a>
                                <div class="dropdown-menu notification-menu">
                                    <div class="notification-title">
                                        <span class="pull-right label label-default" id="classic-badge">?</span>
                                        Notifications
                                    </div>
                                    <div class="content">
                                        <ul id="notification-content"></ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    {% endif %}

                    <span class="separator"></span>

                    <!-- User top-right display-->
                    <div id="userbox" class="userbox">
                        {% if request.path != '/offline/' and user.is_authenticated %}
                            <a href="#" data-toggle="dropdown">
                                <div class="profile-info">
                                    <span class="name">{{ user.get_username }}</span>
                                    <span class="role">{{ user|get_group }}</span>
                                </div>
                                <i class="fa custom-caret"></i>
                            </a>
                            <div class="dropdown-menu">
                                <ul class="list-unstyled">
                                    <li class="divider"></li>
                                    <li>
                                        <a role="menuitem" tabindex="-1" href="/profil/editer/"><i class="fa fa-user"></i>Mon profil</a>
                                    </li>
                                    <li>
                                        <a role="menuitem" tabindex="-1" href="{% url 'logout' %}"><i class="fa fa-power-off"></i>Déconnexion</a>
                                    </li>
                                </ul>
                            </div>
                        {% else %}
                            <span><a href="{% url 'login'%}?next={{request.path}}">Se connecter</a></span>
                        {% endif %}
                    </div>
				</div>
			</header>
			<!-- end: Header -->

			<div class="inner-wrapper">
				<!-- Navigation menu (left) -->
				<aside id="sidebar-left" class="sidebar-left">
					<div class="sidebar-header">
						<div class="sidebar-title">
							Navigation
						</div>
						<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
							<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
							<i class="fa fa-arrow-left" aria-label="Toggle sidebar"></i>
						</div>
					</div>

                    <!-- Menu Items-->
					{% include "components/main_menu.html" %}
				</aside>
				<!-- end: Navigation menu (left) -->

				<section id="page-content" role="main" class="content-body">
					<header class="page-header">
                        <div class="row">
                            <div class="col-sm-11">
						        <h2>{% block page_name %}{% endblock %}</h2>
                            </div>
                            <div class="col-sm-1">
                                <i id="quick-help" class="fas fa-info-circle fa-2x clickable" data-toggle="tooltip" data-placement="left" title="Aide rapide" onclick="startPageTour();"></i>
                            </div>
                        </div>
					</header>
                    <!-- Page content -->
                    {% block page_content %}{% endblock %}
                    <!-- end: Page content -->
				</section>
			</div>

		</section>
	</body>
</html>