[FEAT] atlas: sticky sort bar + 1K card counts + trimmed empty hint (#7)
This commit is contained in:
+11
-6
@@ -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');
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user