From e63579e1ef8ab6461daa3bcd546e72bebb13af5d Mon Sep 17 00:00:00 2001 From: Johannes Schriewer Date: Sun, 21 Mar 2021 02:57:06 +0100 Subject: [PATCH] Fix some display issues and make the buttons a popout to be workable on touch devices like the ipad --- inventory/static/inventory/css/cell.css | 51 +++++++++++++++---- inventory/static/inventory/css/main.css | 1 - inventory/templates/base.html | 5 ++ inventory/templates/inventory/box-detail.html | 47 +++++++++++++++++ inventory/templates/inventory/cell.html | 17 +++---- 5 files changed, 101 insertions(+), 20 deletions(-) diff --git a/inventory/static/inventory/css/cell.css b/inventory/static/inventory/css/cell.css index dc7745f..7464327 100644 --- a/inventory/static/inventory/css/cell.css +++ b/inventory/static/inventory/css/cell.css @@ -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 { diff --git a/inventory/static/inventory/css/main.css b/inventory/static/inventory/css/main.css index 6d7aa74..e3169fc 100644 --- a/inventory/static/inventory/css/main.css +++ b/inventory/static/inventory/css/main.css @@ -76,7 +76,6 @@ nav button { nav .icon-only-button { border: none; background-color: transparent; - } h1 { diff --git a/inventory/templates/base.html b/inventory/templates/base.html index 6c48e1a..65c85ee 100644 --- a/inventory/templates/base.html +++ b/inventory/templates/base.html @@ -3,6 +3,7 @@ + {% block title %}{% endblock %} {% block head %}{% endblock %} @@ -34,5 +35,9 @@ {% block content %} {% endblock %} + \ No newline at end of file diff --git a/inventory/templates/inventory/box-detail.html b/inventory/templates/inventory/box-detail.html index 36eb34a..67976c8 100644 --- a/inventory/templates/inventory/box-detail.html +++ b/inventory/templates/inventory/box-detail.html @@ -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 %} \ No newline at end of file diff --git a/inventory/templates/inventory/cell.html b/inventory/templates/inventory/cell.html index 611a6a2..80730b6 100644 --- a/inventory/templates/inventory/cell.html +++ b/inventory/templates/inventory/cell.html @@ -6,16 +6,13 @@ {% if item.metadata.package %}
{{ item.metadata.package }}
{% endif %} - {% if item.documentation.all %} - - {{ item.name | linebreaksbr }} - - {% else %} -
- {{ item.name | linebreaksbr }} -
- {% endif %} + + {{ item.name | linebreaksbr }} +
+ {% if item.documentation.all %} + + {% endif %} {% if user.is_staff %} {% endif %} @@ -34,7 +31,7 @@ {% else %}
{% if user.is_staff %} -
+ {% endif %}
{% endif %}