fix: collapse additional-stations list by default; no scroll-jump on station click
CI/CD Pipeline - Northern Thailand Ping River Monitor / Test Suite (3.11) (push) Failing after 23s
CI/CD Pipeline - Northern Thailand Ping River Monitor / Build Docker Image (push) Skipped
CI/CD Pipeline - Northern Thailand Ping River Monitor / Integration Test with Services (push) Skipped
CI/CD Pipeline - Northern Thailand Ping River Monitor / Deploy to Staging (push) Skipped
CI/CD Pipeline - Northern Thailand Ping River Monitor / Deploy to Production (push) Skipped
CI/CD Pipeline - Northern Thailand Ping River Monitor / Performance Test (push) Skipped
CI/CD Pipeline - Northern Thailand Ping River Monitor / Code Quality (push) Successful in 13s
CI/CD Pipeline - Northern Thailand Ping River Monitor / Cleanup (push) Successful in 1s

The 97-row ThaiWater/HII list was starving the RID flow list down to one
visible row. The section header is now a click/keyboard toggle (collapsed
by default, arrow indicator); searching auto-expands it so hidden
stations stay findable, and the flow list keeps a 280px minimum when
both are open. Selecting a station no longer scrollIntoViews the
history card.
This commit is contained in:
2026-08-11 16:15:34 +07:00
parent e27d418a1a
commit df31de092b
+17 -4
View File
@@ -89,7 +89,10 @@
.side-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--border); } .side-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
.side-head h2 { margin: 0; font-size: 1rem; } .side-head h2 { margin: 0; font-size: 1rem; }
.side-head p { margin: 5px 0 0; color: var(--muted); font-size: .75rem; } .side-head p { margin: 5px 0 0; color: var(--muted); font-size: .75rem; }
.station-list { overflow-y: auto; padding: 7px; } .station-list { overflow-y: auto; padding: 7px; min-height: 0; }
/* The RID flow list keeps at least ~5 rows even with the sensor list expanded */
#river-flow { flex: 1 1 auto; min-height: 280px; }
#thaiwater-sensors { flex: 1 1 auto; }
.station-row { .station-row {
width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; align-items: center;
padding: 11px; border: 0; border-radius: 12px; box-shadow: none; text-align: left; background: transparent; padding: 11px; border: 0; border-radius: 12px; box-shadow: none; text-align: left; background: transparent;
@@ -238,8 +241,8 @@
<input type="search" id="station-search" placeholder="Search stations · code, name, river…" aria-label="Search stations" style="margin-top:10px;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:white;font-size:.8rem"> <input type="search" id="station-search" placeholder="Search stations · code, name, river…" aria-label="Search stations" style="margin-top:10px;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:white;font-size:.8rem">
</div> </div>
<div class="station-list" id="river-flow" aria-live="polite"></div> <div class="station-list" id="river-flow" aria-live="polite"></div>
<div class="side-head"><h2>Additional basin stations</h2><p id="thaiwater-count">Loading ThaiWater/HII stations…</p></div> <div class="side-head" id="sensors-head" style="cursor:pointer" role="button" tabindex="0" title="Show / hide the ThaiWater/HII station list"><h2>Additional basin stations <span id="sensors-arrow" style="color:var(--muted);font-size:.8rem"></span></h2><p id="thaiwater-count">Loading ThaiWater/HII stations…</p></div>
<div class="station-list" id="thaiwater-sensors" aria-live="polite"></div> <div class="station-list" id="thaiwater-sensors" aria-live="polite" style="display:none"></div>
</aside> </aside>
</section> </section>
@@ -619,16 +622,22 @@
}] }]
}); });
$('history-status').textContent = rows.length ? `${rows.length} measurements${sampled.length !== rows.length ? ` (${sampled.length} daily averages)` : ''}` : 'No measurements in this period'; $('history-status').textContent = rows.length ? `${rows.length} measurements${sampled.length !== rows.length ? ` (${sampled.length} daily averages)` : ''}` : 'No measurements in this period';
$('history-card').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} catch (error) { } catch (error) {
$('history-status').textContent = `History unavailable: ${error.message}`; $('history-status').textContent = `History unavailable: ${error.message}`;
} }
} }
function setSensorsOpen(open) {
state.sensorsOpen = open;
$('thaiwater-sensors').style.display = open ? '' : 'none';
$('sensors-arrow').textContent = open ? '▾' : '▸';
}
// Filters both station lists by any text on the row (code, names, river — // Filters both station lists by any text on the row (code, names, river —
// Thai included, since it matches against the rendered text). // Thai included, since it matches against the rendered text).
function applyStationSearch() { function applyStationSearch() {
const query = $('station-search').value.trim().toLowerCase(); const query = $('station-search').value.trim().toLowerCase();
if (query && !state.sensorsOpen) setSensorsOpen(true); // search reaches hidden stations
['river-flow', 'thaiwater-sensors'].forEach((id) => { ['river-flow', 'thaiwater-sensors'].forEach((id) => {
[...$(id).children].forEach((row) => { [...$(id).children].forEach((row) => {
row.style.display = !query || row.textContent.toLowerCase().includes(query) ? '' : 'none'; row.style.display = !query || row.textContent.toLowerCase().includes(query) ? '' : 'none';
@@ -1174,6 +1183,10 @@
: `Show all ${count} station forecasts ▾`; : `Show all ${count} station forecasts ▾`;
}); });
$('station-search').addEventListener('input', applyStationSearch); $('station-search').addEventListener('input', applyStationSearch);
$('sensors-head').addEventListener('click', () => setSensorsOpen(!state.sensorsOpen));
$('sensors-head').addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setSensorsOpen(!state.sensorsOpen); }
});
$('rain-toggle').addEventListener('change', (event) => { $('rain-toggle').addEventListener('change', (event) => {
if (!state.rainLayer) return; if (!state.rainLayer) return;
if (event.target.checked) state.rainLayer.addTo(state.map); if (event.target.checked) state.rainLayer.addTo(state.map);