small adjustments buttons
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user