Implement mobile-friendly UI

Author: jameson-dev

index.html

@@ -75,13 +75,24 @@ <h2>Welcome to SA Crash Data Map</h2>
 
     <button class="toggle-panel-btn" onclick="togglePanel()" aria-label="Open filters panel">☰ Filters</button>
 
+    <!-- Backdrop: dims the map when the mobile bottom-sheet panel is open.
+         Tapping it calls togglePanel() to close the sheet. -->
+    <div class="mobile-panel-backdrop" onclick="togglePanel()" aria-hidden="true"></div>
+
     <!-- Active Filters Badge -->
     <div class="active-filters-bar" id="activeFiltersBar">
-        <div class="active-filters-bar-header">
+        <div class="active-filters-bar-header"
+             onclick="toggleActiveFiltersBar()"
+             onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleActiveFiltersBar();}"
+             role="button"
+             tabindex="0"
+             aria-expanded="false"
+             aria-controls="activeFiltersContent">
             <span class="active-filters-bar-title">🔍 No filters</span>
+            <span class="active-filters-bar-chevron" aria-hidden="true">▾</span>
         </div>
         <div class="active-filters-bar-content" id="activeFiltersContent">
-            <div class="no-active-filters">Hover to see filter details</div>
+            <div class="no-active-filters">No filters applied</div>
         </div>
     </div>
 
@@ -98,6 +109,9 @@ <h2>Welcome to SA Crash Data Map</h2>
                 <button class="collapse-btn" onclick="togglePanelCollapse()" title="Collapse/Expand">
                     <span id="collapseIcon">▲</span>
                 </button>
+                <!-- Mobile-only: explicit close button since the collapse button
+                     is hidden and the FAB is not visible while the sheet is open -->
+                <button class="mobile-panel-close-btn" onclick="togglePanel()" aria-label="Close filters panel">✕</button>
             </div>
         </div>
 
@@ -292,7 +306,7 @@ <h2>Welcome to SA Crash Data Map</h2>
             <div class="layer-toggle" id="densityToggle" onclick="toggleLayer('density')">
                 <div class="layer-label-container">
                     <span>💠 Point Density</span>
-                    <div class="layer-info-icon" onclick="event.stopPropagation()">
+                    <div class="layer-info-icon" onclick="event.stopPropagation()" tabindex="0" role="button" aria-label="Layer info">
                         ⓘ
                         <div class="layer-info-tooltip">
                             Best viewed on <strong>Dark</strong> basemap
@@ -1334,7 +1348,7 @@ <h3 style="margin: 0 0 20px 0; color: #333; font-size: 20px;">Generating PDF Rep
         </div>
     </div>
 
-    <!-- Footer -->
+    <!-- Footer (hidden on mobile via CSS) -->
     <footer class="page-footer">
         <div class="footer-links">
             <a href="#" onclick="openInfoModal('disclaimerModal'); return false;">Disclaimer</a>

src/js/main.js

@@ -91,6 +91,7 @@ async function setupGlobalHandlers() {
     window.toggleTutorialStep = ui.toggleTutorialStep;
     window.searchTutorial = ui.searchTutorial;
     window.toggleTheme = ui.toggleTheme;
+    window.toggleActiveFiltersBar = ui.toggleActiveFiltersBar;
     window.togglePanel = ui.togglePanel;
     window.togglePanelCollapse = ui.togglePanelCollapse;
     window.toggleDataTable = ui.toggleDataTable;

src/js/ui.js

@@ -101,32 +101,16 @@ function processNotificationQueue() {
     // Calculate position based on existing notifications
     const topPosition = 80 + (activeNotifications.length * 70);
 
-    notification.style.cssText = `
-        position: fixed;
-        top: ${topPosition}px;
-        right: 20px;
-        padding: 12px 20px;
-        border-radius: 8px;
-        background: var(--bg-secondary);
-        border: 1px solid var(--border);
-        box-shadow: var(--shadow-lg);
-        z-index: 10002;
-        font-size: 14px;
-        max-width: 350px;
-        animation: slideInFromRight 0.3s ease-out;
-        transition: top 0.3s ease-out;
-    `;
+    // Static appearance is handled by the .app-notification CSS class so that
+    // the mobile media query can override layout properties (right/left/max-width).
+    // Inline styles here are limited to the two truly dynamic values: vertical
+    // position and type-specific border colour.
+    notification.classList.add('app-notification');
+    notification.style.top = `${topPosition}px`;
 
-    // Add type-specific styling
-    if (type === 'warning') {
-        notification.style.borderLeft = '4px solid #ff9800';
-    } else if (type === 'error') {
-        notification.style.borderLeft = '4px solid #f44336';
-    } else if (type === 'success') {
-        notification.style.borderLeft = '4px solid #4caf50';
-    } else {
-        notification.style.borderLeft = '4px solid #2196f3';
-    }
+    // Type-specific left border colour
+    const borderColors = { warning: '#ff9800', error: '#f44336', success: '#4caf50', info: '#2196f3' };
+    notification.style.borderLeft = `4px solid ${borderColors[type] || borderColors.info}`;
 
     document.body.appendChild(notification);
     activeNotifications.push(notification);
@@ -457,13 +441,37 @@ export function initTheme() {
 // ============================================================================
 
 /**
- * Toggle control panel visibility (for mobile)
+ * Toggle active filters bar expanded state.
+ * On desktop this pins the bar open alongside hover; on mobile (where
+ * :hover doesn't persist) this is the sole expand/collapse mechanism.
+ */
+export function toggleActiveFiltersBar() {
+    const bar = document.getElementById('activeFiltersBar');
+    if (!bar) return;
+    const expanded = bar.classList.toggle('expanded');
+    const header = bar.querySelector('.active-filters-bar-header');
+    if (header) header.setAttribute('aria-expanded', String(expanded));
+}
+
+/**
+ * Toggle control panel visibility (for mobile).
+ * On mobile this shows/hides the bottom-sheet panel. It also:
+ *  - Toggles the backdrop overlay so the map is dimmed while open.
+ *  - Sets data-panel-open on the FAB so CSS can hide it while the sheet is up.
  */
 export function togglePanel() {
     const panel = document.getElementById('controlsPanel');
-    if (panel) {
-        panel.classList.toggle('visible');
-    }
+    if (!panel) return;
+
+    const isOpen = panel.classList.toggle('visible');
+
+    // Show/hide the semi-transparent backdrop behind the bottom sheet
+    const backdrop = document.querySelector('.mobile-panel-backdrop');
+    if (backdrop) backdrop.classList.toggle('active', isOpen);
+
+    // Let CSS know the panel state so the FAB can be hidden while open
+    const fab = document.querySelector('.toggle-panel-btn');
+    if (fab) fab.dataset.panelOpen = isOpen;
 }
 
 /**