gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

5.1.1

Browse Source 
Tidy simple view card spacing and locations.
Make simple view fonts bigger
Fix quick view memory
This commit is contained in:
fraxle
2026-08-16 09:40:54 +01:00
parent df3ecdae35
commit ff8a9950f4
2 changed files with 65 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+37 -17
View File
@@ -371,12 +371,18 @@ export function UTCIForecast() {
}, []);
const [simpleTemp, setSimpleTemp] = useState('utciAdj');
// Skips the very first run so a page refresh keeps the saved Simple /
// Table / Detailed choice — the profile-driven jump to the table below
// is meant for an actual profile *switch*, not for restoring state.
const profileViewFirstRun = useRef(true);
useEffect(() => {
if (activeProfile === 'vehicle' || (activeProfile === 'outdoors' && outdoorsVariant === 'driver')) setSimpleTemp('vehicleT');
else if (activeProfile === 'home' || (activeProfile === 'outdoors' && outdoorsVariant === 'office')) setSimpleTemp(indoorManaged ? 'managedT' : 'indoorT');
else if (activeProfile === 'pets') setSimpleTemp('furSurfaceT');
else setSimpleTemp('utciAdj');
if (['alltemps', 'showall', 'custom', 'farming', 'construction', 'market', 'windowcleaning', 'office'].includes(activeProfile)) {
if (profileViewFirstRun.current) {
profileViewFirstRun.current = false;
} else if (['alltemps', 'showall', 'custom', 'farming', 'construction', 'market', 'windowcleaning', 'office'].includes(activeProfile)) {
setForecastView('table');
}
}, [activeProfile, outdoorsVariant]);
@@ -639,15 +645,18 @@ export function UTCIForecast() {
// The grid is measured in HALF-hour tracks, because a card centred on its
// landing hour starts on a half-hour boundary. All tracks are identical,
// and each card SPANS 2*bucket of them (rather than sitting in one track
// at width:400%) — spanning divides a card's intrinsic width across the
// tracks it covers, so the grid's max-content width stays close to what
// it was and mobile doesn't gain a load of extra horizontal scroll.
// at width:400%). The card itself is a fixed width centred in that span,
// so a longer bucket buys spacing between cards rather than a fatter card.
//
// tracks = [ pad ][ hour 0 ][ hour 1 ] … [ hour H-1 ][ pad ]
// pad = bucket half-hours (>= the (bucket-1)/2 h overhang, + breathing room)
// hour j -> centre at (bucket + 2j + 1) / total
// card -> spans 2*bucket tracks, starting one half-hour after 2j
// => centre = 2j + 1 + bucket == hour j's centre ✓
// Quick-view card width, and the minimum clearance between two cards. Kept
// here rather than only in CSS because the grid track sizing is derived from
// them; .fsc-card sets the same width.
const FSC_CARD_W = 92, FSC_CARD_GAP = 4;
const fscPlot = (() => {
if (!tableRows.length) return null;
const cards = tableRows.length;
@@ -660,10 +669,16 @@ export function UTCIForecast() {
const landing = [];
let j = 0;
for (const r of tableRows) { landing.push(j); j += r.isoHours ? r.isoHours.length : 1; }
// A card spans 2*bucket tracks, so this keeps its 55px minimum.
const unit = 55 / (2 * bucket);
// Every card is a fixed FSC_CARD_W wide at every interval (see .fsc-card),
// centred in the 2*bucket tracks it spans. So the tracks only have to be
// wide enough that neighbouring cards clear each other: a span of at least
// card + gutter. At 1h that is the tight case; at 3h/4h the same rule
// leaves a wider gap between cards, which is what the extra hours per card
// should look like. The 1fr half of the minmax lets the gaps grow further
// on a wide screen — the cards never do.
const unit = (FSC_CARD_W + FSC_CARD_GAP) / (2 * bucket);
return {
hourly, hours, bucket, landing,
hours, bucket, landing,
cols: `repeat(${total}, minmax(${unit.toFixed(2)}px, 1fr))`,
// Fraction of the track width at which hour j's data point sits.
hourAt: j2 => (bucket + 2 * j2 + 1) / total,
@@ -1349,20 +1364,25 @@ export function UTCIForecast() {
${(() => {
if (!fscPlot) return null;
const fscSvgW = 1000, fscSvgH = 80;
const fscSrc = fscPlot.hourly;
// The curve plots the SAME rows the cards do. It used to plot the
// raw hourly series instead, which agrees with the cards at 1h and
// diverges at every longer interval: a card shows its bucket's
// aggregate, so an "8am 24°" card (the 8–11am mean) sat above a
// curve drawn at 8am's own 14.5°, and its connector pointed at a
// height the card never claimed. One series, one number.
const fscSrc = tableRows;
// Fixed scale: bottom = Freezing band bottom (−10) − 10, top = Danger start (44) + 10
const fscMin = -15, fscMax = 45;
const toY = t => fscSvgH - ((t - fscMin) / (fscMax - fscMin)) * fscSvgH;
const getT = r => r[simpleTemp] ?? r.utciAdj;
// Same hour->x mapping the cards grid uses (see fscPlot above), so a
// card's centre and its hour's data point are the same x by
// construction — every hour of the day stays on screen.
const fscHourX = j => fscPlot.hourAt(j) * fscSvgW;
const fscStopPct = j => (fscPlot.hourAt(j) * 100).toFixed(1);
const fscAllPts = fscSrc.map((r, j) => ({ x: fscHourX(j), y: toY(getT(r)) }));
// Connector points — one per card, planted on its landing hour's data
// point, which is exactly where that card is centred.
const fscPts = fscPlot.landing.map(j => fscAllPts[Math.min(j, fscAllPts.length - 1)]);
// x of card i — the landing hour it is centred on, via the same
// mapping that placed the card in the grid, so a point and its
// card share an x by construction.
const fscCardX = i => fscPlot.hourAt(fscPlot.landing[i]) * fscSvgW;
const fscStopPct = i => (fscPlot.hourAt(fscPlot.landing[i]) * 100).toFixed(1);
const fscAllPts = fscSrc.map((r, i) => ({ x: fscCardX(i), y: toY(getT(r)) }));
// One point per card now, so the connectors ARE the data points.
const fscPts = fscAllPts;
const fscNowFlags = tableRows.map(r => r.isoHours ? r.isoHours.includes(nowLocalISO) : r.iso.slice(0, 13) === nowLocalISO);
// Flat runs from each edge into the first/last hour, so the fill still
// covers the inset spacer strips at both ends.