egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement comprehensive mobile experience framework for entire application

Browse Source
This commit is contained in:
Eric Gullickson
2025-07-27 21:03:06 -05:00
parent f46d471453
commit ea055f1c38
20 changed files with 713 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
MOBILE.md Normal file
View File

@@ -0,0 +1,185 @@
# Mobile Experience Improvement Plan for Add Fuel Record Screen
## Analysis Summary
The current add fuel record screen has significant mobile UX issues that create pain points for users on mobile devices. The interface feels like a shrunken desktop version rather than a mobile-first experience.
## Critical Mobile UX Issues Identified
### 1. Modal Size and Viewport Problems
- Uses Bootstrap's default modal sizing without mobile optimization
- No mobile-specific modal sizing classes or responsive adjustments
- **File Location**: `/Views/Vehicle/Gas/_GasModal.cshtml`
### 2. Touch Target Size Issues
- Small "+" button for odometer increment (44px minimum not met)
- Small close button in header
- Form switch toggles too small for reliable touch interaction
- **File Locations**:
- `/Views/Vehicle/Gas/_GasModal.cshtml` (lines 69, 99, 51, 48, 106, 110)
### 3. Dense Two-Column Layout Problems
- Advanced mode uses `col-md-6` layout creating cramped display
- Fields become too narrow for comfortable text input
- Second column with file upload becomes nearly unusable
- **File Location**: `/Views/Vehicle/Gas/_GasModal.cshtml` (lines 59, 139)
### 4. Complex Header Layout on Mobile
- Modal header contains multiple elements in cramped flex layout
- Toggle labels may wrap or get cut off
- Mode switch becomes hard to understand and use
- **File Location**: `/Views/Vehicle/Gas/_GasModal.cshtml` (lines 44-53)
### 5. Input Field Accessibility Issues
- Decimal inputs with custom key interceptors interfere with mobile keyboards
- Multi-select dropdown for tags difficult on mobile
- File upload interface unusable in narrow mobile view
- **File Locations**:
- `/Views/Vehicle/Gas/_GasModal.cshtml` (lines 74, 103, 117, 127, 130-135)
- `/wwwroot/js/gasrecord.js`
### 6. Modal Footer Button Layout
- Multiple buttons including conditional "Delete" button create touch conflicts
- Risk of accidental deletion or difficulty reaching primary action
- **File Location**: `/Views/Vehicle/Gas/_GasModal.cshtml` (line 155)
### 7. Form Mode Switching UX
- Simple/Advanced mode toggle jarring on mobile
- Content suddenly appears/disappears
- Users might not understand mode switching capability
- **File Location**: `/wwwroot/js/gasrecord.js` (lines 509-536)
### 8. Keyboard and Input Mode Issues
- Mixed input types with custom JavaScript key handlers
- Mobile keyboards may not behave predictably
- **File Locations**:
- `/Views/Vehicle/Gas/_GasModal.cshtml`
- `/wwwroot/js/gasrecord.js`
### 9. Date Picker Mobile Issues
- Bootstrap datepicker doesn't provide optimal mobile experience
- Native mobile date pickers would be better
- **File Location**: `/wwwroot/js/gasrecord.js` (lines 6, 29)
### 10. No Progressive Enhancement for Mobile
- No mobile-specific CSS classes or touch-friendly spacing
- No mobile-optimized layouts
- **File Locations**:
- `/wwwroot/css/site.css`
- `/Views/Vehicle/Gas/_GasModal.cshtml`
## Mobile Experience Improvement Plan
### Priority 1: Critical Mobile UX Fixes
#### 1. Mobile-First Modal Design
- Implement full-screen modal on mobile devices
- Add slide-up animation for native app feel
- Create mobile-specific modal header with simplified layout
- **Files to Modify**:
- `/Views/Vehicle/Gas/_GasModal.cshtml`
- `/wwwroot/css/site.css`
- `/wwwroot/js/gasrecord.js`
#### 2. Touch Target Optimization
- Increase all interactive elements to minimum 44px
- Add larger padding around buttons and form controls
- Implement touch-friendly spacing between elements
- **Files to Modify**:
- `/Views/Vehicle/Gas/_GasModal.cshtml`
- `/wwwroot/css/site.css`
#### 3. Single-Column Mobile Layout
- Force single-column layout on mobile regardless of mode
- Stack all form fields vertically with proper spacing
- Move file upload and notes to dedicated sections
- **Files to Modify**:
- `/Views/Vehicle/Gas/_GasModal.cshtml`
- `/wwwroot/css/site.css`
### Priority 2: Input and Interaction Improvements
#### 4. Mobile-Optimized Inputs
- Replace Bootstrap datepicker with native HTML5 date input on mobile
- Simplify tag selection with mobile-friendly chip input
- Improve number input keyboards with proper `inputmode` attributes
- **Files to Modify**:
- `/Views/Vehicle/Gas/_GasModal.cshtml`
- `/wwwroot/js/gasrecord.js`
#### 5. Form Mode Simplification
- Default to Simple mode on mobile
- Make mode toggle more prominent and clear
- Add smooth transitions between modes
- **Files to Modify**:
- `/Views/Vehicle/Gas/_GasModal.cshtml`
- `/wwwroot/js/gasrecord.js`
- `/Controllers/Vehicle/GasController.cs`
### Priority 3: Enhanced Mobile Features
#### 6. Bottom Sheet Pattern
- Implement native-style bottom sheet for mobile
- Add swipe-to-dismiss gesture
- Include pull handle for better UX
- **Files to Modify**:
- `/Views/Vehicle/Gas/_GasModal.cshtml`
- `/wwwroot/css/site.css`
- `/wwwroot/js/gasrecord.js`
#### 7. Mobile-Specific CSS Improvements
- Add mobile breakpoint styles
- Implement proper touch feedback
- Optimize form field sizing for mobile keyboards
- **Files to Modify**:
- `/wwwroot/css/site.css`
#### 8. Progressive Enhancement
- Add mobile detection for conditional features
- Implement haptic feedback where supported
- Add mobile-specific validation styling
- **Files to Modify**:
- `/wwwroot/js/gasrecord.js`
- `/wwwroot/js/shared.js`
- `/Views/Shared/_Layout.cshtml`
## Implementation Strategy
### Phase 1: Modal and Layout Fixes (Priority 1 items)
- Focus on making the most impactful changes first
- Ensure mobile modal feels native and intuitive
- Implement proper touch targets and single-column layout
### Phase 2: Input Optimizations (Priority 2 items)
- Optimize form inputs for mobile interaction
- Simplify complex form elements
- Improve mode switching experience
### Phase 3: Advanced Mobile Features (Priority 3 items)
- Add sophisticated mobile interaction patterns
- Implement progressive enhancement
- Add mobile-specific features and feedback
## Key Files for Mobile Improvements
### Primary Files:
- `/Views/Vehicle/Gas/_GasModal.cshtml` - Main modal template
- `/wwwroot/js/gasrecord.js` - Modal behavior and form handling
- `/wwwroot/css/site.css` - Styling and responsive design
### Supporting Files:
- `/Controllers/Vehicle/GasController.cs` - Server-side logic
- `/Views/Shared/_Layout.cshtml` - Global mobile configuration
- `/wwwroot/js/shared.js` - Shared JavaScript utilities
## Success Metrics
- Touch target compliance (minimum 44px)
- Single-column layout on mobile breakpoints
- Native mobile input patterns
- Improved task completion rates on mobile
- Reduced user friction and abandonment
## Notes
This plan maintains existing functionality while transforming the mobile experience from a desktop-centric interface to a mobile-first, touch-optimized experience that feels native and intuitive on mobile devices.