Adrian A. Baumann
da506221f7
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 18s
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 4s
203 lines
8.2 KiB
HTML
203 lines
8.2 KiB
HTML
{% extends "base.html" %}
|
|
{% load thumbnail %}
|
|
{% load dict_extras %}
|
|
|
|
{% block title %}{{ thing.name }} - LabHelper{% endblock %}
|
|
|
|
{% block page_header %}
|
|
<div class="page-header" style="display: flex; justify-content: space-between; align-items: start;">
|
|
<div>
|
|
<h1><i class="fas fa-cube"></i> {{ thing.name }}</h1>
|
|
<p class="breadcrumb">
|
|
<a href="/"><i class="fas fa-home"></i> Home</a> /
|
|
<a href="/box/{{ thing.box.id }}/"><i class="fas fa-box"></i> Box {{ thing.box.id }}</a> /
|
|
{{ thing.name }}
|
|
</p>
|
|
</div>
|
|
<a href="{% url 'edit_thing' thing.id %}" class="btn" style="margin-top: 10px;">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</a>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="section">
|
|
<div class="thing-card" style="display: flex; gap: 40px; flex-wrap: wrap;">
|
|
<div class="thing-image" style="flex-shrink: 0; width: 100%; max-width: 400px;">
|
|
{% if thing.picture %}
|
|
{% thumbnail thing.picture "400x400" crop="center" as thumb %}
|
|
<img src="{{ thumb.url }}" alt="{{ thing.name }}" style="width: 100%; height: auto; max-height: 400px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);">
|
|
{% endthumbnail %}
|
|
{% else %}
|
|
<div style="width: 100%; aspect-ratio: 1; max-width: 400px; max-height: 400px; background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%); display: flex; align-items: center; justify-content: center; color: #999; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);">
|
|
<div style="text-align: center;">
|
|
<i class="fas fa-image" style="font-size: 64px; margin-bottom: 15px; display: block;"></i>
|
|
No image
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="thing-details" style="flex-grow: 1; min-width: 300px;">
|
|
{% if thing.tags.all %}
|
|
<div class="detail-row" style="margin-bottom: 25px;">
|
|
<div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
|
|
<i class="fas fa-tags"></i> Tags
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 12px;">
|
|
{% regroup thing.tags.all by facet as facet_list %}
|
|
{% for facet in facet_list %}
|
|
<div>
|
|
<div style="font-size: 12px; color: {{ facet.grouper.color }}; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;">
|
|
{{ facet.grouper.name }}
|
|
</div>
|
|
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
|
{% for tag in facet.list %}
|
|
<span style="display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: {{ facet.grouper.color }}20; color: {{ facet.grouper.color }}; border: 2px solid {{ facet.grouper.color }}; border-radius: 20px; font-size: 14px; font-weight: 600;">
|
|
{{ tag.name }}
|
|
</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="detail-row" style="margin-bottom: 25px;">
|
|
<div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
|
|
<i class="fas fa-map-marker-alt"></i> Location
|
|
</div>
|
|
<div style="font-size: 18px; color: #333;">
|
|
<a href="{% url 'box_detail' thing.box.id %}" style="color: #667eea; text-decoration: none; font-weight: 500;">Box {{ thing.box.id }}</a>
|
|
<span style="color: #999;"> ({{ thing.box.box_type.name }})</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if thing.description %}
|
|
<div class="detail-row" style="margin-bottom: 25px;">
|
|
<div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
|
|
<i class="fas fa-align-left"></i> Description
|
|
</div>
|
|
<div class="markdown-content" style="font-size: 16px; color: #555; line-height: 1.6;">
|
|
{{ thing.description|render_markdown }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if thing.files.all %}
|
|
<div class="detail-row" style="margin-bottom: 25px;">
|
|
<div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
|
|
<i class="fas fa-file-alt"></i> Files
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
{% for file in thing.files.all %}
|
|
<div style="display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
|
|
<i class="fas fa-paperclip" style="color: #667eea; font-size: 16px;"></i>
|
|
<a href="{{ file.file.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ file.title }}</a>
|
|
<span style="color: #999; font-size: 12px;">({{ file.filename }})</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if thing.links.all %}
|
|
<div class="detail-row" style="margin-bottom: 25px;">
|
|
<div style="font-size: 14px; color: #888; font-weight: 600; margin-bottom: 8px;">
|
|
<i class="fas fa-link"></i> Links
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
{% for link in thing.links.all %}
|
|
<div style="display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
|
|
<i class="fas fa-external-link-alt" style="color: #667eea; font-size: 16px;"></i>
|
|
<a href="{{ link.url }}" target="_blank" style="color: #667eea; text-decoration: none; font-weight: 500; font-size: 15px;">{{ link.title }}</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.markdown-content p {
|
|
margin: 0 0 1em 0;
|
|
}
|
|
.markdown-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.markdown-content h1, .markdown-content h2, .markdown-content h3,
|
|
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
|
|
margin: 1.5em 0 0.5em 0;
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
.markdown-content h1:first-child, .markdown-content h2:first-child,
|
|
.markdown-content h3:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.markdown-content ul, .markdown-content ol {
|
|
margin: 0.5em 0;
|
|
padding-left: 2em;
|
|
}
|
|
.markdown-content li {
|
|
margin: 0.25em 0;
|
|
}
|
|
.markdown-content code {
|
|
background: #f4f4f4;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
.markdown-content pre {
|
|
background: #f4f4f4;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
margin: 1em 0;
|
|
}
|
|
.markdown-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
.markdown-content blockquote {
|
|
border-left: 4px solid #667eea;
|
|
margin: 1em 0;
|
|
padding: 0.5em 1em;
|
|
background: #f8f9fa;
|
|
color: #666;
|
|
}
|
|
.markdown-content a {
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
}
|
|
.markdown-content a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.markdown-content table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 1em 0;
|
|
}
|
|
.markdown-content th, .markdown-content td {
|
|
border: 1px solid #e0e0e0;
|
|
padding: 8px 12px;
|
|
text-align: left;
|
|
}
|
|
.markdown-content th {
|
|
background: #f8f9fa;
|
|
font-weight: 600;
|
|
}
|
|
.markdown-content hr {
|
|
border: none;
|
|
border-top: 2px solid #e0e0e0;
|
|
margin: 1.5em 0;
|
|
}
|
|
</style>
|
|
{% endblock %}
|