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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user