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

Replace History-row authenticity dot with a visible badge

Browse source 
A 8px dot next to the card name only rewards someone who already suspects
a card and goes looking for it -- the badge needs to be the thing that
catches your eye scanning the home-screen list itself. Same red/amber
tiers as the detail-view banner, using the existing .pill shape so it sits
naturally next to the photo-count meta line rather than needing new
layout.
This commit is contained in:
Barely Removable 2026-08-23 11:55:29 -07:00
parent 3cacf2f292
commit deabe74593
2 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

15
static/app.js
View file

@ -409,11 +409,12 @@ function renderHistory() {
$('#history-empty').hidden = rows.length > 0;
$('#history-body').innerHTML = rows.map((g) => {
const auth = g.authenticity;
// A dot rather than repeating the full banner text — the row is
// already tight, and opening the card gives the real explanation.
const authDot = (auth && auth.flag !== 'none')
? `<span class="authenticity-dot authenticity-${auth.flag === 'likely_not_genuine' ? 'high' : 'check'}"
title="${esc(auth.flag === 'likely_not_genuine' ? 'Possibly not a genuine card' : 'Worth double-checking')}"></span>`
// A real badge, not just a dot — this is the thing that has to catch
// the eye scanning the home-screen list, not something you only notice
// once you already suspect a card and go looking for it.
const authBadge = (auth && auth.flag !== 'none')
? `<span class="pill authenticity-pill authenticity-${auth.flag === 'likely_not_genuine' ? 'high' : 'check'}">${
esc(auth.flag === 'likely_not_genuine' ? 'Possibly fake' : 'Verify')}</span>`
: '';
return `
<tr data-history-row="${g.id}">
@ -421,8 +422,8 @@ function renderHistory() {
<div class="cardcell">
${g.thumbnail ? `<img src="${g.thumbnail}" alt="">` : '<span class="thumb-blank"></span>'}
<div>
<div class="cardcell-name">${authDot}${esc(g.label || g.card_note || 'Untitled card')}</div>
<div class="cardcell-meta">${g.card_type ? `${esc(TYPE_LABEL[g.card_type] || 'Card')} · ` : ''}${g.image_count || 1} photo(s)</div>
<div class="cardcell-name">${esc(g.label || g.card_note || 'Untitled card')}</div>
<div class="cardcell-meta">${g.card_type ? `${esc(TYPE_LABEL[g.card_type] || 'Card')} · ` : ''}${g.image_count || 1} photo(s)${authBadge ? ' ' + authBadge : ''}</div>
</div>
</div>
</td>