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

Add search page and thing detail with AJAX
All checks were successful
Build containers when image tags change / build-if-image-changed (., web, containers, main container, git.baumann.gr/adebaumann/labhelper) (push) Successful in 32s
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 7s
Details

Browse Source
This commit is contained in:
Adrian A. Baumann
2025-12-28 22:39:57 +01:00
parent 06cbae93dc
commit f30627196e
6 changed files with 539 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
boxes/templates/boxes/thing_detail.html Normal file
View File

@@ -0,0 +1,131 @@
{% load thumbnail %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ thing.name }} - LabHelper</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
h1 {
color: #333;
}
.thing-card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
display: flex;
gap: 30px;
}
.thing-image {
flex-shrink: 0;
}
.thing-image img {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 8px;
}
.no-image {
width: 300px;
height: 300px;
background-color: #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
color: #999;
border-radius: 8px;
}
.thing-details {
flex-grow: 1;
}
.detail-row {
margin-bottom: 15px;
}
.detail-label {
font-weight: 600;
color: #666;
font-size: 14px;
margin-bottom: 4px;
}
.detail-value {
font-size: 16px;
color: #333;
}
.detail-value a {
color: #4a90a4;
text-decoration: none;
}
.detail-value a:hover {
text-decoration: underline;
}
.description {
white-space: pre-wrap;
line-height: 1.5;
}
.back-link {
margin-bottom: 20px;
display: inline-block;
color: #4a90a4;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
}
.nav-links {
margin-bottom: 20px;
}
.nav-links a {
margin-right: 15px;
}
</style>
</head>
<body>
<div class="nav-links">
<a href="/" class="back-link">&larr; Home</a>
<a href="/search/" class="back-link">Search</a>
<a href="/box/{{ thing.box.id }}/" class="back-link">Box {{ thing.box.id }}</a>
</div>
<h1>{{ thing.name }}</h1>
<div class="thing-card">
<div class="thing-image">
{% if thing.picture %}
{% thumbnail thing.picture "300x300" crop="center" as thumb %}
<img src="{{ thumb.url }}" alt="{{ thing.name }}">
{% endthumbnail %}
{% else %}
<div class="no-image">No image</div>
{% endif %}
</div>
<div class="thing-details">
<div class="detail-row">
<div class="detail-label">Type</div>
<div class="detail-value">{{ thing.thing_type.name }}</div>
</div>
<div class="detail-row">
<div class="detail-label">Location</div>
<div class="detail-value">
<a href="/box/{{ thing.box.id }}/">Box {{ thing.box.id }}</a>
({{ thing.box.box_type.name }})
</div>
</div>
{% if thing.description %}
<div class="detail-row">
<div class="detail-label">Description</div>
<div class="detail-value description">{{ thing.description }}</div>
</div>
{% endif %}
</div>
</div>
</body>
</html>