From 4e3b7dff33b2e989c8cb1b7ba4e62949cc708dd2 Mon Sep 17 00:00:00 2001
From: candifloss <candifloss@candifloss.cc>
Date: Fri, 4 Apr 2025 11:20:56 +0530
Subject: [PATCH] Add: List table style

Add bootstrap css for table in /viewall/
---
 templates/viewList.html | 84 ++++++++++++++++++++++++++---------------
 1 file changed, 53 insertions(+), 31 deletions(-)
diff --git a/templates/viewList.html b/templates/viewList.html
index 26da1e6..4b774d4 100644
--- a/templates/viewList.html
+++ b/templates/viewList.html
@@ -6,41 +6,63 @@
     <title>View Inventory</title>
     {% include 'favicon.html' %}
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
+    <style>
+        /* Minimal custom CSS for table responsiveness */
+        .table-container {
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch;
+            margin-bottom: 1rem;
+        }
+        .action-buttons {
+            white-space: nowrap;
+        }
+    </style>
 </head>
-<body align="center">
+<body>
     {% include 'header.html' %}
-    <main class="container mt-5 pt-3">
-        <h2 class="mb-4">Item Inventory</h2>
-        <table class="">
-            <tr>
-                <!-- Table headers -->
-                {% for attrib in item_attributes %}
-                    <th>{{ attrib.display_name }}</th>
-                {% endfor %}
-                <th colspan="2">Actions</th>
-            </tr>
     
-            <!-- Table rows -->
-            {% for item in items %}
-            <tr>
-                {% for attrib in item_attributes %}
-                    <td>{{ item[attrib.attrib_name] }}</td>
-                {% endfor %}
-                <td>
-                    <form action="/update/{{ item[primary_attrib] }}" method="get">
-                        <button type="submit">Edit</button>
-                    </form>
-                </td>
-                <td>
-                    <form action="/delete/{{ item[primary_attrib] }}" method="get">
-                        <button type="submit">Delete</button>
-                    </form>
-                </td>
-            </tr>
-            {% endfor %}
-        </table>
+    <main class="container-fluid mt-5 pt-3 px-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2>Item Inventory</h2>
+        </div>
+        
+        <div class="table-container">
+            <table class="table table-striped table-hover table-bordered">
+                <thead class="table-light">
+                    <tr>
+                        {% for attrib in item_attributes %}
+                            <th>{{ attrib.display_name }}</th>
+                        {% endfor %}
+                        <th class="action-buttons">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for item in items %}
+                    <tr>
+                        {% for attrib in item_attributes %}
+                            <td>{{ item[attrib.attrib_name] }}</td>
+                        {% endfor %}
+                        <td class="action-buttons">
+                            <div class="d-flex gap-2">
+                                <a href="/update/{{ item[primary_attrib] }}" 
+                                   class="btn btn-sm btn-outline-primary">
+                                    Edit
+                                </a>
+                                <form action="/delete/{{ item[primary_attrib] }}" method="get" class="d-inline">
+                                    <button type="submit" 
+                                            class="btn btn-sm btn-outline-danger">
+                                        Delete
+                                    </button>
+                                </form>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </main>
-    <!-- Bootstrap JS (for dropdowns) -->
+
     <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
 </body>
 </html>
\ No newline at end of file
