From e6d68552a15125d741510185b9dfde1f0dab7164 Mon Sep 17 00:00:00 2001
From: Johannes Schriewer <hallo@dunkelstern.de>
Date: Sun, 5 Jan 2025 19:03:42 +0100
Subject: [PATCH] Switch from navlists to tables for listings

---
 .../templates/inventory/area_detail.html      | 52 ++++++++++++-------
 .../templates/inventory/workshop_detail.html  | 45 ++++++++++------
 .../templates/inventory/workshop_list.html    | 18 ++++---
 3 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/inventory/templates/inventory/area_detail.html b/inventory/templates/inventory/area_detail.html
index 1c6a5b2..02e6d0b 100644
--- a/inventory/templates/inventory/area_detail.html
+++ b/inventory/templates/inventory/area_detail.html
@@ -22,37 +22,51 @@
 
     {% if area.show_sub_area %}
         <h3>Areas</h3>
-        <ul class="nav-list">
-            {% for a in area.area_related.all %}
-                <li>
-                    <a href="{% url 'area-detail' a.id %}" title="{{ a.description }}">{{ a.name }}</a>
-                    {% if user.is_staff %}
-                        <a class="edit" href="{% url "admin:inventory_area_change" object_id=area.pk %}"><img class="icon" src="{% static "inventory/img/edit.svg" %}"></a>
-                    {% endif %}
-                </li>
-            {% empty %}
-                <li>No areas defined</li>
-            {% endfor %}
-        </ul>
 
+        <table class="list">
+            <tbody>
+            {% for a in area.area_related.all %}
+                <tr>
+                    <td>
+                        <a href="{% url 'area-detail' a.id %}" title="{{ a.description }}">{{ a.name }}</a>
+                    </td>
+                    <td>
+                    {% if user.is_staff %}
+                        <a class="edit" href="{% url "admin:inventory_area_change" object_id=a.pk %}"><img class="icon" src="{% static 'inventory/img/edit.svg' %}"></a>
+                    {% endif %}
+                    </td>
+                </tr>
+            {% empty %}
+                <tr><td>No areas defined</td></tr>
+            {% endfor %}
+            </tbody>
+        </table>
+    
         {% if user.is_staff %}
             <p><a href="{% url "admin:inventory_area_add" %}?container={{ area.id }}&index=0">Create new area...</a></p>
         {% endif %}
     {% endif %}
 
     <h3>Containers</h3>
-    <ul class="nav-list">
+
+    <table class="list">
+        <tbody>
         {% for box in area.box_related.all %}
-            <li>
-                <a href="{% url 'box-detail' box.id %}" title="{{ box.description }}">{{ box.name }} ({{ box.layout.name }})</a>
+            <tr>
+                <td>
+                    <a href="{% url 'box-detail' box.id %}" title="{{ box.description }}">{{ box.name }}</a>
+                </td>
+                <td>
                 {% if user.is_staff %}
-                    <a class="edit" href="{% url "admin:inventory_box_change" object_id=box.pk %}"><img class="icon" src="{% static "inventory/img/edit.svg" %}"></a>
+                    <a class="edit" href="{% url "admin:inventory_box_change" object_id=box.pk %}"><img class="icon" src="{% static 'inventory/img/edit.svg' %}"></a>
                 {% endif %}
-            </li>
+                </td>
+            </tr>
         {% empty %}
-            <li>No containers defined</li>
+            <tr><td>No containers defined</td></tr>
         {% endfor %}
-    </ul>
+        </tbody>
+    </table>
 
     {% if user.is_staff %}
         <p><a href="{% url "admin:inventory_box_add" %}?container={{ area.id }}&index=0">Create new container...</a></p>
diff --git a/inventory/templates/inventory/workshop_detail.html b/inventory/templates/inventory/workshop_detail.html
index 89905bc..7250d35 100644
--- a/inventory/templates/inventory/workshop_detail.html
+++ b/inventory/templates/inventory/workshop_detail.html
@@ -20,19 +20,25 @@
 
 {% block content %}
     <h3>Areas</h3>
-    <ul class="nav-list">
+
+    <table class="list">
+        <tbody>
         {% for area in workshop.area_related.all %}
-            <li>
-                <a href="{% url 'area-detail' area.id %}" title="{{ area.description }}">{{ area.name }}</a>
-                ({{ area.description }})
+            <tr>
+                <td>
+                    <a href="{% url 'area-detail' area.id %}" title="{{ area.description }}">{{ area.name }}</a>
+                </td>
+                <td>
                 {% if user.is_staff %}
-                    <a class="edit" href="{% url "admin:inventory_area_change" object_id=area.pk %}"><img class="icon" src="{% static "inventory/img/edit.svg" %}"></a>
+                    <a class="edit" href="{% url "admin:inventory_area_change" object_id=area.pk %}"><img class="icon" src="{% static 'inventory/img/edit.svg' %}"></a>
                 {% endif %}
-            </li>
+                </td>
+            </tr>
         {% empty %}
-            <li>No areas defined</li>
+            <tr><td>No areas defined</td></tr>
         {% endfor %}
-    </ul>
+        </tbody>
+    </table>
 
     {% if user.is_staff %}
         <p><a href="{% url "admin:inventory_area_add" %}?container={{ workshop.id }}&index=0">Create new area...</a></p>
@@ -40,20 +46,25 @@
 
     {% if workshop.show_boxes %}
         <h3>Containers</h3>
-        <ul class="nav-list">
+        <table class="list">
+            <tbody>
             {% for box in workshop.box_related.all %}
-                <li>
-                    <a href="{% url 'box-detail' box.id %}" title="{{ box.description }}">{{ box.name }} ({{ box.layout.name }})</a>
-                    ({{ box.description }})
+                <tr>
+                    <td>
+                        <a href="{% url 'box-detail' box.id %}" title="{{ box.description }}">{{ box.name }}</a>
+                    </td>
+                    <td>
                     {% if user.is_staff %}
-                        <a class="edit" href="{% url "admin:inventory_box_change" object_id=box.pk %}"><img class="icon" src="{% static "inventory/img/edit.svg" %}"></a>
+                        <a class="edit" href="{% url "admin:inventory_box_change" object_id=box.pk %}"><img class="icon" src="{% static 'inventory/img/edit.svg' %}"></a>
                     {% endif %}
-                </li>
+                    </td>
+                </tr>
             {% empty %}
-                <li>No containers defined</li>
+                <tr><td>No containers defined</td></tr>
             {% endfor %}
-        </ul>
-
+            </tbody>
+        </table>
+    
         {% if user.is_staff %}
             <p><a href="{% url "admin:inventory_box_add" %}?container={{ workshop.id }}&index=0">Create new container...</a></p>
         {% endif %}
diff --git a/inventory/templates/inventory/workshop_list.html b/inventory/templates/inventory/workshop_list.html
index 90b2f2c..1455cd6 100644
--- a/inventory/templates/inventory/workshop_list.html
+++ b/inventory/templates/inventory/workshop_list.html
@@ -8,16 +8,22 @@
 {% endblock %}
 
 {% block content %}
-    <ul class="nav-list">
+    <table class="list">
+        <tbody>
         {% for workshop in object_list %}
-            <li>
-                <a href="{% url 'workshop-detail' workshop.id %}" title="{{ workshop.description }}">{{ workshop.name }}</a>
+            <tr>
+                <td>
+                    <a href="{% url 'workshop-detail' workshop.id %}" title="{{ workshop.description }}">{{ workshop.name }}</a>
+                </td>
+                <td>
                 {% if user.is_staff %}
-                    <a class="edit" href="{% url "admin:inventory_workshop_change" object_id=workshop.pk %}"><img class="icon" src="{% static "inventory/img/edit.svg" %}"></a>
+                    <a class="edit" href="{% url "admin:inventory_workshop_change" object_id=workshop.pk %}"><img class="icon" src="{% static 'inventory/img/edit.svg' %}"></a>
                 {% endif %}
-            </li>
+                </td>
+            </tr>
         {% endfor %}
-    </ul>
+        </tbody>
+    </table>
 
     {% if user.is_staff %}
         <p><a href="{% url "admin:inventory_workshop_add" %}?layout=1">Create new workshop...</a></p>