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

Implement comprehensive mobile experience improvements for Add Fuel Record screen

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

149
wwwroot/js/gasrecord.js
View File

@@ -1,11 +1,133 @@
// Mobile detection utility
function isMobileDevice() {
return window.matchMedia("(max-width: 768px)").matches ||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
// Initialize form inputs based on device type
function initializeFormInputs() {
if (isMobileDevice()) {
// Convert date input to native HTML5 on mobile
var dateInput = $('#gasRecordDate');
if (dateInput.length) {
dateInput.attr('type', 'date');
dateInput.removeClass('datepicker'); // Remove Bootstrap datepicker class
}
// Default to simple mode on mobile
var modeToggle = $('#fuelEntryModeToggle');
if (modeToggle.length && !modeToggle.is(':checked')) {
modeToggle.prop('checked', true);
toggleFuelEntryMode(true);
}
// Initialize mobile-friendly tag selector
initMobileTagSelector($("#gasRecordTag"));
} else {
// Use Bootstrap datepicker on desktop
initDatePicker($('#gasRecordDate'));
// Use standard tag selector on desktop
initTagSelector($("#gasRecordTag"));
}
}
// Mobile-optimized tag selector
function initMobileTagSelector(input) {
if (input.length) {
// Initialize with mobile-friendly options
input.tagsinput({
maxTags: 5, // Limit tags on mobile
trimValue: true,
confirmKeys: [13, 44, 32], // Enter, comma, space
focusClass: 'focus',
freeInput: true
});
// Add mobile-specific styling
input.parent().addClass('mobile-tag-input');
// Increase touch target size for mobile
input.parent().find('.bootstrap-tagsinput').css({
'min-height': '44px',
'padding': '8px',
'font-size': '16px' // Prevent zoom on iOS
});
// Style the input within tags
input.parent().find('.bootstrap-tagsinput input').css({
'font-size': '16px',
'min-height': '30px'
});
}
}
// Swipe to dismiss functionality for mobile modals
function initSwipeToDismiss() {
if (!isMobileDevice()) return;
var modal = $('#gasRecordModal');
var modalContent = modal.find('.modal-content');
var startY = 0;
var currentY = 0;
var isDragging = false;
var threshold = 100; // Minimum swipe distance to dismiss
// Touch start
modalContent.on('touchstart', function(e) {
startY = e.originalEvent.touches[0].clientY;
isDragging = true;
modalContent.css('transition', 'none');
});
// Touch move
modalContent.on('touchmove', function(e) {
if (!isDragging) return;
currentY = e.originalEvent.touches[0].clientY;
var deltaY = currentY - startY;
// Only allow downward swipes
if (deltaY > 0) {
modalContent.css('transform', `translateY(${deltaY}px)`);
}
});
// Touch end
modalContent.on('touchend', function(e) {
if (!isDragging) return;
isDragging = false;
var deltaY = currentY - startY;
modalContent.css('transition', 'transform 0.3s ease-out');
if (deltaY > threshold) {
// Dismiss modal
modalContent.css('transform', 'translateY(100%)');
setTimeout(function() {
hideAddGasRecordModal();
modalContent.css('transform', '');
}, 300);
} else {
// Snap back
modalContent.css('transform', '');
}
});
}
function showAddGasRecordModal() {
$.get(`/Vehicle/GetAddGasRecordPartialView?vehicleId=${GetVehicleId().vehicleId}`, function (data) {
if (data) {
$("#gasRecordModalContent").html(data);
//initiate datepicker
initDatePicker($('#gasRecordDate'));
initTagSelector($("#gasRecordTag"));
// Initialize inputs based on device type
initializeFormInputs();
$('#gasRecordModal').modal('show');
// Initialize swipe to dismiss for mobile
initSwipeToDismiss();
}
});
}
@@ -25,11 +147,16 @@ function showEditGasRecordModal(gasRecordId, nocache) {
$.get(`/Vehicle/GetGasRecordForEditById?gasRecordId=${gasRecordId}`, function (data) {
if (data) {
$("#gasRecordModalContent").html(data);
//initiate datepicker
initDatePicker($('#gasRecordDate'));
initTagSelector($("#gasRecordTag"));
// Initialize inputs based on device type
initializeFormInputs();
$('#gasRecordModal').modal('show');
bindModalInputChanges('gasRecordModal');
// Initialize swipe to dismiss for mobile
initSwipeToDismiss();
$('#gasRecordModal').off('shown.bs.modal').on('shown.bs.modal', function () {
if (getGlobalConfig().useMarkDown) {
toggleMarkDownOverlay("gasRecordNotes");
@@ -441,10 +568,14 @@ function editMultipleGasRecords(ids) {
$.post('/Vehicle/GetGasRecordsEditModal', { recordIds: ids }, function (data) {
if (data) {
$("#gasRecordModalContent").html(data);
//initiate datepicker
initDatePicker($('#gasRecordDate'));
initTagSelector($("#gasRecordTag"));
// Initialize inputs based on device type
initializeFormInputs();
$('#gasRecordModal').modal('show');
// Initialize swipe to dismiss for mobile
initSwipeToDismiss();
}
});
}