Portal look: aligned header and footer, 7-day chart, today's reasons, pass rate
Header, breadcrumb, page and footer share one 1180px column; the header marks the current page; a footer sits at the bottom of every page. Dashboard: pass rate on Checked today, a Last 7 days Pass / Fail / Review chart, today's Fail and Review reasons grouped with counts, and three equal cards (Claim status, Runs, Find a claim). Motion is movement only and off under prefers-reduced-motion. Context.md brought up to date. Snapshot of local 9d5ac63 (tree scanned: no real claim ids, no patient data). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ManikandanandClaude Opus 5.5 committed
1 parent
ba15a574ab
commit
120fd6808a
5 files changed
+295
-39
No files matched your search
+125
-13
@@ -16,12 +16,61 @@
|
||||
font-weight: 600; }
|
||||
/* `.row { display: flex }` beats the browser's [hidden] rule. */
|
||||
.botrun [hidden] { display: none; }
|
||||
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
|
||||
align-items: stretch; }
|
||||
.actions .card { margin-bottom: 0; }
|
||||
a.big { display: flex; align-items: center; justify-content: center;
|
||||
gap: 10px; font-size: 18px; padding: 22px; border-radius: 10px;
|
||||
height: 100%; }
|
||||
.tile .rate { display: block; margin-top: 4px; font-size: 12px;
|
||||
color: var(--pass); font-weight: 600; }
|
||||
/* Two columns, then three equal cards: every row the same edges. */
|
||||
.split { display: grid; grid-template-columns: 3fr 2fr; gap: 18px;
|
||||
margin-bottom: 18px; }
|
||||
.split .card, .actions .card { margin-bottom: 0; }
|
||||
.card-h { display: flex; justify-content: space-between;
|
||||
align-items: baseline; margin-bottom: 12px; }
|
||||
.card-h h2 { margin: 0; }
|
||||
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 10px; align-items: end; height: 170px; }
|
||||
a.wd { display: flex; flex-direction: column; align-items: center;
|
||||
justify-content: flex-end; height: 100%; color: var(--text);
|
||||
text-decoration: none; }
|
||||
a.wd .col { display: flex; flex-direction: column; width: 70%;
|
||||
max-width: 42px; border-radius: 6px 6px 2px 2px;
|
||||
overflow: hidden; background: var(--head); min-height: 4px;
|
||||
height: 0; }
|
||||
a.wd:hover .col { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
a.wd .col i { display: block; }
|
||||
a.wd .col i.Pass { background: var(--pass); }
|
||||
a.wd .col i.Fail { background: var(--fail); }
|
||||
a.wd .col i.Review { background: var(--review-bar); }
|
||||
a.wd .cnt { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
|
||||
a.wd .lbl { font-size: 12px; color: var(--muted); margin-top: 6px; }
|
||||
.legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px;
|
||||
color: var(--muted); }
|
||||
.legend span::before { content: ""; display: inline-block; width: 9px;
|
||||
height: 9px; border-radius: 2px; margin-right: 5px; }
|
||||
.legend .Pass::before { background: var(--pass); }
|
||||
.legend .Fail::before { background: var(--fail); }
|
||||
.legend .Review::before { background: var(--review-bar); }
|
||||
ol.reasons { list-style: none; margin: 0; padding: 0; }
|
||||
ol.reasons li { display: flex; gap: 10px; align-items: baseline;
|
||||
padding: 7px 0; border-bottom: 1px solid var(--line); }
|
||||
ol.reasons li:last-child { border-bottom: 0; }
|
||||
ol.reasons b { min-width: 30px; text-align: center; border-radius: 10px;
|
||||
padding: 1px 8px; font-size: 12px; }
|
||||
ol.reasons b.Fail { background: var(--fail-bg); color: var(--fail); }
|
||||
ol.reasons b.Review { background: var(--review-bg); color: var(--review); }
|
||||
ol.reasons span { overflow: hidden; text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px; align-items: stretch; }
|
||||
a.card.go { display: flex; align-items: center; gap: 14px; color: var(--text); }
|
||||
a.card.go:hover { text-decoration: none; border-color: var(--accent); }
|
||||
a.card.go b, form.search > b { display: block; font-size: 15px; }
|
||||
a.card.go .ic { display: grid; place-items: center; width: 40px; height: 40px;
|
||||
border-radius: 10px; background: var(--hilite);
|
||||
color: var(--accent); font-size: 20px; flex: none; }
|
||||
a.card.go .arrow { margin-left: auto; color: var(--accent); font-size: 18px; }
|
||||
a.card.go .note { display: block; }
|
||||
form.search.card { display: block; }
|
||||
form.search .find { display: flex; gap: 8px; margin-top: 8px; }
|
||||
form.search .find input { flex: 1; min-width: 0; }
|
||||
.today-h { display: flex; justify-content: space-between; align-items: baseline;
|
||||
margin: 4px 0 10px; }
|
||||
.today-h h2 { font-size: 15px; margin: 0; }
|
||||
@@ -37,7 +86,9 @@
|
||||
#live-list li.st-checking { background: var(--hilite); }
|
||||
#live-list li.st-checking .st { color: var(--accent); font-weight: 600; }
|
||||
#live-list li.st-idle .st { color: var(--muted); }
|
||||
@media (max-width: 760px) { .actions { grid-template-columns: 1fr; } }
|
||||
@media (max-width: 760px) {
|
||||
.actions, .split { grid-template-columns: 1fr; }
|
||||
}
|
||||
/* The last Run ended badly (EEWA-33). */
|
||||
.alert { background: var(--fail-bg); color: var(--fail);
|
||||
border: 1px solid #f5c2bd; border-left: 5px solid var(--fail);
|
||||
@@ -82,19 +133,53 @@
|
||||
{% if today.claims %}<a href="/day/{{ today.day.isoformat() }}">Open today's claims →</a>{% endif %}
|
||||
</div>
|
||||
<div class="tiles">
|
||||
<a class="tile" href="/day/{{ today.day.isoformat() }}"><span class="n">{{ today.claims }}</span><span class="l">Checked today</span></a>
|
||||
<a class="tile" href="/day/{{ today.day.isoformat() }}"><span class="n">{{ today.claims }}</span><span class="l">Checked today</span>{% if today.claims %}<span class="rate">{{ (100 * today.pass_count / today.claims) | round | int }}% pass</span>{% endif %}</a>
|
||||
<a class="tile Pass" href="/day/{{ today.day.isoformat() }}?category=Pass"><span class="n">{{ today.pass_count }}</span><span class="l">Pass</span></a>
|
||||
<a class="tile Fail" href="/day/{{ today.day.isoformat() }}?category=Fail"><span class="n">{{ today.fail_count }}</span><span class="l">Fail</span></a>
|
||||
<a class="tile Review" href="/day/{{ today.day.isoformat() }}?category=Review"><span class="n">{{ today.review_count }}</span><span class="l">Review</span></a>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<section class="card" id="week">
|
||||
<div class="card-h"><h2>Last 7 days</h2><a href="/days">All days →</a></div>
|
||||
{% if week %}
|
||||
<div class="week">
|
||||
{% for d in week %}
|
||||
<a class="wd" href="/day/{{ d.day.isoformat() }}" data-day="{{ d.day.isoformat() }}" title="{{ d.day | longdate }}: {{ d.pass_count }} Pass, {{ d.fail_count }} Fail, {{ d.review_count }} Review">
|
||||
<span class="cnt">{{ d.claims }}</span>
|
||||
<span class="col" data-n="{{ d.claims }}"><i class="Review" data-n="{{ d.review_count }}"></i><i class="Fail" data-n="{{ d.fail_count }}"></i><i class="Pass" data-n="{{ d.pass_count }}"></i></span>
|
||||
<span class="lbl">{{ d.day.strftime("%a %d") }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="legend"><span class="Pass">Pass</span><span class="Fail">Fail</span><span class="Review">Review</span></div>
|
||||
{% else %}
|
||||
<p class="note">No claims checked in the last 7 days.</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
<section class="card" id="reasons">
|
||||
<div class="card-h"><h2>Today's Fail and Review reasons</h2>{% if today.claims %}<a href="/day/{{ today.day.isoformat() }}?category=Fail">Open →</a>{% endif %}</div>
|
||||
{% if reasons %}
|
||||
<ol class="reasons">
|
||||
{% for r in reasons %}<li><b class="{{ r.category }}">{{ r.count }}</b><span>{{ r.comment }}</span></li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
{% else %}
|
||||
<p class="note">No Fail or Review today.</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a class="btn big" href="/days" id="claim-status">Claim status →</a>
|
||||
<a class="card go" href="/days" id="claim-status"><span class="ic" aria-hidden="true">▦</span><span><b>Claim status</b><span class="note">Every day's claims, by result</span></span><span class="arrow">→</span></a>
|
||||
<a class="card go" href="/runs"><span class="ic" aria-hidden="true">◷</span><span><b>Runs</b><span class="note">Logins, timings, errors</span></span><span class="arrow">→</span></a>
|
||||
<form class="search card" method="get" action="/claim">
|
||||
<strong>Find a claim</strong>
|
||||
<input type="search" name="claim_no" placeholder="Claim #"
|
||||
inputmode="numeric" aria-label="Claim number">
|
||||
<button type="submit">Find</button>
|
||||
<b>Find a claim</b>
|
||||
<div class="find">
|
||||
<input type="search" name="claim_no" placeholder="Claim #"
|
||||
inputmode="numeric" aria-label="Claim number">
|
||||
<button type="submit">Find</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% if not has_runs %}
|
||||
@@ -113,6 +198,33 @@
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
<script>
|
||||
(() => {
|
||||
// Last 7 days: each bar as tall as its day's claims, its parts as its
|
||||
// counts; today's numbers count up once (skipped when motion is off).
|
||||
const calm = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
const cols = [...document.querySelectorAll('.week .col')];
|
||||
const top = Math.max(1, ...cols.map(c => Number(c.dataset.n) || 0));
|
||||
cols.forEach(c => c.querySelectorAll('i').forEach(i => {
|
||||
i.style.flexGrow = Number(i.dataset.n) || 0;
|
||||
}));
|
||||
cols.forEach(c => {
|
||||
// 75% at most: the count above and the day below share the height.
|
||||
c.style.height = Math.max(3, 75 * (Number(c.dataset.n) || 0) / top) + '%';
|
||||
});
|
||||
if (calm) return;
|
||||
document.querySelectorAll('.tile .n').forEach(el => {
|
||||
const to = Number(el.textContent) || 0, t0 = performance.now();
|
||||
if (!to) return;
|
||||
const step = t => {
|
||||
const p = Math.min((t - t0) / 700, 1);
|
||||
el.textContent = Math.round(to * (1 - Math.pow(1 - p, 3)));
|
||||
if (p < 1) requestAnimationFrame(step);
|
||||
};
|
||||
requestAnimationFrame(step);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(() => {
|
||||
const token = document.querySelector('meta[name="run-token"]').content;
|
||||
// A Viewer sees the run, but gets no Start / Stop (the server refuses
|
||||
|
||||
Reference in new issue
Block a user