mobile: hide feed+legend, show LCD, fix rotation with visualViewport + forced height recalc

This commit is contained in:
you
2026-03-19 23:47:43 +00:00
parent c97ff6da1f
commit cab926b7fa
3 changed files with 27 additions and 15 deletions

View File

@@ -22,7 +22,7 @@
<meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
<link rel="stylesheet" href="style.css?v=1773963867">
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="live.css?v=1773963867">
<link rel="stylesheet" href="live.css?v=1773964063">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin="anonymous">
@@ -84,7 +84,7 @@
<script src="nodes.js?v=1773961950" onerror="console.error('Failed to load:', this.src)"></script>
<script src="traces.js?v=1774079160" onerror="console.error('Failed to load:', this.src)"></script>
<script src="analytics.js?v=1773961035" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1773963867" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1773964063" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observers.js?v=1774079160" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1773961276" onerror="console.error('Failed to load:', this.src)"></script>
</body>

View File

@@ -254,12 +254,10 @@
/* ---- Responsive ---- */
@media (max-width: 640px) {
.live-feed { width: calc(100vw - 24px); max-height: 40vh; }
/* Legend: hidden by default on mobile, toggle button shows it */
.live-feed { display: none !important; }
.feed-show-btn { display: none !important; }
.live-legend { display: none !important; }
.live-legend.legend-mobile-visible { display: flex !important; }
.legend-toggle-btn { display: block !important; }
/* Header: compact on mobile */
.legend-toggle-btn { display: none !important; }
.live-header {
flex-wrap: wrap; gap: 6px; padding: 6px 10px;
top: 56px; left: 8px; right: 8px; max-width: calc(100vw - 16px);
@@ -268,7 +266,6 @@
.live-stat-pill { font-size: 11px; padding: 2px 7px; }
.live-toggles { font-size: 10px; gap: 6px; margin-left: 0; }
.live-title { font-size: 12px; letter-spacing: 1px; }
/* Feed detail card as bottom sheet on mobile (#61) */
.feed-detail-card {
position: fixed !important;
right: 0 !important;
@@ -622,11 +619,11 @@
/* Mobile VCR */
@media (max-width: 640px) {
.vcr-bar { padding: 4px 6px; overflow: hidden; flex-wrap: nowrap; }
.vcr-bar { padding: 4px 6px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; }
.vcr-btn { padding: 6px 8px; font-size: 0.8rem; min-height: 44px; min-width: 44px; }
.vcr-scope-btns { gap: 1px; }
.vcr-scope-btn { font-size: 0.65rem; padding: 4px 6px; min-height: 36px; }
.vcr-lcd { display: none; }
.vcr-lcd { display: flex; }
.vcr-mode { font-size: 0.65rem; padding: 2px 6px; }
.vcr-timeline-container { min-width: 60px; }
.vcr-prompt { font-size: 0.7rem; }

View File

@@ -64,14 +64,25 @@
let resizeTimer = null;
_onResize = function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => { if (map) map.invalidateSize({ animate: false }); }, 150);
resizeTimer = setTimeout(() => {
if (map) {
// Force container size recalc
const page = document.querySelector('.live-page');
if (page) { page.style.height = window.innerHeight + 'px'; }
map.invalidateSize({ animate: false });
}
}, 150);
};
window.addEventListener('resize', _onResize);
window.addEventListener('orientationchange', () => {
setTimeout(_onResize, 200);
setTimeout(_onResize, 600);
setTimeout(_onResize, 1200);
setTimeout(_onResize, 100);
setTimeout(_onResize, 400);
setTimeout(_onResize, 800);
setTimeout(_onResize, 1500);
});
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', _onResize);
}
}
// === VCR Controls ===
@@ -1442,7 +1453,11 @@
if (_rateCounterInterval) { clearInterval(_rateCounterInterval); _rateCounterInterval = null; }
if (ws) { ws.onclose = null; ws.close(); ws = null; }
if (map) { map.remove(); map = null; }
if (_onResize) { window.removeEventListener('resize', _onResize); window.removeEventListener('orientationchange', _onResize); }
if (_onResize) {
window.removeEventListener('resize', _onResize);
window.removeEventListener('orientationchange', _onResize);
if (window.visualViewport) window.visualViewport.removeEventListener('resize', _onResize);
}
const topNav = document.querySelector('.top-nav');
if (topNav) { topNav.classList.remove('nav-autohide'); topNav.style.position = ''; topNav.style.width = ''; topNav.style.zIndex = ''; }
if (_navCleanup) {