hargata/lubelog
1
0
Fork 0
mirror of https://github.com/hargata/lubelog.git synced 2026-02-03 17:53:02 -06:00
Code Issues Packages Projects Releases 51 Wiki Activity

add row view.

Browse Source
This commit is contained in:
DESKTOP-T0O5CDB\DESK-555BD 2025-09-12 12:37:42 -06:00
parent 9f556f9c95
commit 328cc37d90
3 changed files with 91 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Views/Home/_GarageDisplay.cshtml
View File

@ -34,9 +34,9 @@
{
@if (!(userConfig.HideSoldVehicles && !string.IsNullOrWhiteSpace(vehicle.SoldDate)))
{
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-6 user-select-none garage-item" ondragover="dragOver(event)" ondrop="dropBox(event, @vehicle.Id)" draggable="true" ondragstart="dragStart(event, @vehicle.Id)" data-tags='@string.Join(" ", vehicle.Tags)' id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="@await Html.PartialAsync("_VehicleExtraFields", vehicle.ExtraFields)" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
<div class="garage-item-col user-select-none garage-item" ondragover="dragOver(event)" ondrop="dropBox(event, @vehicle.Id)" draggable="true" ondragstart="dragStart(event, @vehicle.Id)" data-tags='@string.Join(" ", vehicle.Tags)' id="gridVehicle_@vehicle.Id" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="@await Html.PartialAsync("_VehicleExtraFields", vehicle.ExtraFields)" data-bs-placement="bottom" data-bs-trigger="manual" onmouseenter="loadPinnedNotes(@vehicle.Id)" ontouchstart="loadPinnedNotes(@vehicle.Id)" ontouchcancel="hidePinnedNotes(@vehicle.Id)" ontouchend="hidePinnedNotes(@vehicle.Id)" onmouseleave="hidePinnedNotes(@vehicle.Id)">
<div class="card" onclick="viewVehicle(@vehicle.Id)">
<img src="@vehicle.ImageLocation" style="height:145px; object-fit:scale-down; pointer-events:none; @(string.IsNullOrWhiteSpace(vehicle.SoldDate) ? "" : "filter: grayscale(100%);")" />
<img src="@vehicle.ImageLocation" style="@(string.IsNullOrWhiteSpace(vehicle.SoldDate) ? "" : "filter: grayscale(100%);")" />
@if (!string.IsNullOrWhiteSpace(vehicle.SoldDate))
{
<div class="vehicle-sold-banner"><p class='display-6 mb-0'>@translator.Translate(userLanguage, "SOLD")</p></div>
@ -86,9 +86,9 @@
</div>
}
}
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-6 garage-item-add user-select-none">
<div class="garage-item-col garage-item-add user-select-none">
<div class="card" onclick="showAddVehicleModal()" style="height:100%;">
<img src="/defaults/addnew_vehicle.png" style="object-fit:scale-down;height:100%;pointer-events:none;" />
<img src="/defaults/addnew_vehicle.png"/>
</div>
</div>
</div>

71
wwwroot/css/site.css
View File

@ -621,4 +621,75 @@ html[data-bs-theme="light"] .frosted {
}
.sticky-top-nav {
top: calc(48px + 2.5rem);
}
.garage-item img {
height: 145px;
object-fit: scale-down;
pointer-events: none;
}
.garage-item-add img {
object-fit: scale-down;
height: 100%;
pointer-events: none;
}
.garage-item-row {
flex: 0 0 auto;
width: 100%;
}
.garage-item-row .card {
flex-direction: row;
}
.garage-item-row .card img {
flex: 0 0 auto;
width: 33.33333333%;
}
.garage-item-row .card .vehicle-sold-banner {
flex: 0 0 auto;
width: 33.33333333%;
}
.garage-item-row .card .card-body {
flex: 0 0 auto;
width: 66.66666667%;
}
.garage-item-row.garage-item-add .card {
justify-content:center;
}
.garage-item-row.garage-item-add .card img{
height:145px;
}
.garage-item-col {
flex: 0 0 auto;
width: 50%;
}
@media (min-width: 576px) {
.garage-item-col {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 768px) {
.garage-item-col {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 992px) {
.garage-item-col {
flex: 0 0 auto;
width: 25%;
}
.garage-item-row .card img {
flex: 0 0 auto;
width: 16.66666667%;
}
.garage-item-row .card .vehicle-sold-banner {
flex: 0 0 auto;
width: 16.66666667%;
}
}
@media (min-width: 1200px) {
.garage-item-col {
flex: 0 0 auto;
width: 16.66666667%;
}
}

17
wwwroot/js/garage.js
View File

@ -186,7 +186,22 @@ function hidePinnedNotes(vehicleId) {
$(`#gridVehicle_${vehicleId}`).tooltip("hide");
}
}
function setGarageView(viewType) {
switch (viewType) {
case 'row':
$('.garage-item').removeClass('garage-item-col');
$('.garage-item').addClass('garage-item-row');
$('.garage-item-add').removeClass('garage-item-col');
$('.garage-item-add').addClass('garage-item-row');
break;
case 'col':
$('.garage-item').removeClass('garage-item-row');
$('.garage-item').addClass('garage-item-col');
$('.garage-item-add').removeClass('garage-item-row');
$('.garage-item-add').addClass('garage-item-col');
break;
}
}
function filterGarage(sender) {
let searchQuery = $('#garageSearchInput').val();
if (sender == undefined) {