inventory/inventory/templates/base.html

80 lines
No EOL
2.9 KiB
HTML

{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" content="text/css" href="{% static 'inventory/css/main.css' %}">
{% block head %}{% endblock %}
</head>
<body>
<nav>
<h2>
{% block header_bar %}
{% endblock %}
</h2>
<div class="spacer">
</div>
<ul>
{% block header_icons %}
{% endblock %}
</ul>
<ul class="icon-nav">
<li>
<script>
function showSearch(e) {
const searchBox = document.getElementById("search-container");
if ((searchBox.style.display === '') || (searchBox.style.display === 'none')) {
searchBox.style.display = 'block';
searchBox.getElementsByTagName('input')[0].focus();
} else {
searchBox.style.display = 'none';
}
if (e) {
e.preventDefault();
}
}
</script>
<a href="{% url 'search' %}" onclick="showSearch(event)"><img class="icon" title="Search" src="{% static "inventory/img/search.svg" %}"></a>
<div id="search-container">
<form action="{% url 'search' %}" method="get">
<input name="q" id="search" type="text" placeholder="Search">
<button type="submit">Search</button>
</form>
</div>
</li>
<li>
<a href="{% url 'manufacturer-list' %}"><img class="icon" title="Manufacturers" src="{% static "inventory/img/manufacturer.svg" %}"></a>
</li>
<li>
<a href="{% url 'distributor-list' %}"><img class="icon" title="Distributors" src="{% static "inventory/img/distributor.svg" %}"></a>
</li>
<li>
<a href="{% url 'tag-list' %}"><img class="icon" title="Tags" src="{% static "inventory/img/tags.svg" %}"></a>
</li>
<li>
<a href="{% url 'index' %}"><img class="icon" title="Workshops" src="{% static "inventory/img/workshop.svg" %}"></a>
</li>
</ul>
{% if user.is_authenticated %}
<form method="POST" action="{% url "logout" %}">
{% csrf_token %}
<button><img class="icon" src="{% static "inventory/img/logout.svg" %}"> Logout</button>
</form>
{% endif %}
</nav>
<main>
{% block content %}
{% endblock %}
</main>
<script>
{% block site_scripts %}
{% endblock %}
</script>
</body>
</html>