mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-04-26 17:27:59 +00:00
mobile: hide feed+legend, show LCD, fix rotation with visualViewport + forced height recalc
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user