Implement comprehensive mobile experience improvements for Add Fuel Record screen

- Add mobile-first modal design with full-screen layout and slide-up animation
- Optimize touch targets to minimum 44px with proper spacing
- Convert to single-column mobile layout stacking all form fields vertically
- Replace Bootstrap datepicker with native HTML5 date input on mobile
- Simplify tag selection with mobile-friendly chip input and touch targets
- Default to Simple mode on mobile with clear mode toggle
- Implement bottom sheet pattern with swipe-to-dismiss gesture
- Add mobile-specific CSS with touch feedback and proper breakpoints
- Implement progressive enhancement with mobile detection utilities

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2025-07-27 20:42:30 -05:00
parent 47536f7e22
commit f46d471453
3 changed files with 426 additions and 15 deletions

View File

@@ -56,7 +56,7 @@
<form>
<div class="form-group">
<div class="row">
<div class="col-md-6 col-12">
<div class="col-md-6 col-12 mobile-single-column">
<input type="text" id="workAroundInput" style="height:0px; width:0px; display:none;">
<!-- Simple Mode Fields -->
<div id="simpleModeFields" style="@(useSimpleFuelEntry ? "" : "display:none;")">
@@ -136,7 +136,7 @@
@await Html.PartialAsync("_ExtraField", Model.GasRecord.ExtraFields)
</div>
</div>
<div class="col-md-6 col-12" id="secondColumnFields" style="@(useSimpleFuelEntry ? "display:none;" : "")">
<div class="col-md-6 col-12 mobile-single-column" id="secondColumnFields" style="@(useSimpleFuelEntry ? "display:none;" : "")">
<label for="gasRecordNotes">@translator.Translate(userLanguage,"Notes(optional)")<a class="link-underline link-underline-opacity-0" onclick="showLinks(this)"><i class="bi bi-markdown ms-2"></i></a></label>
<textarea id="gasRecordNotes" class="form-control" rows="5">@Model.GasRecord.Notes</textarea>
<div>