claudecode/AvianVisitors
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] atlas: spectrogram preview on card play + "lifer" badge

Browse Source
This commit is contained in:
Twarner491
2026-06-05 16:35:54 -07:00
parent ddb7c557e9
commit a0f8d57708
2 changed files with 85 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
avian/frontend/styles.css
+41 -9
View File
@@ -791,8 +791,25 @@
gap: 22px;
max-width: 1280px; margin: 0 auto;
}
/* Mobile atlas: a compact 2-up grid instead of one giant card per row,
so you can scan many birds and tap easily. Inline actions are hidden -
tapping the card opens the detail modal, which has play/wiki/ebird +
recordings - making the whole card one big touch target. */
@media (max-width: 700px) {
.atlas-grid { grid-template-columns: 1fr; gap: 16px; }
/* minmax(0,1fr) lets the columns shrink below their content's intrinsic
width (otherwise the chips force overflow). Selectors are scoped under
.atlas-grid so they out-specify the base .bird-card rules that appear
later in the file. */
.atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.atlas-grid .bird-card { min-height: 0; padding: 12px 12px 14px; border-radius: 9px; }
.atlas-grid .bird-card .stat { top: 10px; left: 11px; font-size: 8px; }
.atlas-grid .bird-card .stat .n { font-size: 11px; }
.atlas-grid .bird-card .img-wrap { margin: 30px 0 8px; }
.atlas-grid .bird-card .img-wrap img { max-height: 96px; }
.atlas-grid .bird-card h3 { font-size: 12.5px; }
.atlas-grid .bird-card .sci { font-size: 9.5px; }
.atlas-grid .bird-card .actions { display: none; }
.atlas-grid .lifer-badge { top: 9px; right: 9px; font-size: 7px; padding: 3px 5px; letter-spacing: 0.1em; }
}
.bird-card {
position: relative;
@@ -813,6 +830,18 @@
font: 9px/1.5 ui-monospace, Menlo, monospace;
color: var(--ink-soft); letter-spacing: 0.04em;
}
/* "lifer" badge - shown top-right when a species' first-ever detection
falls inside the selected window (set in renderAtlas). pointer-events
off so it never blocks the card's click-to-open. */
.lifer-badge {
position: absolute; top: 12px; right: 12px; z-index: 2;
font: 700 8px/1 ui-monospace, Menlo, monospace;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--paper); background: var(--accent);
padding: 4px 7px; border-radius: 999px;
box-shadow: 0 2px 6px rgba(26,22,18,0.18);
pointer-events: none;
}
.bird-card .stat .n {
color: var(--ink); font: 700 13px/1 ui-serif, Georgia, serif;
font-variant-numeric: tabular-nums; margin-right: 4px;
@@ -1467,15 +1496,15 @@
box-shadow: var(--recess);
}
.bird-card .spectro-wrap:empty { display: none; }
.bird-card .spectro-wrap img {
width: 100%; max-height: 44px; display: block;
object-fit: cover;
filter: grayscale(1) brightness(0.94) contrast(1.16);
opacity: 0.78;
transition: opacity 200ms ease;
/* Canvas is painted client-side in the active theme's paper/ink palette
(paintSpectrogram reads data-theme), so it follows light/dark mode with
no CSS filter - same renderer as the modal recording spectrograms. */
.bird-card .spectro-wrap canvas {
width: 100%; height: 44px; display: block;
}
.bird-card .spectro-wrap:hover img { opacity: 1; }
/* Progress wash: a translucent ink veil that grows as the clip plays */
/* Progress wash: a translucent veil that grows as the clip plays. Ink in
light mode; in dark mode a light veil so it stays visible over the
charcoal spectrogram ground. */
.bird-card .spectro-wrap::after {
content: '';
position: absolute; top: 0; bottom: 0; left: 0;
@@ -1484,6 +1513,9 @@
pointer-events: none;
transition: width 60ms linear;
}
:root[data-theme="dark"] .bird-card .spectro-wrap::after {
background: linear-gradient(to right, rgba(236,232,225,0.26), rgba(236,232,225,0.05));
}
/* Playhead - thin vertical line at the leading edge */
.bird-card .spectro-wrap::before {
content: '';