adebaumann/labhelper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add box detail page with thumbnails and view tests
Some checks failed
Build containers when image tags change / build-if-image-changed (., web, containers, main container, git.baumann.gr/adebaumann/labhelper) (push) Successful in 2m26s
Details
Build containers when image tags change / build-if-image-changed (data-loader, loader, initContainers, init-container, git.baumann.gr/adebaumann/labhelper-data-loader) (push) Successful in 23s
Details
SonarQube Scan / SonarQube Trigger (push) Failing after 19s
Details

Browse Source
This commit is contained in:
Adrian A. Baumann
2025-12-28 21:07:50 +01:00
parent 23ede15938
commit ac11b6fa51
8 changed files with 289 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
boxes/templates/boxes/box_detail.html Normal file
View File

@@ -0,0 +1,119 @@
{% load thumbnail %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box {{ box.id }} - LabHelper</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
.box-info {
background: white;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
th {
background-color: #4a90a4;
color: white;
font-weight: 600;
}
tr:hover {
background-color: #f8f9fa;
}
.thumbnail {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 4px;
}
.no-image {
width: 200px;
height: 200px;
background-color: #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
color: #999;
border-radius: 4px;
}
.back-link {
margin-bottom: 20px;
display: inline-block;
}
.empty-message {
background: white;
padding: 40px;
text-align: center;
border-radius: 8px;
color: #666;
}
</style>
</head>
<body>
<a href="/" class="back-link">&larr; Back to Home</a>
<h1>Box {{ box.id }}</h1>
<div class="box-info">
<strong>Type:</strong> {{ box.box_type.name }}
({{ box.box_type.width }} x {{ box.box_type.height }} x {{ box.box_type.length }} mm)
</div>
{% if things %}
<table>
<thead>
<tr>
<th>Picture</th>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{% for thing in things %}
<tr>
<td>
{% if thing.picture %}
{% thumbnail thing.picture "200x200" crop="center" as thumb %}
<img src="{{ thumb.url }}" alt="{{ thing.name }}" class="thumbnail">
{% endthumbnail %}
{% else %}
<div class="no-image">No image</div>
{% endif %}
</td>
<td>{{ thing.name }}</td>
<td>{{ thing.thing_type.name }}</td>
<td>{{ thing.description|default:"-" }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="empty-message">
This box is empty.
</div>
{% endif %}
</body>
</html>