116 lines
3.3 KiB
HTML

{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{% static 'bars/'|add:settings.page_theme|add:'/favicon.ico' %}" />
{% block head_extensions %}{% endblock %}
<style>
{% include 'themes/'|add:settings.page_theme|add:'/base.css' %}
</style>
</head>
<body lang="en" dir="ltr">
{% block modal %}{% endblock %}
<form class="titlebar container" action="{% url "search" %}">
<a class="page-logo" href="/"><img src="{{ settings.page_image.url }}" alt="Logo" title="{{ title }}"></a>
<span class="title_hide">{{ title }}</span>
<input type="text" placeholder="{% trans "Search..." %}" name="q">
</form>
{% with bar=menubar %}{% include 'themes/'|add:settings.page_theme|add:'/menubar.html' %}{% endwith %}
{% include 'themes/'|add:settings.page_theme|add:'/navigationbar.html' %}
{% with bar=actionbar abar=True %}{% include 'themes/'|add:settings.page_theme|add:'/menubar.html' %}{% endwith %}
<div class="content">
{% if messages %}
<div id="flash">
{% for message in messages %}
{% if message.tags == "success" %}
<p class="flash flash-hint">{{ message|safe }}</p>
{% else %}
{% if message.tags == "info" %}
<p class="flash flash-info">{{ message|safe }}</p>
{% else %}
<p class="flash flash-error">{{ message|safe }}</p>
{% endif %}
{% endif %}
{% endfor %}
</div>
{% endif %}
<div class="app-content">
{% block content %}{% endblock %}
</div>
<div class="bottomspace"></div>
{% with bar=bottombar bottom=True %}{% include 'themes/'|add:settings.page_theme|add:'/menubar.html' %}{% endwith %}
</div>
{% if messages %}
<div class="hidden fixed" id="fixed" onclick="myHideFunction()">
<div id="flash container">
{% for message in messages %}
{% if message.tags == "success" %}
<p class="flash flash-hint">{{ message|safe }}</p>
{% else %}
{% if message.tags == "info" %}
<p class="flash flash-info">{{ message|safe }}</p>
{% else %}
<p class="flash flash-error">{{ message|safe }}</p>
{% endif %}
{% endif %}
{% endfor %}
</div>
<div class="close-flash">X</div>
</div>
{% endif %}
<script>
/*
* Sticky Elements
*/
window.onscroll = function() {myScrollFunction()};
// Sticky Actionbar
var header = document.getElementById("actionbar");
var sticky = header.offsetTop; // Get the offset position of the actionbar
// Flash
var flash = document.getElementById("flash");
var fixed_ = document.getElementById("fixed");
var flash_pos = flash.offsetTop;
var enabled = true;
function myScrollFunction() {
// Sticky Actionbar
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
// Flash
if (window.pageYOffset >= flash_pos && enabled){
fixed_.classList.remove("hidden");
} else {
fixed_.classList.add("hidden");
enabled = false;
}
}
function myHideFunction() {
fixed.classList.add("hidden");
enabled = false;
}
</script>
</body>
</html>