mikael-lovqvists-claude-agent/electronics-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show grid cell image in component detail inventory entries

Browse Source 
Grid-type inventory entries now display the warped cell image from the
grid as a read-only thumbnail (highlighted with accent border) alongside
any user-uploaded images for that entry.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-03-21 00:20:41 +00:00
parent b66b2f95d3
commit 99299ed9f2
2 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/app.mjs
View File

@@ -363,6 +363,23 @@ function build_detail_inv_entry(entry) {
const goto_btn = qs(el, '.detail-inv-goto-grid'); const goto_btn = qs(el, '.detail-inv-goto-grid');
goto_btn.hidden = false; goto_btn.hidden = false;
goto_btn.addEventListener('click', () => navigate(`/grids/viewer/${entry.grid_id}`)); goto_btn.addEventListener('click', () => navigate(`/grids/viewer/${entry.grid_id}`));
// Show the grid cell image as a read-only thumbnail
const grid = all_grids.find(g => g.id === entry.grid_id);
const cell_filename = grid?.cells?.[entry.grid_row]?.[entry.grid_col];
if (cell_filename) {
const thumb = document.createElement('a');
thumb.className = 'thumb-link cell-thumb-link';
thumb.href = `/img/${cell_filename}`;
thumb.target = '_blank';
thumb.rel = 'noopener';
const img = document.createElement('img');
img.className = 'thumb-img';
img.src = `/img/${cell_filename}`;
img.alt = 'Grid cell';
thumb.appendChild(img);
qs(el, '.inv-image-grid').before(thumb);
}
} }
// Inventory entry images // Inventory entry images

15
public/style.css
View File

@@ -370,6 +370,21 @@ nav {
gap: 0.4rem; gap: 0.4rem;
} }
.cell-thumb-link {
display: block;
border: 2px solid var(--accent, #5b9cf6);
border-radius: 3px;
overflow: hidden;
flex-shrink: 0;
}
.cell-thumb-link .thumb-img {
display: block;
width: 64px;
height: 64px;
object-fit: cover;
}
/* ===== SECTION TOOLBAR ===== */ /* ===== SECTION TOOLBAR ===== */
.section-toolbar { .section-toolbar {