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

24
static/style.css
View file

@ -450,14 +450,24 @@ textarea { resize: vertical; min-height: 64px; }
font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5;
} }
/* History-row version: a plain dot, since the row has no room for the full /* History-row badge: a real pill, not just a dot — needs to catch the eye
banner text and opening the card gives the real explanation. */ scanning the home-screen list itself, not only reward someone who
.authenticity-dot { already suspects a card and opens it to check. Same colour-mix technique
display: inline-block; width: 8px; height: 8px; border-radius: 50%; as .pill-critical/.pill-marginal elsewhere, just spelled out explicitly
margin-right: 6px; vertical-align: middle; since neither of those set the text colour this needs. */
background: var(--critical); .authenticity-pill {
margin-left: 2px;
}
.authenticity-pill.authenticity-high {
border-color: color-mix(in srgb, var(--critical) 55%, transparent);
color: var(--critical);
background: color-mix(in srgb, var(--critical) 15%, transparent);
}
.authenticity-pill.authenticity-check {
border-color: color-mix(in srgb, var(--warning) 55%, transparent);
color: var(--warning);
background: color-mix(in srgb, var(--warning) 15%, transparent);
} }
.authenticity-dot.authenticity-check { background: var(--warning); }
/* -------------------------------------------------------------- banner */ /* -------------------------------------------------------------- banner */