svthalia/concrexit

View on GitHub
website/thaliawebsite/templates/base.html

Summary

Maintainability
Test Coverage
{% load django_bootstrap5 i18n static menu sass_tags pick_header_image %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>{% block title %}{% trans "Study Association Thalia" %}{% endblock %}</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    {% if lustrumstyling %}
        <meta name="theme-color" content="#DAB34A"/>
    {% else %}
        <meta name="theme-color" content="#E62272"/>
    {% endif %}
    {% if debug %}
        <link rel="icon" href="{% static "img/browser/icon-debug.png" %}">
    {% else %}
        <link rel="icon" href="{% static "img/browser/icon.png" %}">
    {% endif %}

    <link rel="apple-touch-icon" href="{% static "img/browser/icon.png" %}">
    <meta name="msapplication-square70x70logo" content="{% static "img/browser/icon-smalltile.png" %}">
    <meta name="msapplication-square150x150logo" content="{% static "img/browser/icon-mediumtile.png" %}">
    <meta name="msapplication-wide310x150logo" content="{% static "img/browser/icon-widetile.png" %}">
    <meta name="msapplication-square310x310logo" content="{% static "img/browser/icon-largetile.png" %}">

    <meta property="og:image" content="{% if request.is_secure %}https://{% else %}http://{% endif %}{{ request.get_host }}{% static "img/browser/icon-largetile.png" %}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="{% block opengraph_title %}{% trans 'Study Association Thalia' %}{% endblock %}"/>
    {% block opengraph %}{% endblock %}
    {% block css_head %}
        <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet" type="text/css">
        <link href="{% sass_src "css/main.scss" %}" rel="stylesheet" type="text/css">
        {% if lustrumstyling %}
            <style>
            :root {
                --primary: #dab34a;
                --primary-hover: #f4d974;
                --background-color: #111111;
                --background-shade: #444444;
                --background-shade-light: #212121;
                --navbar-background-color: #111111;
                --card-background: #212121;
                --card-background-contrast: #ffffff;
                --card-background-hover: #444444;
                --card-background-hover-contrast: #ffffff;
                --list-background: #212121;
                --list-background-contrast: #ffffff;
                --list-background-hover: #444444;
                --list-background-hover-contrast: #ffffff;
                --banner-background: #444444;
                --form-background: #111111;
                --form-background-disabled: #212121;
                --form-border: #ffffff;
                --form-text: #dddddd;
                --title-color: #ffffff;
                --sub-title-color: #f7f7f7;
                --text-color: #dddddd;
                --nav-link-color: #ffffff;
                --footer-text-color: #ffffff;
                --footer-text-color-hover: #f7f7f7;
                --secondary: #dddddd;
                --secondary-hover: #f7f7f7;
                --secondary-contrast:#111111
            }
            body, .navbar {
                background: radial-gradient(circle, rgba(51,51,51,1) 0%, rgba(0,0,0,1) 80%);
            }
            </style>
        {% endif %}
    {% endblock %}

    {% block js_head %}{% endblock %}
    <!-- served by: {{ SOURCE_COMMIT }} -->
</head>
<body class="{% block body_class %}{% endblock %}">

<section id="announcements-alerts">
    {% include "announcements/announcement.html" with announcements=announcements %}
    {% for announcement in persistent_announcements %}
        <div class="announcement">
            {{ announcement.rich_text | safe }}
        </div>
    {% endfor %}
</section>

<div id="accentbar"></div>

<nav class="navbar navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand" href="{% url 'index' %}">
            <picture>
                {% if lustrumstyling %}
                    <source srcset="{% static 'img/lustrum-logo.svg' %}">
                    <img
                        src="{% static 'img/lustrum-logo.svg' %}"
                        id="logo"
                        alt="{% trans 'Study Association Thalia' %}"
                        height="220px"
                    >
                {% else %}
                    <source srcset="{% static 'img/logo-dark.svg' %}" media="(prefers-color-scheme: dark)">
                    <source srcset="{% static 'img/logo.svg' %}" media="(prefers-color-scheme: light)">
                    <img
                        src="{% static 'img/logo.svg' %}"
                        id="logo"
                        alt="{% trans 'Study Association Thalia' %}"
                        height="220px"
                    >
                {% endif %}
            </picture>
        </a>
        <div class="flex-grow-1"></div>
        {% render_user_menu %}
        <button class="navbar-toggler order-1 justify-content-end"
                type="button" data-bs-toggle="collapse" id="navbarCollapseButton"
                data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                aria-controls="navbarCollapse" aria-expanded="false"
                aria-label="Toggle navigation"><i class="fa fa-bars"></i>
        </button>
        <div
            class="collapse navbar-collapse justify-content-end pe-lg-4 order-lg-0 order-2"
            id="navbarCollapse" aria-labelledby="navbarCollapseButton">
            {% render_main_menu %}
        </div>
    </div>
    </div>
</nav>

<header id="page-header">
    {% block header_image_container %}
        <img srcset="{% block header_image_srcset %}{% pick_header_image %}{% endblock header_image_srcset %}" class="image"/>
    {% endblock header_image_container %}
</header>

{% block pre-body %}{% endblock pre-body %}

<div id="page-content" class="clearfix">
    {% block body %}{% endblock body %}
</div>

{% block post-body %}{% endblock post-body %}

<footer>
    <div
        class="container d-flex justify-content-md-between align-items-center flex-md-row flex-column">
        <div class="copyright">
            <strong>Copyright {% now "Y" %} {% trans 'Study Association Thalia' %}</strong>
            <span class="divider">&#9679;</span>
            <a href="{% url 'singlepages:privacy-policy' %}">{% trans "privacy policy"|capfirst %}</a>
            <span class="divider">&#9679;</span>
            <a href="{% url 'singlepages:responsible-disclosure' %}">{% trans "responsible disclosure policy"|capfirst %}</a>
        </div>
        <div class="social float-end">
            <a target="_blank" rel="noopener" href="https://www.facebook.com/svThalia" title="Facebook page for Thalia">
                <i aria-hidden="true" class="fab fa-facebook"></i>
            </a>
            <a target="_blank" rel="noopener" href="https://twitter.com/svThalia" title="Twitter account for Thalia">
                <i aria-hidden="true" class="fab fa-twitter"></i>
            </a>
            <a target="_blank" rel="noopener" href="https://www.instagram.com/thalia_nijmegen/" title="Instagram page for Thalia">
                <i aria-hidden="true" class="fab fa-instagram"></i>
            </a>
            <a target="_blank" rel="noopener" href="https://www.linkedin.com/company/study-association-thalia" title="LinkedIn page for Thalia">
                <i aria-hidden="true" class="fab fa-linkedin"></i>
            </a>
            <a target="_blank" rel="noopener" href="https://github.com/svthalia/" title="GitHub page for Thalia">
                <i aria-hidden="true" class="fab fa-github"></i>
            </a>
            <a target="_blank" rel="noopener" href="https://ru.nxus.nl/student/group/0b242b79-01a4-4502-a582-8a0327676a2b" title="Career Central page for Thalia">
                <i aria-hidden="true" class="fas fa-graduation-cap"></i>
            </a>
        </div>
    </div>
</footer>

{% block js_body %}
    <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
    <script type="text/javascript" src="{% static "js/bootstrap.bundle.min.js" %}"></script>
    <script type="text/javascript" src="{% static "js/jquery.min.js" %}"></script>
    <script type="text/javascript" src="{% static "js/js.cookie.min.js" %}"></script>
    <script type="text/javascript" src="{% static "announcements/js/announcements.js" %}"></script>
    <script type="text/javascript" src="{% static "js/loading-animation.js" %}"></script>
{% endblock %}
</body>
</html>