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

5.0.2

Browse Source 
Fix rotated table layout issues
This commit is contained in:
fraxle
2026-08-09 09:47:57 +01:00
parent 1bb870eab3
commit dace65b750
4 changed files with 149 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+37 -19
View File
@@ -235,7 +235,7 @@ export function UTCIForecast() {
utciEnv, setUtciEnv,
tableRotated, toggleTableRotated,
headStickyRef, headTrackRef, headTableRef,
bodyScrollRef, bodyTableRef, tableWrapRef, rotatedScrollRef,
bodyScrollRef, bodyTableRef, tableWrapRef,
colPopup, colPopupRef,
handleThClick, handleThEnter, handleThLeave,
handlePopupEnter, handlePopupLeave,
@@ -1134,6 +1134,20 @@ export function UTCIForecast() {
Detailed
</button>
</span>
${forecastView === 'table' && html`
<button type="button"
class=${'table-rotate-btn' + (tableRotated ? ' on' : '')}
title=${tableRotated ? 'Hours run along the top — click for hours down the side' : 'Hours run down the side — click for hours along the top'}
aria-pressed=${tableRotated ? 'true' : 'false'}
onClick=${toggleTableRotated}>
<svg class="fvt-btn-icon" viewBox="0 0 12 12" width="12" height="12" aria-hidden="true">
<path d="M2.4 6.6a3.7 3.7 0 0 1 6-3.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M9.6 5.4a3.7 3.7 0 0 1-6 3.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.3 1.1l2.4 2.2-2.4 1.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.7 10.9L3.3 8.7l2.4-1.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Rotate
</button>`}
<button
class=${'col-toggles-edit-btn col-toggles-edit-btn--toolbar' + (colTogglesOpen ? ' col-toggles-edit-btn--open' : '') + (isPro ? '' : ' col-toggles-edit-btn--locked')}
title=${isPro ? '' : 'Custom columns are part of SunScope Extra'}
@@ -1144,15 +1158,6 @@ export function UTCIForecast() {
<span class="col-toggles-edit-btn-label">${!isPro ? '🔒 Edit columns' : colTogglesOpen ? 'Hide Columns' : 'Edit columns'}</span>
<svg class="col-toggles-edit-btn-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
</button>
${forecastView === 'table' && html`
<button type="button"
class=${'table-rotate-btn table-rotate-btn--toolbar' + (tableRotated ? ' on' : '')}
title=${tableRotated ? 'Hours run along the top — click for hours down the side' : 'Hours run down the side — click for hours along the top'}
aria-pressed=${tableRotated ? 'true' : 'false'}
onClick=${toggleTableRotated}>
<span class="table-rotate-btn-icon" aria-hidden="true">⭮</span>
<span class="table-rotate-btn-label">Rotate</span>
</button>`}
</span>
${forecastView === 'simple' && (() => {
const showFur = visibleCols.furSurfaceT;
@@ -1420,10 +1425,14 @@ export function UTCIForecast() {
};
// ── ROTATED: hours across the top, metrics down the side ──
// One table, not two: the sticky top row and sticky left
// column are pure CSS here, so none of the head/body width
// syncing in useTableScroll is needed (it is disabled while
// rotated).
// One table, unlike the normal orientation's split pair.
// That split exists purely to let the header stick to the
// viewport while the body scrolls sideways; here the hour
// row deliberately scrolls away with the table, so there is
// nothing to keep in step and no reason to pay for it. The
// metric column still pins on the left — plain CSS sticky,
// which works inside the horizontal scroller.
//
// The key matters: both orientations root at a <div>, so
// without distinct keys Preact diffs one into the other and
// reuses the DOM nodes — carrying over the inline column
@@ -1431,9 +1440,12 @@ export function UTCIForecast() {
// behind, which is what knocks the columns out of
// alignment when you flip back.
if (tableRotated) return html`
<div key="table-rotated" class=${`utci-table-wrap is-rotated${showUnits ? '' : ' no-units'}`}>
<div class="utci-rotated-scroll" ref=${rotatedScrollRef}>
<table class="utci-table utci-table-rotated">
<div key="table-rotated" class=${`utci-table-wrap is-rotated${tableCanScrollLeft ? ' scroll-fade-left' : ''}${tableCanScrollRight ? ' scroll-fade-right' : ''}${showUnits ? '' : ' no-units'}`} ref=${tableWrapRef}>
<span class="utci-scroll-chevron left" aria-hidden="true">‹</span>
<span class="utci-scroll-chevron right" aria-hidden="true">›</span>
<div class="utci-tbody-scroll" ref=${bodyScrollRef}>
<table class="utci-table utci-table-rotated" ref=${bodyTableRef}>
<thead>
<tr>
<th class="rot-corner col-info-th" scope="col"
@@ -1467,9 +1479,15 @@ export function UTCIForecast() {
<${Fragment} key=${d.key}>
${newGroup && html`
<tr class="grp-label-row grp-label-row--rotated">
<th class=${`grp-label grp-label-${newGroup} grp-${newGroup}`} scope="rowgroup" colspan=${tableRows.length + 1}>
<span class="grp-label-pin">${GROUP_LABELS[newGroup]}</span>
<th class=${`grp-label rot-group-label grp-label-${newGroup} grp-${newGroup}`} scope="rowgroup">
${GROUP_LABELS[newGroup]}
</th>
${/* Real cells per hour rather than one spanning cell: a
colspan leaves nothing sitting in the "now" column, so
the brass bracket running down it breaks at every group
divider. These also let the label pin like a metric name. */
tableRows.map(r => html`
<td key=${r.iso} class=${`grp-label-fill grp-${newGroup} ${hourFlags(r).isNow ? 'is-now' : ''}`.trim()}></td>`)}
</tr>`}
<tr class="rot-metric-row">
<th scope="row"