ninja_hippo/card-grader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PSA-slab theme: render the verdict as a slab label, matching grade chips in history

Browse source
This commit is contained in:
Barely Removable 2026-08-22 12:31:15 -07:00
parent 3c98373ad6
commit f910a603c3
2 changed files with 96 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

21
static/app.js
View file

@ -206,10 +206,16 @@ function renderSlab(g, opts = {}) {
? `realistically ${g.grade_low}–${g.grade_high}` : '';
const title = opts.title || g.card_note || 'Card';
const bits = [range, `${g.confidence || ''} confidence`].filter(Boolean).join(' · ');
// 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
// 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') : '']
.filter(Boolean).join(' · ');
return `
<div class="slab ${slabClass(grade)}">
<div class="slab-main">
${g.card_type ? `<div><span class="card-type-tag">${esc(TYPE_LABEL[g.card_type] || 'Card')}</span></div>` : ''}
<div class="slab-kicker">${esc(kicker)}</div>
${opts.hideTitle ? '' : `<div class="slab-title">${esc(title)}</div>`}
<div class="slab-sub">${esc(bits)}</div>
</div>
@ -335,6 +341,17 @@ function gradePillClass(grade) {
return 'pill-critical';
}
// Mirrors slabClass so a history chip and that card's slab always land on
// the same colour band — they're the same verdict shown at two sizes.
function gradeChipClass(grade) {
if (grade === null || grade === undefined) return 'grade-chip-na';
if (grade >= 10) return 'grade-chip-10';
if (grade === 9) return 'grade-chip-9';
if (grade >= 7) return 'grade-chip-8';
if (grade >= 5) return 'grade-chip-6';
return 'grade-chip-low';
}
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@ -370,7 +387,7 @@ function renderHistory() {
</div>
</div>
</td>
<td><span class="pill ${gradePillClass(g.estimated_grade)}">${
<td><span class="grade-chip ${gradeChipClass(g.estimated_grade)}">${
g.estimated_grade === null ? 'n/a' : `PSA ${g.estimated_grade}`}</span></td>
<td><span class="cell-conf conf-${esc(g.confidence || 'low')}">${esc(g.confidence || '')}</span></td>
<td class="cardcell-meta cell-when">${esc(fmtWhen(g.created_at))}</td>