bvandeusen/imagerepo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace showcase tag overlays with ghost count badge, refine nav hint

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-20 08:35:42 -04:00
parent 8ebba0ec55
commit d4258d2ff1
2 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/showcase.js
+6 -7
View File
@@ -156,14 +156,13 @@
} }
item.appendChild(imgEl); item.appendChild(imgEl);
// Filter out archive tags from display (they're still visible in modal) // Filter out archive and source tags from display (they're still visible in modal)
const visibleTags = (img.tags || []).filter(t => t.kind !== 'archive'); const visibleTags = (img.tags || []).filter(t => t.kind !== 'archive' && t.kind !== 'source');
if (visibleTags.length > 0) { if (visibleTags.length > 0) {
const overlay = document.createElement('div'); const badge = document.createElement('span');
overlay.className = 'tag-overlay'; badge.className = 'tag-count-badge';
// Use shared utility to create tag chips badge.textContent = `#${visibleTags.length}`;
overlay.innerHTML = visibleTags.map(t => createTagChipHtml(t)).join(''); item.appendChild(badge);
item.appendChild(overlay);
} }
if (img.is_video) { if (img.is_video) {
app/static/style.css
+36 -1
View File
@@ -1291,12 +1291,18 @@ header {
} }
.showcase-nav .nav-hint { .showcase-nav .nav-hint {
color: rgba(255,255,255,0.4); opacity: 0;
transition: opacity 0.2s ease;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--text-muted);
margin-top: 0.25rem; margin-top: 0.25rem;
pointer-events: none; pointer-events: none;
} }
.showcase-nav:hover .nav-hint {
opacity: 1;
}
/* Masonry container - JS-managed columns */ /* Masonry container - JS-managed columns */
.masonry-container { .masonry-container {
display: flex; display: flex;
@@ -1349,6 +1355,35 @@ header {
z-index: 2; z-index: 2;
} }
/* Ghost tag count badge on showcase items */
.tag-count-badge {
position: absolute;
bottom: 8px;
right: 8px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.55);
font-size: 0.7rem;
font-weight: 500;
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.masonry-item:hover .tag-count-badge {
opacity: 1;
}
/* Touch devices: always show badge */
@media (hover: none) {
.tag-count-badge {
opacity: 1;
}
}
/* Loading state for shuffle */ /* Loading state for shuffle */
.masonry-container.loading { .masonry-container.loading {
opacity: 0.5; opacity: 0.5;