Skip to content

MOBILE_LAYOUT_IMPLEMENTATION.md

Latest commit

 

History

History
145 lines (123 loc) · 5.44 KB

MOBILE_LAYOUT_IMPLEMENTATION.md

File metadata and controls

145 lines (123 loc) · 5.44 KB

Mobile Layout Implementation Summary

Overview

A complete mobile-responsive layout has been added to the PMIS Highway Heatmaps page without modifying the existing desktop layout. The mobile layout provides a card-based interface optimized for touch interactions.

New Files Created

1. src/hooks/useIsMobile.ts

  • Custom React hook to detect mobile viewport
  • Uses 768px (md breakpoint) as the threshold
  • Returns boolean indicating if device is mobile

2. src/components/mobile/Card.tsx

  • Represents a single highway/county data row
  • Layout:
    • Title: Highway + County/District
    • Map button (top-right)
    • Current metric thumbnail (full width)
    • Click thumbnail to open charts view
  • Uses MiniSegmentChart for metric visualization

3. src/components/mobile/ChartsView.tsx

  • Full-screen charts display for mobile
  • Features:
    • Header with back button and "Close All" option
    • Score gauges displayed horizontally (scrollable)
    • Vertically stacked chart cards
    • Individual chart removal
    • Individual score removal within charts
  • Uses the same HeatMapModal components as desktop

4. src/components/mobile/MobileLayout.tsx

  • Main mobile container component
  • Features:
    • Metric selector header with left/right arrows
    • Swipe gestures to switch between metrics (left/right)
    • Scrollable list of Card components
    • Shows one metric at a time across all cards
    • Automatically switches to charts view when user taps a metric
  • Metrics available:
    1. Condition Score
    2. Distress Score
    3. Ride Score
    4. AADT
    5. Maintenance Cost

Modified Files

1. src/app/(app)/general/pmis/highway-heatmaps/page.tsx

Changes:

  • Added useIsMobile hook import
  • Added mobile-specific state:
    • processedData: Array of processed highway/county data
    • segmentDataByHighwayCounty: Map of segment data for charts
    • availableHighways: Set of available highways for map display
    • viewType: County or district view mode
  • Added helper functions:
    • isHighwayAvailable(): Check if highway has map data
    • handleRemoveChart(): Remove a chart by ID
    • handleRemoveScore(): Remove a score from a chart
    • handleMobileMapClick(): Wrapper for mobile map clicks
    • handleMobileChartClick(): Wrapper for mobile chart clicks
  • Conditional rendering:
    • If isMobile === true: Render MobileLayout
    • If isMobile === false: Render desktop layout (unchanged)

2. src/app/(app)/general/pmis/highway-heatmaps/TableModalPMIS.tsx

Changes:

  • Updated interface to accept new optional props:
    • viewType: External control of county/district view
    • setViewType: Callback to update view type
    • onDataProcessed: Callback when data is processed
    • onSegmentDataReady: Callback when segment data is ready
    • onAvailableHighwaysReady: Callback when highway availability data is ready
  • Updated mapModalInfo type to match parent component
  • Internal/external state management for viewType
  • Callbacks invoked when data is ready to share with mobile components

How It Works

Mobile Flow:

  1. User opens page on mobile → useIsMobile() returns true
  2. MobileLayout renders with card list showing first metric (Condition Score)
  3. User swipes left/right → Switches metric shown on all cards
  4. User taps metric thumbnail → Opens ChartsView with chart for that highway/county
  5. User taps map button → Opens map modal (full screen)
  6. ChartsView "Back" button → Returns to card list
  7. ChartsView "Close All" → Closes all charts and returns to card list

Desktop Flow:

  1. User opens page on desktop → useIsMobile() returns false
  2. Desktop layout renders (existing grid-based layout, unchanged)
  3. All existing desktop functionality works as before

Key Features

Touch Optimized:

  • ✅ Large tap targets for buttons
  • ✅ Swipe gestures for metric switching
  • ✅ Full-width cards for easy scrolling
  • ✅ Full-screen charts view

Data Consistency:

  • ✅ Same data source as desktop
  • ✅ Reuses existing chart components
  • ✅ Reuses existing map modal
  • ✅ Same color schemes and categories

Responsive Design:

  • ✅ Breakpoint: 768px (Tailwind 'md')
  • ✅ Automatic layout switching
  • ✅ No desktop code changes needed

Testing Checklist

  • Test on mobile device (< 768px width)
  • Test swipe left/right to change metrics
  • Test tapping metric thumbnail to open charts
  • Test map button functionality
  • Test charts view back button
  • Test charts view close all button
  • Test removing individual charts
  • Test removing individual scores from charts
  • Test on tablet (768px - 1024px) - should show desktop layout
  • Test on desktop (> 1024px) - should show desktop layout
  • Test resizing browser window to trigger layout switch

Future Enhancements

Potential improvements:

  1. Add search functionality to mobile layout
  2. Add sorting options for mobile cards
  3. Add filter by county/district in mobile
  4. Add pagination or virtual scrolling for large datasets
  5. Add pull-to-refresh functionality
  6. Add animations for metric transitions
  7. Add haptic feedback for swipe gestures (on supported devices)

Notes

  • The mobile layout is completely separate from desktop layout
  • No existing desktop functionality has been modified
  • Both layouts share the same data and business logic
  • Mobile layout uses the same color schemes and scoring categories
  • The implementation follows React best practices (hooks, memoization, callbacks)