3.5.8
Day tab labels
This commit is contained in:
fraxle
+65
-2
@@ -11,9 +11,13 @@
|
||||
/* Wrapper that hosts the scrollable strip, edge fades, and chevrons. */
|
||||
.utci-day-tabs-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #c9b08a;
|
||||
/* Width of the fixed metric-label column; the left fade and left chevron
|
||||
both offset by this so they never sit on top of it. */
|
||||
--day-legend-w: 72px;
|
||||
}
|
||||
|
||||
/* Edge fade gradients — only show when there's content to scroll to. */
|
||||
@@ -30,7 +34,7 @@
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.utci-day-tabs-wrap::before {
|
||||
left: 0;
|
||||
left: var(--day-legend-w);
|
||||
background: linear-gradient(to right, #f5edd6 0%, rgba(245,237,214,0) 100%);
|
||||
}
|
||||
.utci-day-tabs-wrap::after {
|
||||
@@ -66,15 +70,67 @@
|
||||
.utci-day-scroll:hover {
|
||||
background: #fef3dc;
|
||||
}
|
||||
.utci-day-scroll.left { left: -2px; }
|
||||
.utci-day-scroll.left { left: calc(var(--day-legend-w) - 2px); }
|
||||
.utci-day-scroll.right { right: -2px; }
|
||||
.utci-day-scroll.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Fixed first column naming the two numbers stacked in each tab — which
|
||||
metrics those are changes with the active profile (SunSoak/Shade, Indoors/
|
||||
Managed, Fur/Shade, Vehicle/Windows Open), so without this the numbers are
|
||||
unlabelled. Sits outside .utci-day-tabs so it never scrolls away.
|
||||
|
||||
Alignment: .utci-day-tabs stretches every tab to equal height and the
|
||||
numeric block is the last thing in each one, so bottom-aligning this column
|
||||
with matching padding lands the labels on the same lines as the values —
|
||||
no need to replicate the day-name / date / icon stack above them. */
|
||||
.utci-day-legend-col {
|
||||
flex: 0 0 var(--day-legend-w);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
gap: 1px;
|
||||
/* Bottom 11px = the tab's 10px padding + its 1px bottom border. */
|
||||
padding: 10px 6px 11px;
|
||||
background: #fdf8ee;
|
||||
text-align: right;
|
||||
font-family: Manrope, sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Each label matches the weight and colour family of the value beside it, so
|
||||
the big/small pairing reads without a legend. Heights match the value line
|
||||
boxes: 14px x 1.1 and 11px x 1.1 (see the numeric block in DayTabs.js). */
|
||||
.utci-day-legend-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 15px;
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
color: #6b4f2a;
|
||||
}
|
||||
.utci-day-legend-sec {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 12px;
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
color: #9a7d5a;
|
||||
}
|
||||
|
||||
.utci-day-tabs {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
@@ -1039,6 +1095,13 @@
|
||||
.utci-day-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Narrow the metric-label column too, so it costs as little tab width as
|
||||
possible on phones. */
|
||||
.utci-day-tabs-wrap { --day-legend-w: 56px; }
|
||||
.utci-day-legend-col { padding: 10px 4px 11px; letter-spacing: 0.04em; }
|
||||
.utci-day-legend-main { font-size: 8px; }
|
||||
.utci-day-legend-sec { font-size: 7px; }
|
||||
}
|
||||
|
||||
/* The shifted track inside the sticky header — JS sets transform:translate3d
|
||||
|
||||
@@ -133,8 +133,10 @@ export function DayTabs({
|
||||
// full config strip now live in the nav dropdown (ConfigPanel); here we
|
||||
// only need the derived main metric to compute the day-tab numbers and to
|
||||
// label the "what temps am I looking at" row below.
|
||||
const { isHomeOrOffice, isVehicleProfile, mainConfigKey, mainField, secondaryField, mainLabel } =
|
||||
deriveProfileMain(activeProfile, outdoorsVariant);
|
||||
const {
|
||||
isHomeOrOffice, isVehicleProfile, mainConfigKey, mainField, secondaryField, mainLabel,
|
||||
mainMetricLabel, mainMetricDesc, secondaryMetricLabel, secondaryMetricDesc,
|
||||
} = deriveProfileMain(activeProfile, outdoorsVariant);
|
||||
|
||||
// Read-only label of the current main-config value, for the row above the
|
||||
// day tabs — makes it obvious at a glance which temperature basis (SunSoak
|
||||
@@ -202,6 +204,15 @@ export function DayTabs({
|
||||
onClick=${() => scrollDayTabs(1)}
|
||||
aria-label="Scroll days right"
|
||||
type="button">›</button>
|
||||
${/* Fixed label column outside the scroller — names the two stacked
|
||||
numbers in every tab, since which metrics they are changes with
|
||||
the active profile. Bottom-aligned against the tabs' numeric
|
||||
block (see .utci-day-legend-col in table.css). */''}
|
||||
<div class="utci-day-legend-col">
|
||||
<span class="utci-day-legend-main" title=${mainMetricDesc}>${mainMetricLabel}</span>
|
||||
${(isVehicleProfile || secondaryField) && html`
|
||||
<span class="utci-day-legend-sec" title=${secondaryMetricDesc}>${secondaryMetricLabel}</span>`}
|
||||
</div>
|
||||
<div class="utci-day-tabs" ref=${dayTabsRef}>
|
||||
${days.map((d, i) => {
|
||||
const band = confidenceBand(i);
|
||||
|
||||
+21
-1
@@ -192,7 +192,27 @@ export function deriveProfileMain(activeProfile, outdoorsVariant) {
|
||||
const mainLabel = activeProfile === 'outdoors'
|
||||
? (OUTDOORS_VARIANTS[outdoorsVariant]?.name || FILTER_PROFILES.outdoors.label)
|
||||
: (FILTER_PROFILES[activeProfile]?.label || 'SunSoak');
|
||||
return { isHomeOrOffice, isVehicleProfile, isPetsProfile, mainConfigKey, mainField, secondaryField, mainLabel };
|
||||
|
||||
// Human names for the two numbers stacked in each day tab, so the label
|
||||
// column beside the strip can say what they are. Pulled from
|
||||
// COL_DESCRIPTIONS so they never drift from the table column tooltips —
|
||||
// every field matches its column key except utciAdj, whose column is utciP.
|
||||
const colKey = mainField === 'utciAdj' ? 'utciP' : mainField;
|
||||
const mainMetric = COL_DESCRIPTIONS[colKey] || {};
|
||||
// Vehicle/Driver has no secondary column — the small number is a live
|
||||
// re-run of the cabin model with ventilation forced on (see DayTabs).
|
||||
const secondaryMetric = isVehicleProfile
|
||||
? { title: 'Windows Open', desc: 'The same vehicle interior estimate, recalculated with the windows open — how much cooler the cabin would run if it were ventilated.' }
|
||||
: (secondaryField ? (COL_DESCRIPTIONS[secondaryField] || {}) : null);
|
||||
|
||||
return {
|
||||
isHomeOrOffice, isVehicleProfile, isPetsProfile,
|
||||
mainConfigKey, mainField, secondaryField, mainLabel,
|
||||
mainMetricLabel: mainMetric.title || '',
|
||||
mainMetricDesc: mainMetric.desc || '',
|
||||
secondaryMetricLabel: secondaryMetric?.title || '',
|
||||
secondaryMetricDesc: secondaryMetric?.desc || '',
|
||||
};
|
||||
}
|
||||
|
||||
// Emoji glyph per place/activity variant.
|
||||
|
||||
Reference in New Issue
Block a user