diff --git a/app.js b/app.js index dd39f39..0b138fe 100644 --- a/app.js +++ b/app.js @@ -154,6 +154,10 @@ document.querySelectorAll('.tool-btn').forEach(btn => { // Clear sum selections when switching tools if (toolId !== 'sumTool') { clearSumSelections(); + // Hide sum display when switching away from sum tool + if (sumDisplay) { + sumDisplay.style.display = 'none'; + } } else { showSumDisplay(); } @@ -1468,7 +1472,7 @@ function updateSumDisplay() { function showSumDisplay() { if (!sumDisplay) { - sumDisplay = document.getElementById('rulerDisplay'); + sumDisplay = document.getElementById('sumDisplay'); } sumDisplay.style.display = 'block'; updateSumDisplay(); @@ -1958,3 +1962,40 @@ document.addEventListener('keydown', (e) => { location.reload(); } }, true); + +// Mobile sidebar toggle functionality +document.addEventListener('DOMContentLoaded', () => { + const sidebarToggle = document.getElementById('sidebarToggle'); + const toolbar = document.querySelector('.toolbar'); + const overlay = document.getElementById('sidebarOverlay'); + + function toggleSidebar() { + toolbar.classList.toggle('open'); + overlay.classList.toggle('show'); + } + + function closeSidebar() { + toolbar.classList.remove('open'); + overlay.classList.remove('show'); + } + + // Toggle sidebar when button is clicked + sidebarToggle.addEventListener('click', toggleSidebar); + + // Close sidebar when overlay is clicked + overlay.addEventListener('click', closeSidebar); + + // Close sidebar when escape key is pressed (on mobile) + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && window.innerWidth <= 768 && toolbar.classList.contains('open')) { + closeSidebar(); + } + }); + + // Close sidebar when window is resized to desktop size + window.addEventListener('resize', () => { + if (window.innerWidth > 768) { + closeSidebar(); + } + }); +}); diff --git a/index.html b/index.html index 734127f..0e13dc6 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,8 @@
+ +

Tools

@@ -65,6 +67,7 @@
+
diff --git a/styles.css b/styles.css index bfa8938..1ce0837 100644 --- a/styles.css +++ b/styles.css @@ -119,6 +119,20 @@ body { pointer-events: none; } +.sum-display { + position: absolute; + top: 10px; + left: 10px; + background: rgba(0, 0, 0, 0.8); + color: white; + padding: 10px 15px; + border-radius: 4px; + font-size: 14px; + z-index: 1000; + pointer-events: none; + display: none; +} + #nodeCount { font-size: 12px; } @@ -159,3 +173,71 @@ body { .node-marker { z-index: 1000 !important; } + +/* Sidebar toggle button */ +.sidebar-toggle { + display: none; + position: fixed; + top: 15px; + left: 15px; + z-index: 2000; + background: #2c3e50; + color: white; + border: none; + padding: 12px; + font-size: 18px; + border-radius: 5px; + cursor: pointer; + box-shadow: 0 2px 10px rgba(0,0,0,0.3); +} + +.sidebar-toggle:hover { + background: #34495e; +} + +/* Mobile styles */ +@media (max-width: 768px) { + .sidebar-toggle { + display: block; + } + + .toolbar { + position: fixed; + left: -250px; + top: 0; + height: 100vh; + transition: left 0.3s ease; + z-index: 1500; + box-shadow: 2px 0 10px rgba(0,0,0,0.3); + } + + .toolbar.open { + left: 0; + } + + .map-container { + width: 100%; + } + + /* Adjust sum display position on mobile to avoid toggle button */ + .sum-display { + top: 70px; + left: 10px; + } + + /* Overlay when sidebar is open */ + .sidebar-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.5); + z-index: 1400; + } + + .sidebar-overlay.show { + display: block; + } +}