Slab label: promote range to the focal line when the card name is suppressed

This commit is contained in:
Barely Removable 2026-08-22 12:32:28 -07:00
parent f910a603c3
commit 2abb568c49

View file

@ -205,19 +205,27 @@ function renderSlab(g, opts = {}) {
const range = (g.grade_low !== null && g.grade_high !== null && g.grade_low !== g.grade_high) const range = (g.grade_low !== null && g.grade_high !== null && g.grade_low !== g.grade_high)
? `realistically ${g.grade_low}${g.grade_high}` : ''; ? `realistically ${g.grade_low}${g.grade_high}` : '';
const title = opts.title || g.card_note || 'Card'; const title = opts.title || g.card_note || 'Card';
const bits = [range, `${g.confidence || ''} confidence`].filter(Boolean).join(' · '); const confidence = g.confidence ? `${g.confidence} confidence` : '';
// The kicker sits where a real slab label carries its grader's logo. It // The kicker sits where a real slab label carries its grader's logo. It
// says ESTIMATE first and always — the label is styled to look like the // says ESTIMATE first and always — the label is styled to look like the
// real thing, so it has to say plainly that it isn't one. // real thing, so it has to say plainly that it isn't one.
const kicker = ['Grade estimate', g.card_type ? (TYPE_LABEL[g.card_type] || 'Card') : ''] const kicker = ['Grade estimate', g.card_type ? (TYPE_LABEL[g.card_type] || 'Card') : '']
.filter(Boolean).join(' · '); .filter(Boolean).join(' · ');
// A label needs a focal line to sit right against the grade block. Where
// the card name is suppressed (the history modal already heads with it),
// the range takes that slot rather than leaving the face half-empty.
const primary = opts.hideTitle ? (range || confidence) : title;
const secondary = opts.hideTitle
? (range ? confidence : '')
: [range, confidence].filter(Boolean).join(' · ');
return ` return `
<div class="slab ${slabClass(grade)}"> <div class="slab ${slabClass(grade)}">
<div class="slab-main"> <div class="slab-main">
<div class="slab-kicker">${esc(kicker)}</div> <div class="slab-kicker">${esc(kicker)}</div>
${opts.hideTitle ? '' : `<div class="slab-title">${esc(title)}</div>`} ${primary ? `<div class="slab-title">${esc(primary)}</div>` : ''}
<div class="slab-sub">${esc(bits)}</div> ${secondary ? `<div class="slab-sub">${esc(secondary)}</div>` : ''}
</div> </div>
<div class="slab-grade"> <div class="slab-grade">
<span class="n">${grade === null || grade === undefined ? '—' : grade}</span> <span class="n">${grade === null || grade === undefined ? '—' : grade}</span>