|
32 | 32 | z-index: 10; |
33 | 33 | min-width: 180px; |
34 | 34 | backdrop-filter: blur(6px); |
| 35 | + transition: transform 0.3s ease; |
| 36 | + } |
| 37 | + #info-panel.collapsed { |
| 38 | + transform: translateX(calc(100% + 12px)); |
| 39 | + } |
| 40 | + @media (max-width: 768px) { |
| 41 | + #info-panel { |
| 42 | + max-width: 240px; |
| 43 | + font-size: 12px; |
| 44 | + padding: 12px 14px; |
| 45 | + top: 8px; |
| 46 | + right: 8px; |
| 47 | + } |
| 48 | + #info-panel h3 { |
| 49 | + font-size: 14px; |
| 50 | + } |
35 | 51 | } |
36 | 52 | #info-panel h3 { |
37 | 53 | margin: 0 0 6px 0; |
|
245 | 261 | font-size: 0.72rem; |
246 | 262 | color: #9ca3af; |
247 | 263 | } |
| 264 | + #panel-toggle { |
| 265 | + position: absolute; |
| 266 | + top: 12px; |
| 267 | + right: 12px; |
| 268 | + background: rgba(20, 20, 30, 0.85); |
| 269 | + color: #e5e7eb; |
| 270 | + border: 1px solid rgba(255,255,255,0.2); |
| 271 | + border-radius: 6px; |
| 272 | + width: 40px; |
| 273 | + height: 40px; |
| 274 | + cursor: pointer; |
| 275 | + z-index: 9; |
| 276 | + backdrop-filter: blur(6px); |
| 277 | + font-size: 20px; |
| 278 | + line-height: 1; |
| 279 | + display: none; |
| 280 | + align-items: center; |
| 281 | + justify-content: center; |
| 282 | + transition: all 0.2s; |
| 283 | + } |
| 284 | + #panel-toggle:hover { |
| 285 | + background: rgba(30, 30, 40, 0.95); |
| 286 | + border-color: rgba(255,255,255,0.3); |
| 287 | + } |
| 288 | + #panel-toggle:active { |
| 289 | + transform: scale(0.95); |
| 290 | + } |
| 291 | + #panel-toggle.visible { |
| 292 | + display: flex; |
| 293 | + } |
| 294 | + @media (max-width: 768px) { |
| 295 | + #panel-toggle { |
| 296 | + top: 8px; |
| 297 | + right: 8px; |
| 298 | + width: 36px; |
| 299 | + height: 36px; |
| 300 | + font-size: 18px; |
| 301 | + } |
| 302 | + } |
248 | 303 | </style> |
249 | 304 | </head> |
250 | 305 | <body> |
251 | 306 | <div id="map"></div> |
| 307 | + <button id="panel-toggle" title="Toggle info panel">☰</button> |
252 | 308 | <div id="info-panel"> |
253 | 309 | <h3>Where the Plow</h3> |
254 | 310 | <a href="/docs">API Documentation</a> |
@@ -302,6 +358,29 @@ <h3>Where the Plow</h3> |
302 | 358 | </div> |
303 | 359 | </div> |
304 | 360 | <script> |
| 361 | + // Panel toggle functionality |
| 362 | + const panelToggle = document.getElementById('panel-toggle'); |
| 363 | + const infoPanel = document.getElementById('info-panel'); |
| 364 | + |
| 365 | + panelToggle.addEventListener('click', () => { |
| 366 | + const isCollapsed = infoPanel.classList.toggle('collapsed'); |
| 367 | + panelToggle.textContent = isCollapsed ? '☰' : '✕'; |
| 368 | + panelToggle.classList.toggle('visible', true); // Keep button visible |
| 369 | + }); |
| 370 | + |
| 371 | + // Show toggle button on mobile or when panel is collapsed |
| 372 | + function updatePanelToggleVisibility() { |
| 373 | + const isMobile = window.innerWidth <= 768; |
| 374 | + if (isMobile) { |
| 375 | + panelToggle.classList.add('visible'); |
| 376 | + } else if (!infoPanel.classList.contains('collapsed')) { |
| 377 | + panelToggle.classList.remove('visible'); |
| 378 | + } |
| 379 | + } |
| 380 | + |
| 381 | + updatePanelToggleVisibility(); |
| 382 | + window.addEventListener('resize', updatePanelToggleVisibility); |
| 383 | + |
305 | 384 | const map = new maplibregl.Map({ |
306 | 385 | container: 'map', |
307 | 386 | style: 'https://tiles.openfreemap.org/styles/liberty', |
|
0 commit comments