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

full screen navbar for small devices.

Browse Source
This commit is contained in:
DESKTOP-GENO133\IvanPlex
2024-01-11 23:04:33 -07:00
parent 75d610200b
commit e006c158fc
4 changed files with 148 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Views/Home/Index.cshtml
View File

@@ -9,16 +9,29 @@
@section Scripts { @section Scripts {
<script src="~/js/garage.js" asp-append-version="true"></script> <script src="~/js/garage.js" asp-append-version="true"></script>
} }
<div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
<ul class="navbar-nav" id="homeTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-car-front me-2"></i>Garage</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-gear me-2"></i>Settings</span></button>
</li>
@if (enableAuth)
{
<li class="nav-item" role="presentation">
<button class="nav-link" onclick="performLogOut()"><span class="display-3 ms-2"><i class="bi bi-box-arrow-right me-2"></i>Logout</span></button>
</li>
}
</ul>
</div>
<div class="container"> <div class="container">
<div class="row mt-2"> <div class="row mt-2">
<div class="d-flex lubelogger-navbar justify-content-center"> <div class="d-flex lubelogger-navbar">
<img src="/defaults/lubelogger_logo.png" />
<div class="lubelogger-navbar-button"> <div class="lubelogger-navbar-button">
<button class="navbar-toggler" type="button"> <button type="button" class="btn btn-dark" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
<span class="navbar-toggler-icon"></span>
</button>
</div> </div>
<img src="/defaults/lubelogger_logo.png"/>
<div class="lubelogger-navbar-button"></div>
</div> </div>
</div> </div>
<hr /> <hr />
@@ -44,7 +57,6 @@
</div> </div>
</div> </div>
<div class="tab-pane fade @(Model == "settings" ? "show active" : "")" id="settings-tab-pane" role="tabpanel" tabindex="0"> <div class="tab-pane fade @(Model == "settings" ? "show active" : "")" id="settings-tab-pane" role="tabpanel" tabindex="0">
</div> </div>
</div> </div>
</div> </div>
@@ -52,11 +64,11 @@
<div class="modal fade" id="addVehicleModal" tabindex="-1" role="dialog"> <div class="modal fade" id="addVehicleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content" id="addVehicleModalContent"> <div class="modal-content" id="addVehicleModalContent">
</div> </div>
</div> </div>
</div> </div>
<script> <script>
loadGarage(); loadGarage();
loadSettings(); loadSettings();
bindWindowResize();
</script> </script>

44
Views/Vehicle/Index.cshtml
View File

@@ -13,16 +13,53 @@
<script src="~/js/note.js" asp-append-version="true"></script> <script src="~/js/note.js" asp-append-version="true"></script>
<script src="~/lib/chart-js/chart.umd.js"></script> <script src="~/lib/chart-js/chart.umd.js"></script>
} }
<div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
<ul class="nav navbar-nav" id="vehicleTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" onclick="returnToGarage()"><span class="display-3 ms-2"><i class="bi bi-arrow-left-square"></i>Garage</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="servicerecord-tab" data-bs-toggle="tab" data-bs-target="#servicerecord-tab-pane" type="button" role="tab" aria-selected="true"><span class="display-3 ms-2"><i class="bi bi-card-checklist me-2"></i>Service Records</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="accident-tab" data-bs-toggle="tab" data-bs-target="#accident-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-exclamation-octagon me-2"></i>Repairs</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="upgrade-tab" data-bs-toggle="tab" data-bs-target="#upgrade-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-wrench-adjustable me-2"></i>Upgrades</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="gas-tab" data-bs-toggle="tab" data-bs-target="#gas-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-fuel-pump me-2"></i>Fuel</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tax-tab" data-bs-toggle="tab" data-bs-target="#tax-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-currency-dollar me-2"></i>Taxes</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-journal-bookmark me-2"></i>Notes</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reminder-tab" data-bs-toggle="tab" data-bs-target="#reminder-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><div id="reminderBellDiv" style="display:inline-flex;"><i id="reminderBell" class="bi bi-bell me-2"></i></div>Reminders</span></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="report-tab" data-bs-toggle="tab" data-bs-target="#report-tab-pane" type="button" role="tab" aria-selected="false"><span class="display-3 ms-2"><i class="bi bi-file-bar-graph me-2"></i>Reports</span></button>
</li>
<li class="nav-item dropdown" role="presentation">
<button onclick="deleteVehicle(@Model.Id)" class="dropdown-item"><span class="display-3 ms-2"><i class="bi bi-trash me-2"></i>Delete Vehicle</span></button>
</li>
</ul>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<button onclick="returnToGarage()" class="btn btn-secondary btn-md mt-1 mb-1"><i class="bi bi-arrow-left-square"></i></button> <button onclick="returnToGarage()" class="lubelogger-tab btn btn-secondary btn-md mt-1 mb-1"><i class="bi bi-arrow-left-square"></i></button>
<h1 class="text-truncate display-4">@($"{Model.Year} {Model.Make} {Model.Model}")<small class="text-body-secondary">@($"(#{Model.LicensePlate})")</small></h1> <h1 class="text-truncate display-4">@($"{Model.Year} {Model.Make} {Model.Model}")<small class="text-body-secondary">@($"(#{Model.LicensePlate})")</small></h1>
<button onclick="editVehicle(@Model.Id)" class="btn btn-warning btn-md mt-1 mb-1"><i class="bi bi-pencil-square"></i></button> <button onclick="editVehicle(@Model.Id)" class="lubelogger-tab btn btn-warning btn-md mt-1 mb-1"><i class="bi bi-pencil-square"></i></button>
<div class="lubelogger-navbar-button">
<button type="button" class="btn btn-dark" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
</div>
</div> </div>
</div> </div>
<hr /> <hr />
<ul class="nav nav-tabs" id="vehicleTab" role="tablist"> <ul class="nav nav-tabs lubelogger-tab" id="vehicleTab" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link active" id="servicerecord-tab" data-bs-toggle="tab" data-bs-target="#servicerecord-tab-pane" type="button" role="tab" aria-selected="true"><i class="bi bi-card-checklist me-2"></i>Service Records</button> <button class="nav-link active" id="servicerecord-tab" data-bs-toggle="tab" data-bs-target="#servicerecord-tab-pane" type="button" role="tab" aria-selected="true"><i class="bi bi-card-checklist me-2"></i>Service Records</button>
</li> </li>
@@ -87,4 +124,5 @@
function GetVehicleId() { function GetVehicleId() {
return { vehicleId: @Model.Id}; return { vehicleId: @Model.Id};
} }
bindWindowResize();
</script> </script>

95
wwwroot/css/site.css
View File

@@ -25,15 +25,15 @@ html {
} }
.card:hover { .card:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
} }
.vehicleDetailTabContainer{ .vehicleDetailTabContainer {
max-height:65vh; max-height: 65vh;
overflow-y:auto; overflow-y: auto;
overflow-x:auto; overflow-x: auto;
} }
@media print { @media print {
@@ -50,27 +50,31 @@ html {
color: #000 !important; color: #000 !important;
overflow: visible; overflow: visible;
} }
td { td {
color: #000 !important; color: #000 !important;
} }
td.col-1{
width:10%; td.col-1 {
} width: 10%;
}
th.col-1 { th.col-1 {
width: 10%; width: 10%;
} }
th { th {
color: #000 !important; color: #000 !important;
} }
} }
.chartContainer{ .chartContainer {
height:30vh; height: 30vh;
overflow:auto; overflow: auto;
} }
.vehicleNoteContainer{ .vehicleNoteContainer {
height:40vh; height: 40vh;
} }
.display-7 { .display-7 {
@@ -134,15 +138,64 @@ html {
} }
/*Media Queries*/ /*Media Queries*/
@media (max-width: 576px){ @media (max-width: 576px) {
.lubelogger-tab{ .lubelogger-tab {
display:none; display: none;
} }
.lubelogger-navbar{
.lubelogger-navbar {
justify-content: space-between; justify-content: space-between;
} }
.lubelogger-navbar-button {
display: flex;
align-items: center;
}
.lubelogger-navbar-button > button {
padding: 0;
font-size: 2rem;
}
.lubelogger-menu-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
}
.lubelogger-mobile-nav {
background-color: var(--bs-body-bg);
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
display: none;
z-index: 10;
}
.lubelogger-mobile-nav-show {
display: block;
}
.lubelogger-mobile-nav > ul > li > .nav-link.active {
color: #6ea8fe;
}
} }
@media(min-width: 576px){
@media(min-width: 576px) {
.lubelogger-mobile-nav-show {
display: none;
}
.lubelogger-mobile-nav {
display: none;
}
.lubelogger-navbar {
justify-content: center;
}
.lubelogger-navbar-button { .lubelogger-navbar-button {
display: none; display: none;
} }

12
wwwroot/js/shared.js
View File

@@ -131,3 +131,15 @@ function initDatePicker(input, futureOnly) {
}); });
} }
} }
function showMobileNav() {
$(".lubelogger-mobile-nav").addClass("lubelogger-mobile-nav-show");
}
function hideMobileNav() {
$(".lubelogger-mobile-nav").removeClass("lubelogger-mobile-nav-show");
}
function bindWindowResize() {
$(window).resize(function () {
hideMobileNav();
});
}