Fix grid cell label and count: label below image, count as green text beside it
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1293,7 +1293,8 @@ function render_grid_viewer() {
|
||||
} else {
|
||||
cell.classList.add('empty');
|
||||
}
|
||||
set_text(cell, '.grid-cell-label', `R${row + 1}C${col + 1}`);
|
||||
const label_el = qs(cell, '.grid-cell-label');
|
||||
label_el.textContent = `R${row + 1}C${col + 1}`;
|
||||
|
||||
const count = all_inventory.filter(inv =>
|
||||
inv.location_type === 'grid' && inv.grid_id === grid.id &&
|
||||
@@ -1303,7 +1304,7 @@ function render_grid_viewer() {
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'grid-cell-count';
|
||||
badge.textContent = count;
|
||||
qs(cell, '.grid-cell-img-wrap').appendChild(badge);
|
||||
label_el.appendChild(badge);
|
||||
}
|
||||
|
||||
cell.addEventListener('click', (e) => open_cell_inventory(grid, row, col, e));
|
||||
|
||||
@@ -1483,33 +1483,19 @@ nav {
|
||||
}
|
||||
|
||||
.grid-cell-label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
font-size: 0.65rem;
|
||||
color: #ccc;
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
font-family: var(--font-mono);
|
||||
background: linear-gradient(transparent, rgba(0,0,0,0.7));
|
||||
border-radius: 0 0 3px 3px;
|
||||
padding: 6px 2px 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid-cell-count {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
background: #2e7d4f;
|
||||
color: #fff;
|
||||
font-size: 0.6rem;
|
||||
color: #4caf50;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
padding: 1px 5px;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ===== GRID TYPE PILL ===== */
|
||||
|
||||
Reference in New Issue
Block a user