small adjustments buttons
This commit is contained in:
@@ -205,13 +205,18 @@
|
||||
{@const maxStyle = getTempStyle(tempMax, String(units.temperature_unit))}
|
||||
{@const lowPrecip = !precipIsSignificant(precipSum, String(units.precipitation_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)}
|
||||
<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
|
||||
? '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-current={isToday ? 'date' : undefined}
|
||||
onclick={() => onSelectDay(time, index)}
|
||||
>
|
||||
<!-- weekday drifts to the left edge and the date fades in at the
|
||||
@@ -231,9 +236,11 @@
|
||||
</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>
|
||||
|
||||
<!-- 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 */
|
||||
--cell-w-min: var(--cell-h-min);
|
||||
--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-min: 2px;
|
||||
--gap-full: 8px;
|
||||
--gap-min: 4px;
|
||||
/* bar (strip-row) vertical padding */
|
||||
--pad-full: 8px;
|
||||
--pad-min: 8px;
|
||||
--pad-min: 5px;
|
||||
/* fonts */
|
||||
--dow-font-full: 11px;
|
||||
--dow-font-min: 11px;
|
||||
@@ -450,9 +459,11 @@
|
||||
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) */
|
||||
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-min: 8px;
|
||||
--pb-min: 0px;
|
||||
/* extra scrub distance beyond the height difference — slows the collapse
|
||||
down; the surplus just slides content under the (opaque) bar */
|
||||
--collapse-extra: 0px;
|
||||
@@ -473,11 +484,11 @@
|
||||
--cell-h-full: 208px;
|
||||
--cell-h-min: 56px;
|
||||
--icon-full: 80px;
|
||||
--icon-min: 22px;
|
||||
--icon-min: 24px;
|
||||
--pt-full: 10px;
|
||||
--gap-full: 10px;
|
||||
--gap-min: 6px;
|
||||
--pad-min: 4px;
|
||||
--pad-min: 3px;
|
||||
--dow-font-full: 13px;
|
||||
--dow-font-min: 10px;
|
||||
--rel-font-full: 11px;
|
||||
@@ -490,7 +501,8 @@
|
||||
--day-icon-nudge: 3px;
|
||||
--night-icon-nudge: 6px;
|
||||
--pb-full: 10px;
|
||||
--pb-min: 5px;
|
||||
--pb-min: 3px;
|
||||
--icon-lift: 0px;
|
||||
--collapse-extra: 60px;
|
||||
}
|
||||
.daystrip {
|
||||
@@ -682,6 +694,10 @@
|
||||
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))));
|
||||
/* 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 {
|
||||
/* tuck the icon into its line box: the glyphs carry generous built-in
|
||||
|
||||
Reference in New Issue
Block a user