dunkelstern/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix some display issues and make the buttons a popout to be workable on touch devices like the ipad

Browse source
This commit is contained in:
Johannes Schriewer 2021-03-21 02:57:06 +01:00
parent a8c8ca183d
commit e63579e1ef
5 changed files with 101 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
inventory/static/inventory/css/cell.css
View file

@ -22,7 +22,7 @@ td.disabled {
right: 0;
top: 0;
bottom: 0;
min-width: 100px;
min-width: 60px;
min-height: 75px;
}
@ -34,23 +34,28 @@ td.disabled {
right: 0;
top: 0;
bottom: 0;
min-width: 100px;
min-width: 60px;
min-height: 75px;
}
.cell {
flex-grow: 1;
display: inline-block;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
.cell:nth-child(2n) {
background-color: #f8f8f8;
}
.title {
display: inline;
.cell .title {
position: absolute;
left: 0;
right: 0;
top: 20px;
bottom: 5px;
}
.cell .package {
@ -94,16 +99,44 @@ td.disabled {
text-decoration: none;
}
.missing-link {
.cell .icon {
margin: 10px;
width: 50px;
height: 50px;
}
.cell a.missing-link {
color: #c00000;
}
.cell-buttons {
visibility: hidden;
position: absolute;
display: block;
clip: unset;
background-color: #292981;
color: #ffffff;
width: 240px;
height: 80px;
z-index: 1000;
top: 100%;
left: 0;
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
}
.cell:hover .cell-buttons {
visibility: visible;
.cell-buttons .icon {
filter: invert();
}
.hilight {
color: #ffffff !important;
background-color: #292981 !important;
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
z-index: 900;
}
.hilight a {
color: #ffffff !important;
}
.dock-top {

1
inventory/static/inventory/css/main.css
View file

@ -76,7 +76,6 @@ nav button {
nav .icon-only-button {
border: none;
background-color: transparent;
}
h1 {

5
inventory/templates/base.html
View file

@ -3,6 +3,7 @@
<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 %}
@ -34,5 +35,9 @@
{% block content %}
{% endblock %}
</main>
<script>
{% block site_scripts %}
{% endblock %}
</script>
</body>
</html>

47
inventory/templates/inventory/box-detail.html
View file

@ -21,3 +21,50 @@
{% include 'inventory/set_index.html' with item=object is_index=is_index %}
{% endif %}
{% endblock %}
{% block site_scripts %}
// old Javascript so it runs on ipad 3 / iOS 9
function hidePopovers() {
var cells = document.getElementsByClassName('cell');
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.classList.remove('hilight');
cell.parentNode.classList.remove('hilight');
var buttons = cell.getElementsByClassName('cell-buttons')[0];
buttons.style.visibility = 'hidden';
}
}
function toggleButtons(event) {
var cell = event.currentTarget;
var buttons = cell.getElementsByClassName('cell-buttons')[0];
if (buttons === undefined){
buttons = cell.parentNode.getElementsByClassName('cell-buttons')[0];
event.preventDefault();
event.stopPropagation();
} else {
event.stopPropagation();
}
if (buttons.style.visibility === 'visible') {
hidePopovers();
cell.parentNode.classList.remove('hilight');
} else {
hidePopovers();
buttons.style.visibility = 'visible';
cell.parentNode.classList.add('hilight');
}
}
(function() {
var cells = document.getElementsByClassName('cell');
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
var link = cell.getElementsByClassName('title')[0];
if (link !== undefined) {
link.addEventListener('click', toggleButtons);
} else {
cell.addEventListener('click', toggleButtons);
}
}
})();
{% endblock %}

17
inventory/templates/inventory/cell.html
View file

@ -6,16 +6,13 @@
{% if item.metadata.package %}
<div class="package">{{ item.metadata.package }}</div>
{% endif %}
{% if item.documentation.all %}
<a class="title" href="{{ item.documentation.all.0.file.url }}" {% if item.description %}title="{{ item.description }}{% if item.form_factor %}, {{ item.form_factor }}{% endif %}"{% endif %}>
{{ item.name | linebreaksbr }}
</a>
{% else %}
<div class="title missing-link" title="{{ item.description }}{% if item.form_factor %}, {{ item.form_factor }}{% endif %}">
{{ item.name | linebreaksbr }}
</div>
{% endif %}
<a href="#" class="title {% if not item.documentation.all %}missing-link{% endif %}" title="{{ item.description }}{% if item.form_factor %}, {{ item.form_factor }}{% endif %}">
{{ item.name | linebreaksbr }}
</a>
<div class="cell-buttons">
{% if item.documentation.all %}
<a class="datasheet" href="{{ item.documentation.all.0.file.url }}"><img class="icon" src="{% static "inventory/img/datasheet.svg" %}"></a>
{% endif %}
{% if user.is_staff %}
<a class="edit" href="{% url "admin:inventory_item_change" object_id=item.pk %}"><img class="icon" src="{% static "inventory/img/edit.svg" %}"></a>
{% endif %}
@ -34,7 +31,7 @@
{% else %}
<div class="cell-buttons">
{% if user.is_staff %}
<a class="title missing" href="{% url "admin:inventory_item_add" %}?index={{ item.index }}&container={{ item.container_id }}"><br><img class="icon" src="{% static "inventory/img/add.svg" %}"></a>
<a class="edit" href="{% url "admin:inventory_item_add" %}?index={{ item.index }}&container={{ item.container_id }}"><img class="icon" src="{% static "inventory/img/add.svg" %}"></a>
{% endif %}
</div>
{% endif %}