5.0.2
Fix rotated table layout issues
This commit is contained in:
fraxle
+37
-19
@@ -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"
|
||||
|
||||
@@ -732,8 +732,6 @@ export function useAppState() {
|
||||
const bodyScrollRef = useRef(null);
|
||||
const bodyTableRef = useRef(null);
|
||||
const tableWrapRef = useRef(null);
|
||||
// The rotated orientation's single scroll pane (scrolls in both axes).
|
||||
const rotatedScrollRef = useRef(null);
|
||||
|
||||
// ── 7. COLUMN POPUP + TABLE SCROLL ───────────────────────────────────
|
||||
const {
|
||||
@@ -753,7 +751,6 @@ export function useAppState() {
|
||||
handleBodyScroll,
|
||||
} = useTableScroll({
|
||||
headTableRef, bodyTableRef, bodyScrollRef, headTrackRef, tableWrapRef,
|
||||
rotatedScrollRef,
|
||||
forecast, visibleCols, selectedDay, skinType, vehicleType,
|
||||
indoorMode, indoorManaged, showDecimals, showUnits,
|
||||
// The rotated table is a single table with CSS-only sticky edges, so
|
||||
@@ -910,7 +907,7 @@ export function useAppState() {
|
||||
forecastView, setForecastView,
|
||||
// table refs
|
||||
headStickyRef, headTrackRef, headTableRef,
|
||||
bodyScrollRef, bodyTableRef, tableWrapRef, rotatedScrollRef,
|
||||
bodyScrollRef, bodyTableRef, tableWrapRef,
|
||||
// column popup
|
||||
colPopup, colPopupRef,
|
||||
handleThClick, handleThEnter, handleThLeave,
|
||||
|
||||
@@ -28,7 +28,6 @@ export function useTableScroll({
|
||||
headTableRef,
|
||||
bodyTableRef,
|
||||
bodyScrollRef,
|
||||
rotatedScrollRef,
|
||||
headTrackRef,
|
||||
tableWrapRef,
|
||||
forecast,
|
||||
@@ -40,11 +39,10 @@ export function useTableScroll({
|
||||
indoorManaged,
|
||||
showDecimals,
|
||||
showUnits,
|
||||
// When the table is rotated it renders as ONE table whose sticky header
|
||||
// row and sticky metric column are handled entirely in CSS. There is no
|
||||
// second table to keep in step, so the width-sync and scroll-indicator
|
||||
// effects short-circuit — but drag-to-scroll still applies, just to the
|
||||
// rotated pane (which scrolls in both axes) instead of the body table.
|
||||
// Rotated only changes what the head/body tables CONTAIN (hours across
|
||||
// the top instead of metrics), not the structure — both orientations
|
||||
// are a sticky header table over a horizontally scrolling body table.
|
||||
// It is a dependency purely so the widths re-sync on the flip.
|
||||
rotated = false,
|
||||
}) {
|
||||
// --- SCROLL INDICATORS ---------------------------------------------
|
||||
@@ -60,27 +58,20 @@ export function useTableScroll({
|
||||
|
||||
// --- DRAG-TO-SCROLL ------------------------------------------------
|
||||
useEffect(() => {
|
||||
// Whichever element is actually the scroller in the current
|
||||
// orientation. Rotated, it scrolls vertically too, so the drag
|
||||
// follows both axes.
|
||||
const el = rotated ? (rotatedScrollRef && rotatedScrollRef.current) : bodyScrollRef.current;
|
||||
const el = bodyScrollRef.current;
|
||||
if (!el) return;
|
||||
let isDown = false;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let startScroll = 0;
|
||||
let startScrollTop = 0;
|
||||
|
||||
const onMouseDown = (e) => {
|
||||
// Only act on clicks that land inside the scroller
|
||||
// Only act on clicks that land inside the body scroller
|
||||
if (!el.contains(e.target)) return;
|
||||
if (e.button !== 0) return;
|
||||
if (e.target.closest('button, a, input, select')) return;
|
||||
isDown = true;
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
startScroll = el.scrollLeft;
|
||||
startScrollTop = el.scrollTop;
|
||||
el.style.cursor = 'grabbing';
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.style.webkitUserSelect = 'none';
|
||||
@@ -89,7 +80,6 @@ export function useTableScroll({
|
||||
if (!isDown) return;
|
||||
const dx = e.clientX - startX;
|
||||
el.scrollLeft = startScroll - dx;
|
||||
if (rotated) el.scrollTop = startScrollTop - (e.clientY - startY);
|
||||
};
|
||||
const onMouseUp = () => {
|
||||
if (!isDown) return;
|
||||
@@ -118,13 +108,6 @@ export function useTableScroll({
|
||||
|
||||
// Update indicators after layout sync (columns may have changed width)
|
||||
useEffect(() => {
|
||||
if (rotated) {
|
||||
// Nothing is scrolling under our control — clear the fades so they
|
||||
// don't linger over the rotated table.
|
||||
setTableCanScrollLeft(false);
|
||||
setTableCanScrollRight(false);
|
||||
return;
|
||||
}
|
||||
updateTableScrollIndicators();
|
||||
}, [forecast, visibleCols, selectedDay, rotated]);
|
||||
|
||||
@@ -151,12 +134,25 @@ export function useTableScroll({
|
||||
// "shrink-to-fit then distribute" strategy. See the comments inside
|
||||
// sync() for the algorithm.
|
||||
useLayoutEffect(() => {
|
||||
if (rotated) return;
|
||||
const sync = () => {
|
||||
const headTable = headTableRef.current;
|
||||
const bodyTable = bodyTableRef.current;
|
||||
const bodyScroll = bodyScrollRef.current;
|
||||
if (!headTable || !bodyTable || !bodyScroll) return;
|
||||
if (!bodyTable || !bodyScroll) return;
|
||||
|
||||
// Rotated renders a SINGLE table, so there is no head table and
|
||||
// nothing to keep in step. The scroll-fade still needs to know how
|
||||
// wide the pinned column is, though — and it can't be assumed from
|
||||
// CSS, because auto layout widens that column to fit the longest
|
||||
// metric name. Measure it, then stop.
|
||||
if (!headTable) {
|
||||
const firstCell = bodyTable.querySelector('tbody tr > *');
|
||||
if (firstCell && tableWrapRef && tableWrapRef.current) {
|
||||
const w = Math.round(firstCell.getBoundingClientRect().width);
|
||||
tableWrapRef.current.style.setProperty('--hour-col-w', `${w}px`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const bodyRow = bodyTable.querySelector('tbody tr');
|
||||
const headRow = headTable.querySelector('thead tr:last-child');
|
||||
if (!bodyRow || !headRow) return;
|
||||
|
||||
Reference in New Issue
Block a user