Implement all container templates
This commit is contained in:
parent
652ba705c5
commit
71f62536c1
9 changed files with 399 additions and 0 deletions
|
@ -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;
|
||||
}
|
11
inventory/static/inventory/img/hatched.svg
Normal file
11
inventory/static/inventory/img/hatched.svg
Normal 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 |
|
@ -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 %}
|
|
@ -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 %}
|
|
@ -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 %}
|
|
@ -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 %}
|
|
@ -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 %}
|
|
@ -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 %}
|
|
@ -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 %}
|
Loading…
Reference in a new issue