distro-tools/apollo/server/templates/layout.jinja
2023-03-06 05:49:48 +01:00

147 lines
4.5 KiB
Django/Jinja

<!DOCTYPE html>
{% set theme = "" %}
{% if "color" in request.cookies %}
{% if request.cookies["color"] == "light" %}
{% set theme = "light" %}
{% elif request.cookies["color"] == "dark" %}
{% set theme = "dark" %}
{% endif %}
{% endif %}
<html lang="en" class="{{theme}}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Peridot Apollo{% endblock %}</title>
<link rel="stylesheet" href="/static/static.css">
<script src="/static/static.js"></script>
<style>
.bx--main {
padding: 2rem 1rem;
}
</style>
<style>
.apollo-outer {
margin-top: 3rem;
padding: 0;
}
.apollo-outer bx-inline-notification {
margin: 0;
color: var(--cds-text-01);
--cds-inverse-01: var(--cds-text-01);
background: var(--cds-button-separator);
}
.apollo-outer bx-inline-notification:not(.top-notification) {
width: 100%;
max-width: 100% !important;
}
.apollo-outer bx-inline-notification.top-notification {
background: var(--cds-field-01);
border-left: 0;
border-bottom: 1px solid var(--apollo-notification-border-color, var(--apollo-notification-text-color));
max-width: 100%;
margin-top: 4rem;
color: var(--apollo-notification-text-color);
}
.apollo-outer bx-inline-notification~#apollo-notification-wrapper>bx-inline-notification {
margin-top: 2rem;
}
#apollo-notification-wrapper {
margin: 0 3.5rem;
}
</style>
{% if notification %}
{% if notification.get("kind") == "error" %}
<style>
:root {
--apollo-notification-text-color: var(--cds-danger-02);
}
</style>
{% elif notification.get("kind") == "success" %}
<style>
:root {
--apollo-notification-border-color: var(--cds-inverse-support-02);
}
</style>
{% elif notification.get("kind") == "warning" %}
<style>
:root {
--apollo-notification-text-color: var(--cds-inverse-support-03);
}
</style>
{% else %}
<style>
:root {
--apollo-notification-text-color: #ffffff;
}
</style>
{% endif %}
{% endif %}
{% block head %}{% endblock %}
</head>
<body class="bx--body">
<bx-header aria-label="Apollo">
<bx-header-menu-button button-label-active="Close menu" button-label-inactive="Open menu"></bx-header-menu-button>
<bx-header-name href="/" prefix="Peridot">[Apollo]</bx-header-name>
<bx-header-nav menu-bar-label="Peridot [Apollo]">
<bx-header-nav-item href="/">Advisories</bx-header-nav-item>
{% if request.state.settings.serve_rh_advisories %}
<bx-header-nav-item href="/red_hat/advisories/">Red Hat Advisories</bx-header-nav-item>
{% endif %}
<bx-header-nav-item href="/statistics/">Statistics</bx-header-nav-item>
{% if request.state.settings.is_admin %}
<bx-header-nav-item href="/admin/">Admin</bx-header-nav-item>
{% endif %}
</bx-header-nav>
<bx-header-nav style="margin-left:auto;padding-left:0">
<bx-header-nav-item href="/_/set_color?color=light" id="color-switcher-light">
{% include "light_icon.jinja" %}
</bx-header-nav-item>
<bx-header-nav-item href="/_/set_color?color=dark" id="color-switcher-dark">
{% include "light_icon.jinja" %}
</bx-header-nav-item>
{% if request.session.get("user.name") %}
<bx-header-nav-item href="/profile/">{{ request.session.get("user.name") }}</bx-header-nav-item>
<bx-header-nav-item href="/logout/">Logout</bx-header-nav-item>
{% else %}
<bx-header-nav-item href="/login/">Login</bx-header-nav-item>
{% endif %}
</bx-header-nav>
</bx-header>
<div class="apollo-outer">
{% block outer_content %}{% endblock %}
{% if title %}
<bx-inline-notification kind="{% if kind %}{{ kind }}{% else %}info{% endif %}" title="{{ title }}"
subtitle="{{ subtitle }}" hide-close-button>
</bx-inline-notification>
{% endif %}
{% if notification %}
<div id="apollo-notification-wrapper">
<bx-inline-notification class="top-notification" kind="{{ notification.get('kind', 'none') }}"
title="{{ notification['title'] }}" subtitle="{{ notification['subtitle'] }}"
hide-close-button></bx-inline-notification>
</div>
{% endif %}
</div>
<main class="bx--main bx--container">
{% block content %}{% endblock %}
</main>
</body>
</html>