cphipps/lubelog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made things mobile friendly.

Browse Source
This commit is contained in:
DESKTOP-GENO133\IvanPlex
2024-02-21 12:38:50 -07:00
parent 40f1f1380e
commit 0851e0a222
11 changed files with 117 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Views/Vehicle/_CollisionRecords.cshtml
View File

@@ -68,7 +68,7 @@
<tbody>
@foreach (CollisionRecord collisionRecord in Model)
{
<tr class="d-flex" style="cursor:pointer;" data-rowId="@collisionRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditCollisionRecordModal,@collisionRecord.Id)" data-tags='@string.Join(" ", collisionRecord.Tags)'>
<tr class="d-flex user-select-none" style="cursor:pointer;" ontouchstart="detectRowLongTouch(this)" ontouchend="detectRowTouchEndPremature(this)" data-rowId="@collisionRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditCollisionRecordModal,@collisionRecord.Id)" data-tags='@string.Join(" ", collisionRecord.Tags)'>
<td class="col-2 col-xl-1">@collisionRecord.Date.ToShortDateString()</td>
<td class="col-2">@collisionRecord.Mileage</td>
<td class="col-3 col-xl-4">@collisionRecord.Description</td>

2
Views/Vehicle/_Gas.cshtml
View File

@@ -112,7 +112,7 @@
<tbody>
@foreach (GasRecordViewModel gasRecord in Model.GasRecords)
{
<tr class="d-flex" style="cursor:pointer;" data-rowId="@gasRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditGasRecordModal,@gasRecord.Id)" data-tags='@string.Join(" ", gasRecord.Tags)'>
<tr class="d-flex user-select-none" style="cursor:pointer;" ontouchstart="detectRowLongTouch(this)" ontouchend="detectRowTouchEndPremature(this)" data-rowId="@gasRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditGasRecordModal,@gasRecord.Id)" data-tags='@string.Join(" ", gasRecord.Tags)'>
<td class="col-2">@gasRecord.Date</td>
<td class="col-2" data-gas-type="mileage" data-gas-aggregate="@gasRecord.DeltaMileage" data-gas-original="@gasRecord.Mileage">@gasRecord.Mileage</td>
<td class="col-1">@(gasRecord.DeltaMileage == default ? "---" : gasRecord.DeltaMileage)</td>

2
Views/Vehicle/_Notes.cshtml
View File

@@ -44,7 +44,7 @@
<tbody>
@foreach (Note note in Model)
{
<tr class="d-flex" style="cursor:pointer;" data-rowId="@note.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditNoteModal,@note.Id)" data-tags='@string.Join(" ", note.Tags)'>
<tr class="d-flex user-select-none" style="cursor:pointer;" ontouchstart="detectRowLongTouch(this)" ontouchend="detectRowTouchEndPremature(this)" data-rowId="@note.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditNoteModal,@note.Id)" data-tags='@string.Join(" ", note.Tags)'>
@if (note.Pinned)
{
<td class="col-3"><i class='bi bi-pin-fill me-2'></i>@note.Description</td>

2
Views/Vehicle/_OdometerRecords.cshtml
View File

@@ -65,7 +65,7 @@
<tbody>
@foreach (OdometerRecord odometerRecord in Model)
{
<tr class="d-flex" style="cursor:pointer;" data-rowId="@odometerRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditOdometerRecordModal,@odometerRecord.Id)" data-tags='@string.Join(" ", odometerRecord.Tags)'>
<tr class="d-flex user-select-none" style="cursor:pointer;" ontouchstart="detectRowLongTouch(this)" ontouchend="detectRowTouchEndPremature(this)" data-rowId="@odometerRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditOdometerRecordModal,@odometerRecord.Id)" data-tags='@string.Join(" ", odometerRecord.Tags)'>
<td class="col-2 col-xl-1">@odometerRecord.Date.ToShortDateString()</td>
<td class="col-3" data-record-type="cost">@odometerRecord.Mileage</td>
<td class="col-7 col-xl-8 text-truncate">@CarCareTracker.Helper.StaticHelper.TruncateStrings(odometerRecord.Notes, 75)</td>

2
Views/Vehicle/_ReminderRecords.cshtml
View File

@@ -45,7 +45,7 @@
<tbody>
@foreach (ReminderRecordViewModel reminderRecord in Model)
{
<tr class="d-flex" style="cursor:pointer;" data-rowId="@reminderRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditReminderRecordModal,@reminderRecord.Id)">
<tr class="d-flex user-select-none" style="cursor:pointer;" ontouchstart="detectRowLongTouch(this)" ontouchend="detectRowTouchEndPremature(this)" data-rowId="@reminderRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditReminderRecordModal,@reminderRecord.Id)">
@if (reminderRecord.Urgency == ReminderUrgency.VeryUrgent)
{
<td class="col-1"><span class="badge text-bg-danger">@translator.Translate(userLanguage, "Very Urgent")</span></td>

2
Views/Vehicle/_ServiceRecords.cshtml
View File

@@ -68,7 +68,7 @@
<tbody>
@foreach (ServiceRecord serviceRecord in Model)
{
<tr class="d-flex" style="cursor:pointer;" data-rowId="@serviceRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditServiceRecordModal,@serviceRecord.Id)" data-tags='@string.Join(" ", serviceRecord.Tags)'>
<tr class="d-flex user-select-none" style="cursor:pointer;" ontouchstart="detectRowLongTouch(this)" ontouchend="detectRowTouchEndPremature(this)" data-rowId="@serviceRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditServiceRecordModal,@serviceRecord.Id)" data-tags='@string.Join(" ", serviceRecord.Tags)'>
<td class="col-2 col-xl-1">@serviceRecord.Date.ToShortDateString()</td>
<td class="col-2">@serviceRecord.Mileage</td>
<td class="col-3 col-xl-4">@serviceRecord.Description</td>

2
Views/Vehicle/_SupplyRecords.cshtml
View File

@@ -70,7 +70,7 @@
<tbody>
@foreach (SupplyRecord supplyRecord in Model)
{
<tr class="d-flex" style="cursor:pointer;" data-rowId="@supplyRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditSupplyRecordModal,@supplyRecord.Id)" data-tags='@string.Join(" ", supplyRecord.Tags)'>
<tr class="d-flex user-select-none" style="cursor:pointer;" ontouchstart="detectRowLongTouch(this)" ontouchend="detectRowTouchEndPremature(this)" data-rowId="@supplyRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditSupplyRecordModal,@supplyRecord.Id)" data-tags='@string.Join(" ", supplyRecord.Tags)'>
<td class="col-2 col-xl-1">@supplyRecord.Date.ToShortDateString()</td>
<td class="col-2">@supplyRecord.PartNumber</td>
<td class="col-2">@supplyRecord.PartSupplier</td>

2
Views/Vehicle/_TaxRecords.cshtml
View File

@@ -67,7 +67,7 @@
<tbody>
@foreach (TaxRecord taxRecord in Model)
{
<tr class="d-flex" style="cursor:pointer;" data-rowId="@taxRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditTaxRecordModal,@taxRecord.Id)" data-tags='@string.Join(" ", taxRecord.Tags)'>
<tr class="d-flex user-select-none" style="cursor:pointer;" ontouchstart="detectRowLongTouch(this)" ontouchend="detectRowTouchEndPremature(this)" data-rowId="@taxRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditTaxRecordModal,@taxRecord.Id)" data-tags='@string.Join(" ", taxRecord.Tags)'>
<td class="col-3 col-xl-1">@taxRecord.Date.ToShortDateString()</td>
<td class="col-4 col-xl-6">@taxRecord.Description</td>
<td class="col-2" data-record-type="cost">@((hideZero && taxRecord.Cost == default) ? "---" : taxRecord.Cost.ToString("C"))</td>

2
Views/Vehicle/_UpgradeRecords.cshtml
View File

@@ -68,7 +68,7 @@
<tbody>
@foreach (UpgradeRecord upgradeRecord in Model)
{
<tr class="d-flex" style="cursor:pointer;" data-rowId="@upgradeRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditUpgradeRecordModal,@upgradeRecord.Id)" data-tags='@string.Join(" ", upgradeRecord.Tags)'>
<tr class="d-flex user-select-none" style="cursor:pointer;" ontouchstart="detectRowLongTouch(this)" ontouchend="detectRowTouchEndPremature(this)" data-rowId="@upgradeRecord.Id" oncontextmenu="showTableContextMenu(this)" onmousemove="rangeMouseMove(this)" onclick="handleTableRowClick(this, showEditUpgradeRecordModal,@upgradeRecord.Id)" data-tags='@string.Join(" ", upgradeRecord.Tags)'>
<td class="col-2 col-xl-1">@upgradeRecord.Date.ToShortDateString()</td>
<td class="col-2">@upgradeRecord.Mileage</td>
<td class="col-3 col-xl-4">@upgradeRecord.Description</td>

29
wwwroot/css/site.css
View File

@@ -163,6 +163,31 @@ html {
transform-origin: top center;
}
.tablerow-shake {
animation: tablerowshake 1.2s cubic-bezier(.36, .07, .19, .97) both;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
@keyframes tablerowshake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes bellshake {
0% {
transform: rotate(0);
@@ -270,6 +295,10 @@ html {
z-index: 1030;
}
.table-context-menu {
z-index: 1030;
}
input[type="file"] {
max-width: 100%;
}

89
wwwroot/js/vehicle.js
View File

@@ -241,7 +241,7 @@ function deleteVehicle(vehicleId) {
}
function showAddReminderModal(reminderModalInput) {
if (reminderModalInput != undefined) {
$.post('/Vehicle/GetAddReminderRecordPartialView', {reminderModel: reminderModalInput}, function (data) {
$.post('/Vehicle/GetAddReminderRecordPartialView', { reminderModel: reminderModalInput }, function (data) {
$("#reminderRecordModalContent").html(data);
initDatePicker($('#reminderDate'), true);
$("#reminderRecordModal").modal("show");
@@ -313,7 +313,7 @@ function moveRecord(recordId, source, dest) {
confirmButtonColor: "#dc3545"
}).then((result) => {
if (result.isConfirmed) {
$.post('/Vehicle/MoveRecord', {recordId: recordId, source: source, destination: dest }, function (data) {
$.post('/Vehicle/MoveRecord', { recordId: recordId, source: source, destination: dest }, function (data) {
if (data) {
hideModalCallBack();
successToast("Record Moved");
@@ -464,14 +464,17 @@ $(window).on('keydown', function (e) {
if (e.ctrlKey && e.which == 65) {
e.preventDefault();
e.stopPropagation();
clearSelectedRows();
$('.vehicleDetailTabContainer .table tbody tr').addClass('table-active');
$('.vehicleDetailTabContainer .table tbody tr').map((index, elem) => {
addToSelectedRows($(elem).attr('data-rowId'));
});
selectAllRows();
}
}
})
function selectAllRows() {
clearSelectedRows();
$('.vehicleDetailTabContainer .table tbody tr').addClass('table-active');
$('.vehicleDetailTabContainer .table tbody tr').map((index, elem) => {
addToSelectedRows($(elem).attr('data-rowId'));
});
}
function rangeMouseDown(e) {
if (isRightClick(e)) {
return;
@@ -511,7 +514,7 @@ function rangeMouseMove(e) {
}
}
function addToSelectedRows(id) {
if (selectedRow.findIndex(x=> x == id) == -1) {
if (selectedRow.findIndex(x => x == id) == -1) {
selectedRow.push(id);
}
}
@@ -530,6 +533,7 @@ function showTableContextMenu(e) {
event.preventDefault();
}
$(".table-context-menu").show();
determineContextMenuItems();
$(".table-context-menu").css({
position: "absolute",
left: getMenuPosition(event.clientX, 'width', 'scrollLeft'),
@@ -541,6 +545,37 @@ function showTableContextMenu(e) {
$(e).addClass('table-active');
}
}
function determineContextMenuItems() {
var tableRows = $('.table tbody tr');
var tableRowsActive = $('.table tr.table-active');
if (tableRowsActive.length == 1) {
//only one row selected
$(".context-menu-active-single").show();
$(".context-menu-active-multiple").hide();
} else if (tableRowsActive.length > 1) {
//multiple rows selected
$(".context-menu-active-single").hide();
$(".context-menu-active-multiple").show();
} else {
//nothing was selected, bug case.
$(".context-menu-active-single").hide();
$(".context-menu-active-multiple").hide();
}
if (tableRows.length > 1) {
$(".context-menu-multiple").show();
if (tableRows.length == tableRowsActive.length) {
//all rows are selected, show deselect all button.
$(".context-menu-deselect-all").show();
$(".context-menu-select-all").hide();
} else if (tableRows.length != tableRowsActive.length) {
//not all rows are selected, show select all button.
$(".context-menu-select-all").show();
$(".context-menu-deselect-all").hide();
}
} else {
$(".context-menu-multiple").hide();
}
}
function getMenuPosition(mouse, direction, scrollDir) {
var win = $(window)[direction](),
scroll = $(window)[scrollDir](),
@@ -558,7 +593,7 @@ function handleTableRowClick(e, callBack, rowId) {
} else if (!$(e).hasClass('table-active')) {
addToSelectedRows($(e).attr('data-rowId'));
$(e).addClass('table-active');
} else if ($(e).hasClass('table-active')){
} else if ($(e).hasClass('table-active')) {
removeFromSelectedRows($(e).attr('data-rowId'));
$(e).removeClass('table-active');
}
@@ -593,4 +628,38 @@ function showRecurringReminderSelector(descriptionFieldName) {
errorToast(genericErrorMessage());
}
})
}
}
function showTableContextMenuForMobile(e, xPosition, yPosition) {
if (!$(e).hasClass('table-active')) {
addToSelectedRows($(e).attr('data-rowId'));
$(e).addClass('table-active');
shakeTableRow(e);
} else {
$(".table-context-menu").show();
determineContextMenuItems();
$(".table-context-menu").css({
position: "absolute",
left: getMenuPosition(xPosition, 'width', 'scrollLeft'),
top: getMenuPosition(yPosition, 'height', 'scrollTop')
});
}
}
function shakeTableRow(e) {
$(e).addClass('tablerow-shake');
setTimeout(function () { $(e).removeClass('tablerow-shake'); }, 1200)
}
var rowTouchTimer;
var rowTouchDuration = 800;
function detectRowLongTouch(sender) {
var touchX = event.touches[0].clientX;
var touchY = event.touches[0].clientY;
if (!rowTouchTimer) {
rowTouchTimer = setTimeout(function () { showTableContextMenuForMobile(sender, touchX, touchY); detectRowTouchEndPremature(sender); }, rowTouchDuration);
}
}
function detectRowTouchEndPremature(sender) {
if (rowTouchTimer) {
clearTimeout(rowTouchTimer);
rowTouchTimer = null;
}
}