Phase 23: UI redesign — responsive mobile + desktop layout

- Replace SB Admin 2 sidebar with a clean fixed sidebar (desktop) and a sticky bottom tab navigation (mobile, ≤767px) - Sidebar collapses to icon-only mode with state persisted in localStorage - Logo is a functional home link on all viewports - Mobile: full-width content, bottom nav replaces sidebar - Dashboard: 6 OBD stat cards (status, speed, RPM, coolant, throttle, fuel) wired to live socket events; removed all placeholder buttons/dropdowns - GPS info section cleaned up (lat/lon display instead of X/Y paragraphs) - DTC page: live /api/dtc wiring — MIL indicator + DTC table populated from API - New /api/dtc route added to app.py (mil + codes) - yaris.js: added obd_coolant_temp / obd_fuel_level / obd_throttle listeners - yaris.css: full rewrite — layout variables, sidebar, bottom nav, OBD cards, border-start utilities, mobile padding for bottom nav Co-authored-by: Copilot <[email protected]>
2026-08-09 22:57:12 -04:00
parent cdb032b888
commit 7edea446c5
7 changed files with 589 additions and 288 deletions
@@ -1,76 +1,30 @@
-(function() {
-  "use strict"; // Start of use strict
+(function () {
+    'use strict';

-  var sidebar = document.querySelector('.sidebar');
-  var sidebarToggles = document.querySelectorAll('#sidebarToggle, #sidebarToggleTop');
-  
-  if (sidebar) {
-    
-    var collapseEl = sidebar.querySelector('.collapse');
-    var collapseElementList = [].slice.call(document.querySelectorAll('.sidebar .collapse'))
-    var sidebarCollapseList = collapseElementList.map(function (collapseEl) {
-      return new bootstrap.Collapse(collapseEl, { toggle: false });
-    });
+    const COLLAPSED_KEY = 'sidebar-collapsed';
+    const sidebar = document.getElementById('app-sidebar');
+    const contentWrapper = document.getElementById('content-wrapper');
+    const toggleBtn = document.getElementById('sidebarToggle');

-    for (var toggle of sidebarToggles) {
+    if (!sidebar) return;

-      // Toggle the side navigation
-      toggle.addEventListener('click', function(e) {
-        document.body.classList.toggle('sidebar-toggled');
-        sidebar.classList.toggle('toggled');
-
-        if (sidebar.classList.contains('toggled')) {
-          for (var bsCollapse of sidebarCollapseList) {
-            bsCollapse.hide();
-          }
-        };
-      });
+    function applyCollapsed(collapsed) {
+        sidebar.classList.toggle('collapsed', collapsed);
+        contentWrapper.classList.toggle('sidebar-collapsed', collapsed);
+        const icon = toggleBtn && toggleBtn.querySelector('i');
+        if (icon) {
+            icon.className = collapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-left';
+        }
    }

-    // Close any open menu accordions when window is resized below 768px
-    window.addEventListener('resize', function() {
-      var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    // Restore saved state
+    applyCollapsed(localStorage.getItem(COLLAPSED_KEY) === '1');

-      if (vw < 768) {
-        for (var bsCollapse of sidebarCollapseList) {
-          bsCollapse.hide();
-        }
-      };
-    });
-  }
-
-  // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
-  
-  var fixedNaigation = document.querySelector('body.fixed-nav .sidebar');
-  
-  if (fixedNaigation) {
-    fixedNaigation.on('mousewheel DOMMouseScroll wheel', function(e) {
-      var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-
-      if (vw > 768) {
-        var e0 = e.originalEvent,
-          delta = e0.wheelDelta || -e0.detail;
-        this.scrollTop += (delta < 0 ? 1 : -1) * 30;
-        e.preventDefault();
-      }
-    });
-  }
-
-  var scrollToTop = document.querySelector('.scroll-to-top');
-  
-  if (scrollToTop) {
-    
-    // Scroll to top button appear
-    window.addEventListener('scroll', function() {
-      var scrollDistance = window.pageYOffset;
-
-      //check if user is scrolling up
-      if (scrollDistance > 100) {
-        scrollToTop.style.display = 'block';
-      } else {
-        scrollToTop.style.display = 'none';
-      }
-    });
-  }
-
-})(); // End of use strict
+    if (toggleBtn) {
+        toggleBtn.addEventListener('click', function () {
+            const nowCollapsed = !sidebar.classList.contains('collapsed');
+            applyCollapsed(nowCollapsed);
+            localStorage.setItem(COLLAPSED_KEY, nowCollapsed ? '1' : '0');
+        });
+    }
+})();