cloud cover
This commit is contained in:
Vincent van der Wal
@@ -240,7 +240,7 @@
|
||||
Both stay perfectly centered when compact (the night icon melts
|
||||
away and the day icon re-centers on its own); when full, small
|
||||
k-driven nudges line each temp up under its icon. -->
|
||||
<div class="flex w-full items-center justify-center">
|
||||
<div class="icon-row flex w-full items-center justify-center">
|
||||
<div class="icon-wrap">
|
||||
<svg class="day-icon fill-foreground">
|
||||
<use
|
||||
@@ -413,9 +413,11 @@
|
||||
.sentinel,
|
||||
.daystrip {
|
||||
--cell-w-full: 76px;
|
||||
--cell-w-min: 58px;
|
||||
--cell-h-full: 140px;
|
||||
--cell-h-min: 64px;
|
||||
/* collapsed cells are square: the width follows the compact height, so the
|
||||
docked bar reads as a row of tiles instead of narrow slivers */
|
||||
--cell-w-min: var(--cell-h-min);
|
||||
--icon-full: 44px;
|
||||
--icon-min: 21px;
|
||||
--pt-full: 7px;
|
||||
@@ -439,9 +441,18 @@
|
||||
/* full state only: nudge each temp to sit under "its" icon */
|
||||
--tmax-nudge: 0px;
|
||||
--tmin-nudge: 5px;
|
||||
/* cell bottom padding (roomy when full, tight when compact) */
|
||||
/* full state only: gap above the icons, and the day / night icon offsets
|
||||
that tighten the pair around the cell centre */
|
||||
--icon-gap-full: 2px;
|
||||
--day-icon-nudge: 2px;
|
||||
--night-icon-nudge: 4px;
|
||||
/* compact only: signed shift that lands the lone icon dead centre in the
|
||||
square tile (measured against the tile's mid-line) */
|
||||
--icon-lift: -1px;
|
||||
/* cell bottom padding (roomy when full, a little breathing room under the
|
||||
temps when compact so they don't sit on the tile edge) */
|
||||
--pb-full: 6px;
|
||||
--pb-min: 6px;
|
||||
--pb-min: 8px;
|
||||
/* extra scrub distance beyond the height difference — slows the collapse
|
||||
down; the surplus just slides content under the (opaque) bar */
|
||||
--collapse-extra: 0px;
|
||||
@@ -460,7 +471,6 @@
|
||||
.daystrip {
|
||||
--cell-w-full: 120px;
|
||||
--cell-h-full: 208px;
|
||||
--cell-w-min: 64px;
|
||||
--cell-h-min: 56px;
|
||||
--icon-full: 80px;
|
||||
--icon-min: 22px;
|
||||
@@ -476,8 +486,11 @@
|
||||
--tmax-padx-full: 12px;
|
||||
--tmax-nudge: 0px;
|
||||
--tmin-nudge: 8px;
|
||||
--icon-gap-full: 6px;
|
||||
--day-icon-nudge: 3px;
|
||||
--night-icon-nudge: 6px;
|
||||
--pb-full: 10px;
|
||||
--pb-min: 2px;
|
||||
--pb-min: 5px;
|
||||
--collapse-extra: 60px;
|
||||
}
|
||||
.daystrip {
|
||||
@@ -652,6 +665,10 @@
|
||||
width: var(--cell-w);
|
||||
padding-top: var(--pt);
|
||||
padding-bottom: calc(var(--pb-min) + (var(--pb-full) - var(--pb-min)) * var(--k));
|
||||
/* The collapsed rows that shrink to zero height still paid for their flex
|
||||
gap, which pushed the temps onto the tile's bottom edge. Fading the gap
|
||||
out with the collapse gives that space back as real bottom padding. */
|
||||
row-gap: calc(2px * var(--k));
|
||||
}
|
||||
/* Side buttons keep the compact width in BOTH states, so almost nothing to
|
||||
the left of the first day changes size during the collapse — the first
|
||||
@@ -659,6 +676,13 @@
|
||||
.strip-side {
|
||||
width: var(--cell-w-min);
|
||||
}
|
||||
.icon-row {
|
||||
/* full: keep the icons off the weekday / date block above them.
|
||||
compact: the icon is the only thing between the two text rows, so lift
|
||||
it to sit optically dead centre in the square tile. */
|
||||
margin-top: calc(var(--icon-gap-full) * var(--k));
|
||||
transform: translateY(calc(-1 * var(--icon-lift) * (1 - var(--k))));
|
||||
}
|
||||
.icon-wrap {
|
||||
/* tuck the icon into its line box: the glyphs carry generous built-in
|
||||
padding, so pulling the neighbours in keeps the cells tight */
|
||||
@@ -668,6 +692,8 @@
|
||||
display: block;
|
||||
width: var(--icon);
|
||||
height: var(--icon);
|
||||
/* full only: settle the pair a touch right of centre */
|
||||
transform: translateX(calc(var(--day-icon-nudge) * var(--k)));
|
||||
}
|
||||
/* The night icon sits beside the day icon (slightly low, like a companion)
|
||||
and melts away completely when compact so the day icon re-centers. */
|
||||
@@ -678,6 +704,7 @@
|
||||
opacity: var(--rel);
|
||||
margin-left: calc(-4px * var(--rel));
|
||||
margin-bottom: calc(6px * var(--rel));
|
||||
transform: translateX(calc(-1 * var(--night-icon-nudge) * var(--k)));
|
||||
}
|
||||
/* weekday centered when full, pushed to the edges when compact */
|
||||
.dow-row {
|
||||
|
||||
@@ -56,8 +56,10 @@ export interface ChartVariableDef {
|
||||
windArrows?: boolean;
|
||||
/** Marker-only variable (icons / arrows): contributes no plotted series */
|
||||
marker?: boolean;
|
||||
/** Render as a puffy cloud band hanging from the top (0-100 → 0-40px) */
|
||||
/** Render as a soft cloud band instead of a line */
|
||||
cloudBand?: boolean;
|
||||
/** Which slot the band occupies; omitted hangs from the top (total cover) */
|
||||
cloudLayer?: 'high' | 'mid' | 'low';
|
||||
/** Transform raw values before plotting (e.g. m → km) */
|
||||
transform?: (v: number) => number;
|
||||
/** Preset range to use when this variable lands on a shared right axis */
|
||||
@@ -121,6 +123,9 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
|
||||
color: 'rgb(150, 155, 165)',
|
||||
cloudBand: true
|
||||
},
|
||||
// The three layers stack in their real vertical order (high at the top of the
|
||||
// plot, low at the bottom of the band group) and darken towards the ground,
|
||||
// the way the layers actually look from below.
|
||||
{
|
||||
key: 'cloud_cover_low',
|
||||
label: 'Cloud Cover Low',
|
||||
@@ -128,8 +133,9 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
|
||||
field: 'cloud_cover_low',
|
||||
type: 'line',
|
||||
kind: 'percent',
|
||||
color: '#94a3b8',
|
||||
width: 2
|
||||
color: 'rgb(110, 118, 132)',
|
||||
cloudBand: true,
|
||||
cloudLayer: 'low'
|
||||
},
|
||||
{
|
||||
key: 'cloud_cover_mid',
|
||||
@@ -138,8 +144,9 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
|
||||
field: 'cloud_cover_mid',
|
||||
type: 'line',
|
||||
kind: 'percent',
|
||||
color: '#64748b',
|
||||
width: 2
|
||||
color: 'rgb(148, 156, 170)',
|
||||
cloudBand: true,
|
||||
cloudLayer: 'mid'
|
||||
},
|
||||
{
|
||||
key: 'cloud_cover_high',
|
||||
@@ -148,8 +155,9 @@ export const CHART_VARIABLES: ChartVariableDef[] = [
|
||||
field: 'cloud_cover_high',
|
||||
type: 'line',
|
||||
kind: 'percent',
|
||||
color: '#cbd5e1',
|
||||
width: 2
|
||||
color: 'rgb(186, 194, 208)',
|
||||
cloudBand: true,
|
||||
cloudLayer: 'high'
|
||||
},
|
||||
{
|
||||
key: 'precipitation',
|
||||
@@ -475,6 +483,7 @@ export function buildPanelDef(
|
||||
dashed: d.dashed,
|
||||
axis,
|
||||
cloudBand: d.cloudBand,
|
||||
cloudLayer: d.cloudLayer,
|
||||
segmentColor: d.colorScale ? (v: number) => getColor(v, units.temperature_unit) : undefined,
|
||||
foregroundLine: d.foregroundLine,
|
||||
outline: d.outline,
|
||||
|
||||
Reference in New Issue
Block a user