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

Docker hardening (non-root, healthcheck, .dockerignore, log caps) + UI table/typography polish

Browse source
This commit is contained in:
Barely Removable 2026-08-22 11:25:52 -07:00
parent e586bc92e7
commit bb5d50502c
6 changed files with 84 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

25
static/app.js
View file

@ -333,9 +333,18 @@ function gradePillClass(grade) {
return 'pill-critical';
}
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function fmtWhen(iso) {
if (!iso) return '';
return String(iso).replace('T', ' ').slice(0, 16);
const s = String(iso);
const m = s.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}:\d{2})/);
if (!m) return s.replace('T', ' ').slice(0, 16);
const nowYear = String(new Date().getFullYear());
const day = `${MONTHS[Number(m[2]) - 1]} ${Number(m[3])}`;
// Only spend width on the year when it isn't this year's.
return `${m[1] === nowYear ? day : `${day} ${m[1]}`} · ${m[4]}`;
}
async function loadHistory() {
@ -361,12 +370,14 @@ function renderHistory() {
</td>
<td><span class="pill ${gradePillClass(g.estimated_grade)}">${
g.estimated_grade === null ? 'n/a' : `PSA ${g.estimated_grade}`}</span></td>
<td class="cardcell-meta">${esc(g.confidence || '')}</td>
<td class="cardcell-meta">${esc(fmtWhen(g.created_at))}</td>
<td class="num">
<button class="btn btn-quiet btn-sm" data-history-regrade="${g.id}"
data-history-has-images="${g.has_source_images ? '1' : '0'}">Regrade</button>
<button class="btn btn-quiet btn-sm" data-history-delete="${g.id}">Delete</button>
<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>
<td>
<div class="row-actions">
<button class="btn btn-quiet btn-sm" data-history-regrade="${g.id}"
data-history-has-images="${g.has_source_images ? '1' : '0'}">Regrade</button>
<button class="btn btn-quiet btn-sm" data-history-delete="${g.id}">Delete</button>
</div>
</td>
</tr>`).join('');
}

3
static/index.html
View file

@ -15,6 +15,9 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Card Grader">
<link rel="apple-touch-icon" href="__BASE__/static/icon-180.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
<link rel="stylesheet" href="__BASE__/static/style.css">
</head>
<body>

27
static/style.css
View file

@ -51,7 +51,7 @@
body {
margin: 0;
color: var(--ink);
font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
font: 16px/1.55 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
@ -263,6 +263,22 @@ textarea { resize: vertical; min-height: 64px; }
.cardcell-meta { font-size: 12.5px; color: var(--muted); }
.dash { color: var(--muted); }
/* Table refinements the density audit turned up: dates were wrapping onto
two lines, action buttons were stacking vertically in a cramped cell, and
confidence read as one more grey word. */
.cell-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-conf {
font-size: 11px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase;
}
.cell-conf.conf-high { color: var(--good-text); }
.cell-conf.conf-medium { color: var(--warning); }
.cell-conf.conf-low { color: var(--muted); }
.row-actions {
display: flex; gap: 7px; justify-content: flex-end;
white-space: nowrap;
}
/* --------------------------------------------------------------- pills */
.pill {
@ -471,3 +487,12 @@ textarea { resize: vertical; min-height: 64px; }
.slab-grade { width: 108px; padding: 16px 8px; }
.slab-grade .n { font-size: 44px; }
}
/* On a narrow phone the five-column history table forces sideways
scrolling. Confidence is the most expendable column there — the grade
pill and the card name are what someone is actually scanning for, and
confidence is still shown in the card's detail view. */
@media (max-width: 560px) {
#history-table th:nth-child(3),
#history-table td:nth-child(3) { display: none; }
}