Styling
This commit is contained in:
parent
6028682532
commit
444aeb37e6
13 changed files with 113 additions and 27 deletions
|
@ -1,5 +1,7 @@
|
||||||
body {
|
body, html {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.attribute-list {
|
table.attribute-list {
|
||||||
|
@ -50,6 +52,27 @@ table.box th {
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #292981;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav form {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav button {
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
background-color: #333381;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 8px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
@ -63,7 +86,21 @@ h1 .small {
|
||||||
h2 .small {
|
h2 .small {
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #808080;
|
}
|
||||||
|
|
||||||
|
nav h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav h2 .small {
|
||||||
|
color: #c0c0c0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .icon {
|
||||||
|
filter: invert();
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
@ -71,7 +108,7 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1025px) {
|
@media (min-width: 1025px) {
|
||||||
h1 {
|
h1, h2 {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -81,7 +118,7 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
h1 {
|
h1, h2 {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
1
inventory/static/inventory/img/logout.svg
Normal file
1
inventory/static/inventory/img/logout.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"/></svg>
|
After Width: | Height: | Size: 600 B |
|
@ -8,6 +8,19 @@
|
||||||
{% block head %}{% endblock %}
|
{% block head %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<nav>
|
||||||
|
<h2>
|
||||||
|
{% block header_bar %}
|
||||||
|
{% endblock %}
|
||||||
|
</h2>
|
||||||
|
{% 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>
|
<main>
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -3,8 +3,13 @@
|
||||||
|
|
||||||
{% block title %}{{ area.container.display_name }} - {{ area.name }}{% endblock %}
|
{% block title %}{{ area.container.display_name }} - {{ area.name }}{% endblock %}
|
||||||
|
|
||||||
|
{% block header_bar %}
|
||||||
|
<a href="{{ area.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>
|
||||||
|
{{ area.container.display_name }} - {{ area.name }}
|
||||||
|
<span class="small">{{ area.description}}</span>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h2><a href="{{ area.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>{{ area.container.display_name }} - {{ area.name }} <span class="small">{{ area.description}}</span></h2>
|
|
||||||
|
|
||||||
<h3>Areas</h3>
|
<h3>Areas</h3>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -2,8 +2,13 @@
|
||||||
|
|
||||||
{% block title %}{{ box.container.display_name }} - {{ box.name }}{% endblock %}
|
{% block title %}{{ box.container.display_name }} - {{ box.name }}{% endblock %}
|
||||||
|
|
||||||
|
{% block header_bar %}
|
||||||
|
<a href="{{ box.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>
|
||||||
|
{{ box.container.display_name }} - {{ box.name }}
|
||||||
|
<span class="small">{{ box.description}}</span>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h2>{{ box.container.display_name }} - {{ box.name }}</h2>
|
|
||||||
|
|
||||||
{% if box.box_related.exists %}
|
{% if box.box_related.exists %}
|
||||||
<h3>Boxes</h3>
|
<h3>Boxes</h3>
|
||||||
|
|
|
@ -8,9 +8,13 @@
|
||||||
|
|
||||||
{% block title %}{{ object.name }}{% endblock %}
|
{% block title %}{{ object.name }}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block header_bar %}
|
||||||
<h2><a href="{{ object.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>{{ object.name }} <span class="small">{{ object.description}}</span></h2>
|
<a href="{{ object.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>
|
||||||
|
{{ object.name }}
|
||||||
|
<span class="small">{{ object.description}}</span>{% endblock %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
<table class="box">
|
<table class="box">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -25,5 +29,4 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -8,9 +8,13 @@
|
||||||
|
|
||||||
{% block title %}{{ object.name }}{% endblock %}
|
{% block title %}{{ object.name }}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block header_bar %}
|
||||||
<h2><a href="{{ object.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>{{ object.name }} <span class="small">{{ object.description}}</span></h2>
|
<a href="{{ object.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>
|
||||||
|
{{ object.name }}
|
||||||
|
<span class="small">{{ object.description}}</span></h2>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
<table class="box">
|
<table class="box">
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for line in layouted %}
|
{% for line in layouted %}
|
||||||
|
@ -28,5 +32,4 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -8,9 +8,13 @@
|
||||||
|
|
||||||
{% block title %}{{ object.name }}{% endblock %}
|
{% block title %}{{ object.name }}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block header_bar %}
|
||||||
<h2><a href="{{ object.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>{{ object.name }} <span class="small">{{ object.description}}</span></h2>
|
<a href="{{ object.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>
|
||||||
|
{{ object.name }}
|
||||||
|
<span class="small">{{ object.description}}</span></h2>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
<table class="box">
|
<table class="box">
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for item in layouted.0 %}
|
{% for item in layouted.0 %}
|
||||||
|
@ -26,5 +30,4 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -8,9 +8,13 @@
|
||||||
|
|
||||||
{% block title %}{{ object.name }}{% endblock %}
|
{% block title %}{{ object.name }}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block header_bar %}
|
||||||
<h2><a href="{{ object.container_url}}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>{{ object.name }} <span class="small">{{ object.description}}</span></h2>
|
<a href="{{ object.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>
|
||||||
|
{{ object.name }}
|
||||||
|
<span class="small">{{ object.description}}</span></h2>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
{% for part in layouted %}
|
{% for part in layouted %}
|
||||||
<table class="box">
|
<table class="box">
|
||||||
<thead>
|
<thead>
|
||||||
|
@ -40,5 +44,4 @@
|
||||||
</table>
|
</table>
|
||||||
<br><br>
|
<br><br>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -4,9 +4,13 @@
|
||||||
|
|
||||||
{% block title %}{{ item.name }}{% endblock %}
|
{% block title %}{{ item.name }}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block header_bar %}
|
||||||
<h2><a href="{{ item.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>{{ item.name }}</h2>
|
<a href="{{ item.container_url }}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>
|
||||||
|
{{ item.name }}
|
||||||
|
<span class="small">{{ item.description}}</span></h2>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
<table class="attribute-list">
|
<table class="attribute-list">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -98,6 +102,4 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
|
@ -3,9 +3,13 @@
|
||||||
|
|
||||||
{% block title %}Workshop {{ workshop.name }}{% endblock %}
|
{% block title %}Workshop {{ workshop.name }}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block header_bar %}
|
||||||
<h2><a href="{% url "workshop-list" %}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>{{ workshop.name }} <span class="small">{{ workshop.description}}</span></h2>
|
<a href="{% url "workshop-list" %}"><img class="icon" src="{% static "inventory/img/back.svg" %}"></a>
|
||||||
|
{{ workshop.name }}
|
||||||
|
<span class="small">{{ workshop.description}}</span>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
<h3>Areas</h3>
|
<h3>Areas</h3>
|
||||||
<ul>
|
<ul>
|
||||||
{% for area in workshop.area_related.all %}
|
{% for area in workshop.area_related.all %}
|
||||||
|
|
|
@ -3,8 +3,11 @@
|
||||||
|
|
||||||
{% block title %}Workshops{% endblock %}
|
{% block title %}Workshops{% endblock %}
|
||||||
|
|
||||||
|
{% block header_bar %}
|
||||||
|
Inventory management - Workshops
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h2>Workshops</h2>
|
|
||||||
<ul>
|
<ul>
|
||||||
{% for workshop in object_list %}
|
{% for workshop in object_list %}
|
||||||
<li>
|
<li>
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block header_bar %}
|
||||||
|
Inventory management - Login
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
{% if form.errors %}
|
{% if form.errors %}
|
||||||
|
|
Loading…
Reference in a new issue