shiftregister/shiftregister/core/templates/base.html

154 lines
4.8 KiB
HTML

{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>{% block title %}Help!{% endblock %} &ndash; Helfer*innen</title>
<link rel="icon" href="{% static 'tonkakt.svg' %}" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="{% static 'bulma.min.css' %}">
<link rel="stylesheet" href="{% static 'bulma-prefers-dark.min.css' %}">
<style>
@font-face {
font-family: "Maven Pro";
src: url("{% static 'MavenPro-VariableFont:wght.ttf' %}");
}
body {
font-family: "Maven Pro", sans-serif !important;
min-height: 100vh;
}
body > .section {
flex-grow: 1;
}
:root {
--background: #fff;
}
.description {
margin-bottom: 1em;
}
.message-incoming {
margin-right: 20%;
}
.message-outgoing {
margin-left: 20%;
}
.sticky-nav {
background-color: var(--background);
margin: 0 -0.75rem;
overflow-x: auto;
padding: 1em 0.75rem;
position: sticky;
top: 0;
z-index: 42;
}
.sticky-target {
display: block;
height: 0;
position: relative;
top: -3.5em;
width: 0;
}
@media screen and (min-width: 1024px) and (max-width: 1087px) {
.navbar-menu {
box-shadow: none;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background: #17181c;
}
}
</style>
{% block head %}{% endblock %}
</head>
<body class="is-flex is-flex-direction-column">
{% block everything %}
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item has-text-weight-bold" href="{% if user.is_authenticated %}{% url 'team:index' %}{% else %}{% url 'index' %}{% endif %}">Helfer*innen</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="main-nav">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="main-nav">
<div class="navbar-start">
{% for item in nav_items %}
<{% if item.link %}a{% else %}p{% endif %} class="navbar-item{% if item.class %} {{ item.class }}{% endif %}"{% if item.link %} href="{{ item.link }}"{% endif %}>
{{ item.text }}
</{% if item.link %}a{% else %}p{% endif %}>
{% endfor %}
</div>
<div class="navbar-end"></div>
</div>
</div>
</nav>
{% block body %}
<section class="section">
<div class="container">
{% include 'notifications.html' %}
{% block content %}{% endblock %}
</div>
</section>
{% endblock %}
<footer class="footer">
<div class="container is-flex is-flex-wrap-wrap is-justify-content-space-between">
{% block footer %}
<div class="content"><a href="https://git.as42.net/kontakt/shiftregister">shiftregister</a> by flo, Luca &amp; xAndy</div>
{% endblock %}
<div class="breadcrumb has-dot-separator is-flex-grow-1 is-right ml-5">
<ul>
{% for item in footer_nav_items %}
<li>
<{% if item.link %}a{% else %}p{% endif %}{% if item.class %} class="{{ item.class }}"{% endif %}{% if item.link %} href="{{ item.link }}"{% endif %}>
{{ item.text }}
</{% if item.link %}a{% else %}p{% endif %}>
</li>
{% endfor %}
</ul>
</div>
</div>
</footer>
<script>
document.querySelectorAll('.delete').forEach(btn => btn.addEventListener('click', event => event.target.parentElement.remove()));
document.querySelectorAll('.navbar-burger').forEach(el => el.addEventListener('click', () => {
if (el.dataset.target) {
el.classList.toggle('is-active');
document.getElementById(el.dataset.target).classList.toggle('is-active');
}
}));
function selectAndCopyText(element) {
var range = document.createRange();
range.selectNodeContents(element);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
navigator.clipboard.writeText(window.getSelection());
}
document.querySelectorAll('.select_all').forEach(e => {
e.addEventListener('touchstart', function(event) {
selectAndCopyText(event.target);
}, false);
e.addEventListener('click', function(event) {
selectAndCopyText(event.target);
}, false);
});
</script>
{% endblock %}
</body>
</html>