[FEAT] atlas: sticky sort bar + 1K card counts + trimmed empty hint (#7)

This commit is contained in:
Teddy Warner
2026-06-11 18:55:07 -07:00
committed by GitHub
parent 4498dd54c4
commit 02dd83e516
2 changed files with 17 additions and 6 deletions
+11 -6
View File
@@ -806,6 +806,11 @@
if (n >= 10000) return (n / 1000).toFixed(1) + 'k'; if (n >= 10000) return (n / 1000).toFixed(1) + 'k';
return n.toLocaleString(); return n.toLocaleString();
} }
// Compact count for atlas cards (1K, 1.2K); the modal keeps the exact number.
function fmtNK(n) {
if (n == null) return '-';
return n < 1000 ? n.toLocaleString() : +(n / 1000).toFixed(1) + 'K';
}
// Human label for the current time-window picker selection - replaces // Human label for the current time-window picker selection - replaces
// a bare "window" with the span it actually covers. Thresholds match // a bare "window" with the span it actually covers. Thresholds match
// the winPick buttons (1H / 12H / 24H / 7D / ALL). // the winPick buttons (1H / 12H / 24H / 7D / ALL).
@@ -1118,7 +1123,7 @@
if (!filtered.length) { if (!filtered.length) {
grid.innerHTML = '<div class="atlas-empty">' + grid.innerHTML = '<div class="atlas-empty">' +
'<p>No detections in this window.</p>' + '<p>No detections in this window.</p>' +
'<p class="hint">Try a longer time window - the lifelist is still here under ALL.</p>' + '<p class="hint">Try a longer time window.</p>' +
'</div>'; '</div>';
return; return;
} }
@@ -1158,9 +1163,9 @@
// all-time count - collapse to a single stat rather than print the // all-time count - collapse to a single stat rather than print the
// same number twice. Otherwise label the count with its span. // same number twice. Otherwise label the count with its span.
var statRows = currentHours >= 1000000 var statRows = currentHours >= 1000000
? '<div><span class="n">' + fmtN(total) + '</span><span class="lbl-inline">all time</span></div>' ? '<div><span class="n">' + fmtNK(total) + '</span><span class="lbl-inline">all time</span></div>'
: '<div><span class="n">' + fmtN(win) + '</span><span class="lbl-inline">' + windowLabel(currentHours) + '</span></div>' : '<div><span class="n">' + fmtNK(win) + '</span><span class="lbl-inline">' + windowLabel(currentHours) + '</span></div>'
+ '<div><span class="n">' + fmtN(total) + '</span><span class="lbl-inline">all time</span></div>'; + '<div><span class="n">' + fmtNK(total) + '</span><span class="lbl-inline">all time</span></div>';
return '' return ''
+ '<article class="bird-card" data-sci="' + s.sci + '" data-audio="' + audioSrc + '">' + '<article class="bird-card" data-sci="' + s.sci + '" data-audio="' + audioSrc + '">'
+ (isLifer ? '<span class="lifer-badge" title="new to the life list in this window">lifer</span>' : '') + (isLifer ? '<span class="lifer-badge" title="new to the life list in this window">lifer</span>' : '')
@@ -2070,9 +2075,9 @@
loadSpecies.then(function (j) { loadSpecies.then(function (j) {
var s = j.summary || {}; var s = j.summary || {};
document.getElementById('modalCommon').textContent = s.com || sci; document.getElementById('modalCommon').textContent = s.com || sci;
document.getElementById('modalAllTime').textContent = fmtN(+s.total || 0); document.getElementById('modalAllTime').textContent = (+s.total || 0).toLocaleString();
var winRow = ((DATA.recent && DATA.recent.species) || []).filter(function (x) { return x.sci === sci; })[0]; var winRow = ((DATA.recent && DATA.recent.species) || []).filter(function (x) { return x.sci === sci; })[0];
document.getElementById('modalWindow').textContent = fmtN(winRow ? +winRow.n : 0); document.getElementById('modalWindow').textContent = (winRow ? +winRow.n : 0).toLocaleString();
document.getElementById('modalFirstSeen').textContent = s.first_seen ? fmtRecTime(s.first_seen.split(' ')[0], s.first_seen.split(' ')[1]) : '-'; document.getElementById('modalFirstSeen').textContent = s.first_seen ? fmtRecTime(s.first_seen.split(' ')[0], s.first_seen.split(' ')[1]) : '-';
var rar = rarityLabel(+s.total || 0, s.first_seen); var rar = rarityLabel(+s.total || 0, s.first_seen);
var rarEl = document.getElementById('modalRarity'); var rarEl = document.getElementById('modalRarity');
+6
View File
@@ -792,9 +792,15 @@
names, window/all-time detection counts, and small action chips for names, window/all-time detection counts, and small action chips for
audio playback, Wikipedia, and eBird. */ audio playback, Wikipedia, and eBird. */
.atlas-controls { .atlas-controls {
/* The bar is transparent and floats (z-index) over the scrolling cards;
only the pill is opaque. Cards scroll behind it and clip at the top of
the view, under the title, as they did before it was pinned. */
position: sticky; top: 0; z-index: 2;
max-width: 1280px; margin: 0 auto 18px; max-width: 1280px; margin: 0 auto 18px;
display: flex; justify-content: flex-end; align-items: center; display: flex; justify-content: flex-end; align-items: center;
pointer-events: none;
} }
.atlas-sort { pointer-events: auto; }
.atlas-sort { .atlas-sort {
display: inline-flex; padding: 3px; position: relative; display: inline-flex; padding: 3px; position: relative;
background: var(--paper-2); border-radius: 999px; background: var(--paper-2); border-radius: 999px;