small adjustments buttons

This commit is contained in:
Vincent van der Wal
2026-08-01 13:05:27 +02:00
parent d3b223cbb5
commit 792da49cac
@@ -205,13 +205,18 @@
{@const maxStyle = getTempStyle(tempMax, String(units.temperature_unit))} {@const maxStyle = getTempStyle(tempMax, String(units.temperature_unit))}
{@const lowPrecip = !precipIsSignificant(precipSum, String(units.precipitation_unit))} {@const lowPrecip = !precipIsSignificant(precipSum, String(units.precipitation_unit))}
{@const lowWind = !windIsSignificant(windMax, gustMax, String(units.wind_speed_unit))} {@const lowWind = !windIsSignificant(windMax, gustMax, String(units.wind_speed_unit))}
{@const relLabel = getRelativeDayLabel(time, daily.timezone)}
{@const isToday = relLabel === 'Today'}
{#if tempMax != null && !isNaN(tempMax) && !(tempMax === 0 && tempMin === 0)} {#if tempMax != null && !isNaN(tempMax) && !(tempMax === 0 && tempMin === 0)}
<button <button
type="button" type="button"
class="strip-cell flex shrink-0 cursor-pointer flex-col items-center justify-start gap-0.5 rounded-xl border px-1 {selected class="strip-cell flex shrink-0 cursor-pointer flex-col items-center justify-start gap-0.5 rounded-xl border px-1 {selected
? 'border-primary bg-primary/10 ring-1 ring-primary/50' ? 'border-primary bg-primary/10 ring-1 ring-primary/50'
: 'border-border/60 bg-card'}" : isToday
? 'today-cell border-primary/35 bg-primary/4'
: 'border-border/60 bg-card'}"
aria-pressed={selected} aria-pressed={selected}
aria-current={isToday ? 'date' : undefined}
onclick={() => onSelectDay(time, index)} onclick={() => onSelectDay(time, index)}
> >
<!-- weekday drifts to the left edge and the date fades in at the <!-- weekday drifts to the left edge and the date fades in at the
@@ -231,9 +236,11 @@
</span> </span>
<span <span
class="rel-label overflow-hidden leading-[1.25] whitespace-nowrap text-muted-foreground" class="rel-label overflow-hidden leading-[1.25] whitespace-nowrap {isToday
? 'font-semibold text-primary/80'
: 'text-muted-foreground'}"
> >
{getRelativeDayLabel(time, daily.timezone)} {relLabel}
</span> </span>
<!-- Two centered rows: day + night icons, then day + night temps. <!-- Two centered rows: day + night icons, then day + night temps.
@@ -419,14 +426,16 @@
docked bar reads as a row of tiles instead of narrow slivers */ docked bar reads as a row of tiles instead of narrow slivers */
--cell-w-min: var(--cell-h-min); --cell-w-min: var(--cell-h-min);
--icon-full: 44px; --icon-full: 44px;
--icon-min: 21px; /* the compact icon carries the square tile: sized so the content fills it
and the leftover slack under the temps stays small */
--icon-min: 27px;
--pt-full: 7px; --pt-full: 7px;
--pt-min: 2px; --pt-min: 2px;
--gap-full: 8px; --gap-full: 8px;
--gap-min: 4px; --gap-min: 4px;
/* bar (strip-row) vertical padding */ /* bar (strip-row) vertical padding */
--pad-full: 8px; --pad-full: 8px;
--pad-min: 8px; --pad-min: 5px;
/* fonts */ /* fonts */
--dow-font-full: 11px; --dow-font-full: 11px;
--dow-font-min: 11px; --dow-font-min: 11px;
@@ -450,9 +459,11 @@
square tile (measured against the tile's mid-line) */ square tile (measured against the tile's mid-line) */
--icon-lift: -1px; --icon-lift: -1px;
/* cell bottom padding (roomy when full, a little breathing room under the /* cell bottom padding (roomy when full, a little breathing room under the
temps when compact so they don't sit on the tile edge) */ temps when compact so they don't sit on the tile edge). The compact
tile is taller than its content here, so the leftover slack already
supplies that gap and the padding stays at zero. */
--pb-full: 6px; --pb-full: 6px;
--pb-min: 8px; --pb-min: 0px;
/* extra scrub distance beyond the height difference — slows the collapse /* extra scrub distance beyond the height difference — slows the collapse
down; the surplus just slides content under the (opaque) bar */ down; the surplus just slides content under the (opaque) bar */
--collapse-extra: 0px; --collapse-extra: 0px;
@@ -473,11 +484,11 @@
--cell-h-full: 208px; --cell-h-full: 208px;
--cell-h-min: 56px; --cell-h-min: 56px;
--icon-full: 80px; --icon-full: 80px;
--icon-min: 22px; --icon-min: 24px;
--pt-full: 10px; --pt-full: 10px;
--gap-full: 10px; --gap-full: 10px;
--gap-min: 6px; --gap-min: 6px;
--pad-min: 4px; --pad-min: 3px;
--dow-font-full: 13px; --dow-font-full: 13px;
--dow-font-min: 10px; --dow-font-min: 10px;
--rel-font-full: 11px; --rel-font-full: 11px;
@@ -490,7 +501,8 @@
--day-icon-nudge: 3px; --day-icon-nudge: 3px;
--night-icon-nudge: 6px; --night-icon-nudge: 6px;
--pb-full: 10px; --pb-full: 10px;
--pb-min: 5px; --pb-min: 3px;
--icon-lift: 0px;
--collapse-extra: 60px; --collapse-extra: 60px;
} }
.daystrip { .daystrip {
@@ -682,6 +694,10 @@
it to sit optically dead centre in the square tile. */ it to sit optically dead centre in the square tile. */
margin-top: calc(var(--icon-gap-full) * var(--k)); margin-top: calc(var(--icon-gap-full) * var(--k));
transform: translateY(calc(-1 * var(--icon-lift) * (1 - var(--k)))); transform: translateY(calc(-1 * var(--icon-lift) * (1 - var(--k))));
/* the compact icon overlaps the temperature badge below it, and reads far
better over that colour than under it */
position: relative;
z-index: 1;
} }
.icon-wrap { .icon-wrap {
/* tuck the icon into its line box: the glyphs carry generous built-in /* tuck the icon into its line box: the glyphs carry generous built-in