sarlink/mapmaker
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix sum overlay and optimze for mobile

Browse Source
This commit is contained in:
Shihaam Abdul Rahman
2025-12-09 01:07:37 +05:00
parent 1a5a1ea23a
commit 2a7c97cc0b
3 changed files with 127 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app.js
View File

@@ -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();
}
});
});

3
index.html
View File

@@ -9,6 +9,8 @@
</head>
<body>
<div class="container">
<button id="sidebarToggle" class="sidebar-toggle">☰</button>
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<div class="toolbar">
<div class="tool-section">
<h3>Tools</h3>
@@ -65,6 +67,7 @@
<div class="map-container">
<div id="map"></div>
<div id="rulerDisplay" class="ruler-display"></div>
<div id="sumDisplay" class="sum-display"></div>
<div id="statsDisplay" class="stats-display"></div>
</div>
</div>

82
styles.css
View File

@@ -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;
}
}