Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions

Lift crowded "Moderate" label in the precip strip (#61)

Browse source 
On narrow screens the single-word "Moderate" label sits between the two-line
"Light–Mod" and "Mod–Heavy" labels; its centered box is wider than the column
and spilled over their first line. Tag each rain column with its tier key and
nudge the "Moderate" (wet-5) label up into the empty gap above to clear it.
This commit is contained in:
Emi Griffith 2026-07-11 15:26:29 -07:00 committed by GitHub
parent f4109f9ede
commit cfc8cd0b92
2 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/calendar.js
View file

@ -543,9 +543,12 @@ function renderTotals(visible) {
const classes = days.map((r) => r.precip && r.precip.c).filter(Boolean);
// Dry days scale independently of the rain-intensity buckets (wet) so a big dry
// count doesn't crush the rain bars — and vice versa.
// Index 4 carries the rain-tier key (e.g. "wet-5") so a single crowded label —
// "Moderate", wedged between the two-line "Light–Mod"/"Mod–Heavy" — can be nudged
// in CSS without brittle text matching.
buckets = [["Dry", drynessColor(7), classes.filter((c) => c === "dry").length, "dry"]]
.concat(SCALE_RAIN.map((t) =>
[t.label, PRECIP_COLORS[t.c], classes.filter((c) => c === t.c).length, "wet"]));
[t.label, PRECIP_COLORS[t.c], classes.filter((c) => c === t.c).length, "wet", t.c]));
title = "rain intensity";
} else {
const classes = days
@ -600,12 +603,12 @@ function renderTotals(visible) {
const maxByGroup = {};
for (const b of buckets) maxByGroup[b[3]] = Math.max(maxByGroup[b[3]] || 1, b[2]);
const LINE_MAX = 30; // px — height of the tallest category in its group
const cols = buckets.map(([label, color, n, group]) => {
const cols = buckets.map(([label, color, n, group, cls]) => {
const h = !n ? 0 : Math.max(2, Math.round(LINE_MAX * n / maxByGroup[group]));
const line = h ? `<span class="ct-line" style="height:${h}px"></span>` : "";
// Caption stacks the category name over its value; the name reserves two lines
// so the value figures stay aligned across columns whether a name wraps or not.
return `<div class="ct-col" style="--c:${color}" ` +
return `<div class="ct-col${cls ? ` ct-${cls}` : ""}" style="--c:${color}" ` +
`title="${label} · ${pctText(n, group)} (${n})">` +
`<span class="ct-cap"><span class="ct-label">${label}</span>` +
`<span class="ct-num${n ? "" : " ct-num-zero"}">${valText(n, group)}</span></span>` +

4
static/style.css
View file

@ -743,6 +743,10 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
min-height: 2.2em; font-size: 10px; line-height: 1.1; font-weight: 600;
color: var(--muted); text-align: center; overflow: hidden;
}
/* "Moderate" is a wide single word (can't wrap) sandwiched between the two-line
"Light–Mod"/"Mod–Heavy" labels, so on narrow screens its centered box spills over
their first line. Lift it into the empty gap above to clear the collision. */
.ct-wet-5 .ct-label { transform: translateY(-0.85em); }
.ct-num {
font-size: 12px; font-weight: 700; line-height: 1;
color: color-mix(in oklab, var(--c, var(--muted)), var(--text) 40%);