gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3.5.8.1

Browse Source 
Add more labels for the day tabs
This commit is contained in:
Fraxle
2026-07-29 18:35:45 +01:00
parent 1acadb7519
commit f356954f40
6 changed files with 220 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/components/DayTabs.js
+21 -10
View File
@@ -204,14 +204,21 @@ 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). */''}
${/* Fixed label column outside the scroller — names every stacked row
in each tab (day name, date, icon, then the two numbers, since
which metrics those are changes with the active profile). Mirrors
the tabs' own top-down layout row for row (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>`}
<span class="utci-day-legend-day">Day</span>
<span class="utci-day-legend-date">Date</span>
<span class="utci-day-legend-icon">${isHomeOrOffice ? 'Home' : isVehicleProfile ? 'Alert' : 'Sky'}</span>
<div class="utci-day-legend-values">
<span class="utci-day-legend-main" title=${mainMetricDesc}>${mainMetricLabel}</span>
${(isVehicleProfile || secondaryField) && html`
<span class="utci-day-legend-sep" aria-hidden="true"></span>
<span class="utci-day-legend-sec" title=${secondaryMetricDesc}>${secondaryMetricLabel}</span>`}
</div>
</div>
<div class="utci-day-tabs" ref=${dayTabsRef}>
${days.map((d, i) => {
@@ -378,7 +385,7 @@ export function DayTabs({
>
${locked && html`
<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.75 }}>🔒</span>`}
${dayName}
<span class="utci-day-name">${dayName}</span>
<span class="utci-day-date" style=${{ color: '#5a3f24' }}>
${dDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' })}
</span>
@@ -410,12 +417,16 @@ export function DayTabs({
}}>
<span style=${{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1px' }}>
<span style=${{ color: '#c0622a', fontWeight: 800, fontSize: '14px', lineHeight: 1.1 }}>${dayHi}°</span>
${shadeHi !== null && html`<span style=${{ color: '#c0622a', fontWeight: 600, fontSize: '11px', lineHeight: 1.1 }}>${shadeHi}°</span>`}
${shadeHi !== null && html`
<span style=${{ width: '10px', height: '1px', background: 'rgba(0,0,0,0.15)', margin: '1px 0' }}></span>
<span style=${{ color: '#c0622a', fontWeight: 600, fontSize: '11px', lineHeight: 1.1 }}>${shadeHi}°</span>`}
</span>
<span style=${{ width: '1px', background: 'rgba(0,0,0,0.15)', margin: '2px 0', alignSelf: 'stretch' }}></span>
<span style=${{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1px' }}>
<span style=${{ color: '#3a6080', fontWeight: 800, fontSize: '14px', lineHeight: 1.1 }}>${dayLo}°</span>
${shadeLo !== null && html`<span style=${{ color: '#3a6080', fontWeight: 600, fontSize: '11px', lineHeight: 1.1 }}>${shadeLo}°</span>`}
${shadeLo !== null && html`
<span style=${{ width: '10px', height: '1px', background: 'rgba(0,0,0,0.15)', margin: '1px 0' }}></span>
<span style=${{ color: '#3a6080', fontWeight: 600, fontSize: '11px', lineHeight: 1.1 }}>${shadeLo}°</span>`}
</span>
</span>`}
</button>`;