From ea055f1c388de327abe9adfdd262f42a6bdd1c00 Mon Sep 17 00:00:00 2001 From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com> Date: Sun, 27 Jul 2025 21:03:06 -0500 Subject: [PATCH] Implement comprehensive mobile experience framework for entire application --- .DS_Store | Bin 0 -> 6148 bytes .claude/agents/k8s-deployment-architect.md | 48 +++++ .github/workflows/build-and-push-image.yml | 1 - Helper/StaticHelper.cs | 8 +- MOBILE.md | 185 ++++++++++++++++++ .../Collision/_CollisionRecordModal.cshtml | 4 +- .../Reminder/_ReminderRecordModal.cshtml | 4 +- .../Service/_ServiceRecordModal.cshtml | 4 +- Views/Vehicle/Tax/_TaxRecordModal.cshtml | 4 +- .../Upgrade/_UpgradeRecordModal.cshtml | 4 +- Views/Vehicle/_VehicleModal.cshtml | 4 +- wwwroot/css/site.css | 171 ++++++++++++++++ wwwroot/js/collisionrecord.js | 27 ++- wwwroot/js/garage.js | 28 ++- wwwroot/js/gasrecord.js | 146 ++------------ wwwroot/js/reminderrecord.js | 21 +- wwwroot/js/servicerecord.js | 29 ++- wwwroot/js/shared.js | 143 ++++++++++++++ wwwroot/js/taxrecord.js | 29 ++- wwwroot/js/upgraderecord.js | 27 ++- 20 files changed, 713 insertions(+), 174 deletions(-) create mode 100644 .DS_Store create mode 100644 .claude/agents/k8s-deployment-architect.md create mode 100644 MOBILE.md diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5d520d5523541df0cfac5dee571f54b7d85c321f GIT binary patch literal 6148 zcmeHKO-sW-5PhpX6g=3Y7h(T^U<$=+DD~jkAD||=8Hgag=byLl?M%gBZi6&<}0X4-Kn`!b`P-%l9gG?`_`GWrhs~tx}OGhd*vyRVvdc34EJN>zYBh`kXgMnaR%D}mGS33Xi`OC~c@~0`$3kHIL zf5t#s>>hVpew3fBUp`M~ZDxCBlPGSKL7_dl1hAuhContext: User is working on containerizing their MotoVaultPro application for Kubernetes deployment. user: 'I need to create Kubernetes manifests for my ASP.NET Core application that can be deployed with FluxCD' assistant: 'I'll use the k8s-deployment-architect agent to design production-ready Kubernetes manifests with proper high availability patterns and FluxCD integration.' Since the user needs Kubernetes deployment architecture, use the k8s-deployment-architect agent to create maintainable, HA-focused manifests. Context: User wants to review existing Kubernetes configurations for best practices. user: 'Can you review my deployment.yaml and suggest improvements for better availability and maintainability?' assistant: 'Let me use the k8s-deployment-architect agent to analyze your Kubernetes configuration and provide recommendations for high availability and maintainability improvements.' The user is asking for review of Kubernetes configurations, which is exactly what the k8s-deployment-architect agent specializes in. +color: purple +--- + +You are an expert Kubernetes architect specializing in highly available, production-ready deployments with GitOps automation. Your expertise encompasses container orchestration, high availability patterns, and maintainable infrastructure-as-code practices. + +Your primary responsibilities: + +**High Availability Design:** +- Design multi-replica deployments with proper anti-affinity rules +- Implement health checks, readiness probes, and liveness probes +- Configure resource limits, requests, and horizontal pod autoscaling +- Design for graceful shutdowns and zero-downtime deployments +- Implement circuit breakers and retry mechanisms where appropriate + +**Maintainability Focus:** +- Create clear, well-documented YAML manifests with extensive comments +- Use consistent naming conventions and labeling strategies +- Organize configurations into logical, modular files +- Implement configuration management through ConfigMaps and Secrets +- Design for easy debugging and troubleshooting by new team members + +**FluxCD Integration:** +- Structure manifests for GitOps workflows with proper directory organization +- Implement Kustomization files for environment-specific configurations +- Design for automated deployments with proper dependency management +- Include monitoring and alerting configurations for deployment health +- Ensure configurations support rollback and canary deployment strategies + +**Code Quality Standards:** +- Follow Kubernetes best practices and security guidelines +- Implement proper RBAC and security contexts +- Use semantic versioning for container images +- Include comprehensive documentation within manifests +- Design for testability and validation + +**Onboarding Considerations:** +- Create README files explaining the deployment architecture +- Include troubleshooting guides and common operational procedures +- Document environment-specific configurations and requirements +- Provide clear examples and templates for common tasks +- Implement logging and monitoring that aids in understanding system behavior + +When reviewing existing configurations, provide specific, actionable recommendations with explanations of why each change improves availability or maintainability. When creating new configurations, start with the overall architecture and then provide detailed, production-ready manifests. + +Always consider the operational burden on new team members and design solutions that are self-documenting and follow established patterns. Prioritize reliability and clarity over complexity. diff --git a/.github/workflows/build-and-push-image.yml b/.github/workflows/build-and-push-image.yml index bbb40c6..413e0a1 100644 --- a/.github/workflows/build-and-push-image.yml +++ b/.github/workflows/build-and-push-image.yml @@ -38,7 +38,6 @@ jobs: ericgullickson/motovaultpro ghcr.io/ericgullickson/motovaultpro tags: | - type=edge,branch=main type=raw,value=latest,enable={{is_default_branch}} type=ref,event=tag diff --git a/Helper/StaticHelper.cs b/Helper/StaticHelper.cs index 6e0324f..68b8909 100644 --- a/Helper/StaticHelper.cs +++ b/Helper/StaticHelper.cs @@ -24,9 +24,9 @@ namespace MotoVaultPro.Helper public const string GenericErrorMessage = "An error occurred, please try again later"; public const string ReminderEmailTemplate = "defaults/reminderemailtemplate.txt"; public const string DefaultAllowedFileExtensions = ".png,.jpg,.jpeg,.pdf,.xls,.xlsx,.docx"; - public const string SponsorsPath = "https://fbtech.github.io/fbtech/sponsors.json"; - public const string TranslationPath = "https://fbtech.github.io/motovaultpro_translations"; - public const string ReleasePath = "https://api.github.com/repos/fbtech/motovaultpro/releases/latest"; + public const string SponsorsPath = "https://ericgullickson.github.io/ericgullickson/sponsors.json"; + public const string TranslationPath = "https://ericgullickson.github.io/motovaultpro_translations"; + public const string ReleasePath = "https://api.github.com/repos/ericgullickson/motovaultpro/releases/latest"; public const string TranslationDirectoryPath = $"{TranslationPath}/directory.json"; public const string ReportNote = "Report generated by MotoVaultPro, a Free and Open Source Vehicle Maintenance Tracker - MotoVaultPro.com"; public static string GetTitleCaseReminderUrgency(ReminderUrgency input) @@ -315,7 +315,7 @@ namespace MotoVaultPro.Helper Console.WriteLine($"MotoVaultPro {VersionNumber}"); Console.WriteLine("Website: https://motovaultpro.com"); Console.WriteLine("Documentation: https://docs.motovaultpro.com"); - Console.WriteLine("GitHub: https://github.com/fbtech/motovaultpro"); + Console.WriteLine("GitHub: https://github.com/ericgullickson/motovaultpro"); var mailConfig = config.GetSection("MailConfig").Get(); if (mailConfig != null && !string.IsNullOrWhiteSpace(mailConfig.EmailServer)) { diff --git a/MOBILE.md b/MOBILE.md new file mode 100644 index 0000000..3f9b8f4 --- /dev/null +++ b/MOBILE.md @@ -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. \ No newline at end of file diff --git a/Views/Vehicle/Collision/_CollisionRecordModal.cshtml b/Views/Vehicle/Collision/_CollisionRecordModal.cshtml index 2f66bf7..1f395b6 100644 --- a/Views/Vehicle/Collision/_CollisionRecordModal.cshtml +++ b/Views/Vehicle/Collision/_CollisionRecordModal.cshtml @@ -15,7 +15,7 @@
-
+
@@ -54,7 +54,7 @@ @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-
+
@if (isNew) diff --git a/Views/Vehicle/Reminder/_ReminderRecordModal.cshtml b/Views/Vehicle/Reminder/_ReminderRecordModal.cshtml index 67ec51e..b1ac694 100644 --- a/Views/Vehicle/Reminder/_ReminderRecordModal.cshtml +++ b/Views/Vehicle/Reminder/_ReminderRecordModal.cshtml @@ -15,7 +15,7 @@
-
+
@@ -54,7 +54,7 @@ }
-
+
diff --git a/Views/Vehicle/Service/_ServiceRecordModal.cshtml b/Views/Vehicle/Service/_ServiceRecordModal.cshtml index 8a1b0ed..a8467f0 100644 --- a/Views/Vehicle/Service/_ServiceRecordModal.cshtml +++ b/Views/Vehicle/Service/_ServiceRecordModal.cshtml @@ -15,7 +15,7 @@
-
+
@@ -54,7 +54,7 @@ @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-
+
@if (isNew) diff --git a/Views/Vehicle/Tax/_TaxRecordModal.cshtml b/Views/Vehicle/Tax/_TaxRecordModal.cshtml index b5a843f..691218b 100644 --- a/Views/Vehicle/Tax/_TaxRecordModal.cshtml +++ b/Views/Vehicle/Tax/_TaxRecordModal.cshtml @@ -15,7 +15,7 @@
-
+
@@ -43,7 +43,7 @@ @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-
+
diff --git a/Views/Vehicle/Upgrade/_UpgradeRecordModal.cshtml b/Views/Vehicle/Upgrade/_UpgradeRecordModal.cshtml index 92fbb0e..a6c7b46 100644 --- a/Views/Vehicle/Upgrade/_UpgradeRecordModal.cshtml +++ b/Views/Vehicle/Upgrade/_UpgradeRecordModal.cshtml @@ -15,7 +15,7 @@
-
+
@@ -54,7 +54,7 @@ @await Html.PartialAsync("_ExtraField", Model.ExtraFields)
-
+
@if (isNew) diff --git a/Views/Vehicle/_VehicleModal.cshtml b/Views/Vehicle/_VehicleModal.cshtml index be463cf..42d9b04 100644 --- a/Views/Vehicle/_VehicleModal.cshtml +++ b/Views/Vehicle/_VehicleModal.cshtml @@ -27,7 +27,7 @@
-
+
@@ -46,7 +46,7 @@ }
-
+