Implement all container templates

This commit is contained in:
Johannes Schriewer 2020-12-23 01:47:00 +01:00
parent 652ba705c5
commit 71f62536c1
9 changed files with 399 additions and 0 deletions

View file

@ -2,6 +2,18 @@ tr {
height: 75px;
}
td.double-height {
height: 150px;
}
td.triple-height {
height: 225px;
}
td.disabled {
background-image: url('/static/inventory/img/hatched.svg');
}
.compartments {
display: flex;
flex-direction: row;
@ -14,6 +26,18 @@ tr {
min-height: 75px;
}
.compartments-vertical {
display: flex;
flex-direction: column;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
min-width: 100px;
min-height: 75px;
}
.cell {
flex-grow: 1;
display: inline-block;
@ -81,3 +105,7 @@ tr {
.cell:hover .cell-buttons {
visibility: visible;
}
.dock-top {
margin-top: -1px;
}

View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<style type="text/css">
line { stroke: #eee; stroke-width: 10px;}
</style>
<defs>
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#diagonalHatch)" />
</svg>

After

Width:  |  Height:  |  Size: 410 B

View file

@ -0,0 +1,38 @@
{% extends "inventory/box-detail.html" %}
{% load static %}
{% load admin_urls %}
{% block content %}
<table class="box">
<tbody>
<tr>
<td rowspan="2">
<div class="compartments-vertical">
{% for compartment in layouted.0.0 %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
<td class="triple-height" colspan="3">
<div class="compartments">
{% for compartment in layouted.0.1 %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
</tr>
<tr>
{% for item in layouted.1 %}
<td class="triple-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
{% endblock %}

View file

@ -0,0 +1,51 @@
{% extends "inventory/box-detail.html" %}
{% load static %}
{% load admin_urls %}
{% block content %}
<table class="box">
<tbody>
<tr>
{% for item in layouted.0 %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
<tr>
<td rowspan="2">
<div class="compartments-vertical">
{% for compartment in layouted.1.0 %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% for item in layouted.1|slice:"1:" %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
<tr>
{% for item in layouted.2 %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
{% endblock %}

View file

@ -0,0 +1,53 @@
{% extends "inventory/box-detail.html" %}
{% load static %}
{% load admin_urls %}
{% block content %}
<table class="box">
<tbody>
{% for line in layouted|slice:"0:9" %}
<tr>
{% for item in line %}
<td>
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<table class="box dock-top">
<tbody>
<tr>
{% for item in layouted.9 %}
<td>
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
<table class="box dock-top">
<tbody>
<tr>
{% for item in layouted.10 %}
<td>
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
{% endblock %}

View file

@ -0,0 +1,53 @@
{% extends "inventory/box-detail.html" %}
{% load static %}
{% load admin_urls %}
{% block content %}
<table class="box">
<tbody>
{% for line in layouted|slice:"0:3" %}
<tr>
{% for item in line %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<table class="box dock-top">
<tbody>
<tr>
{% for item in layouted.3 %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
<table class="box dock-top">
<tbody>
<tr>
{% for item in layouted.4 %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
{% endblock %}

View file

@ -0,0 +1,53 @@
{% extends "inventory/box-detail.html" %}
{% load static %}
{% load admin_urls %}
{% block content %}
<table class="box">
<tbody>
{% for line in layouted|slice:"0:6" %}
<tr>
{% for item in line %}
<td>
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<table class="box dock-top">
<tbody>
<tr>
{% for item in layouted.6 %}
<td>
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
<table class="box dock-top">
<tbody>
<tr>
{% for item in layouted.7 %}
<td>
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
{% endblock %}

View file

@ -0,0 +1,56 @@
{% extends "inventory/box-detail.html" %}
{% load static %}
{% load admin_urls %}
{% block content %}
<table class="box">
<tbody>
<tr>
{% for item in layouted.0 %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
<tr>
{% for item in layouted.1 %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
<tr>
{% for item in layouted.2|slice:"0:2" %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
<td colspan="2" class="disabled">
</td>
{% for item in layouted.2|slice:"2:5" %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
{% endblock %}

View file

@ -0,0 +1,56 @@
{% extends "inventory/box-detail.html" %}
{% load static %}
{% load admin_urls %}
{% block content %}
<table class="box">
<tbody>
<tr>
{% for item in layouted.0 %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
<tr>
{% for item in layouted.1 %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
<tr>
{% for item in layouted.2|slice:"0:1" %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
<td class="disabled">
</td>
{% for item in layouted.2|slice:"1:2" %}
<td class="double-height">
<div class="compartments">
{% for compartment in item %}
{% include "inventory/cell.html" with item=compartment %}
{% endfor %}
</div>
</td>
{% endfor %}
</tr>
</tbody>
</table>
{% endblock %}