Add: List table style
Add bootstrap css for table in /viewall/
This commit is contained in:
parent
5c10cdcef5
commit
4e3b7dff33
@ -6,41 +6,63 @@
|
|||||||
<title>View Inventory</title>
|
<title>View Inventory</title>
|
||||||
{% include 'favicon.html' %}
|
{% include 'favicon.html' %}
|
||||||
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
|
<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>
|
</head>
|
||||||
<body align="center">
|
<body>
|
||||||
{% include 'header.html' %}
|
{% 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 -->
|
<main class="container-fluid mt-5 pt-3 px-4">
|
||||||
{% for item in items %}
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
<tr>
|
<h2>Item Inventory</h2>
|
||||||
{% for attrib in item_attributes %}
|
</div>
|
||||||
<td>{{ item[attrib.attrib_name] }}</td>
|
|
||||||
{% endfor %}
|
<div class="table-container">
|
||||||
<td>
|
<table class="table table-striped table-hover table-bordered">
|
||||||
<form action="/update/{{ item[primary_attrib] }}" method="get">
|
<thead class="table-light">
|
||||||
<button type="submit">Edit</button>
|
<tr>
|
||||||
</form>
|
{% for attrib in item_attributes %}
|
||||||
</td>
|
<th>{{ attrib.display_name }}</th>
|
||||||
<td>
|
{% endfor %}
|
||||||
<form action="/delete/{{ item[primary_attrib] }}" method="get">
|
<th class="action-buttons">Actions</th>
|
||||||
<button type="submit">Delete</button>
|
</tr>
|
||||||
</form>
|
</thead>
|
||||||
</td>
|
<tbody>
|
||||||
</tr>
|
{% for item in items %}
|
||||||
{% endfor %}
|
<tr>
|
||||||
</table>
|
{% 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>
|
</main>
|
||||||
<!-- Bootstrap JS (for dropdowns) -->
|
|
||||||
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user