Merge pull request #68 from hargata/Hargata/better.mobile
make it more mobile friendly.
This commit is contained in:
Hargata Softworks
@@ -9,14 +9,33 @@
|
||||
@section Scripts {
|
||||
<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="row mt-2">
|
||||
<div class="d-flex justify-content-center">
|
||||
<img src="/defaults/lubelogger_logo.png"/>
|
||||
<div class="d-flex lubelogger-navbar">
|
||||
<img src="/defaults/lubelogger_logo.png" />
|
||||
<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>
|
||||
<hr />
|
||||
<ul class="nav nav-tabs" id="homeTab" role="tablist">
|
||||
<ul class="nav nav-tabs lubelogger-tab" id="homeTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link @(Model == "garage" ? "active" : "")" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><i class="bi bi-car-front me-2"></i>Garage</button>
|
||||
</li>
|
||||
@@ -38,7 +57,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade @(Model == "settings" ? "show active" : "")" id="settings-tab-pane" role="tabpanel" tabindex="0">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,11 +64,11 @@
|
||||
<div class="modal fade" id="addVehicleModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content" id="addVehicleModalContent">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
loadGarage();
|
||||
loadSettings();
|
||||
bindWindowResize();
|
||||
</script>
|
||||
@@ -13,16 +13,53 @@
|
||||
<script src="~/js/note.js" asp-append-version="true"></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="row">
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
@@ -87,4 +124,5 @@
|
||||
function GetVehicleId() {
|
||||
return { vehicleId: @Model.Id};
|
||||
}
|
||||
bindWindowResize();
|
||||
</script>
|
||||
@@ -25,15 +25,15 @@ html {
|
||||
}
|
||||
|
||||
|
||||
.card:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
|
||||
}
|
||||
.card:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
|
||||
}
|
||||
|
||||
.vehicleDetailTabContainer{
|
||||
max-height:65vh;
|
||||
overflow-y:auto;
|
||||
overflow-x:auto;
|
||||
.vehicleDetailTabContainer {
|
||||
max-height: 65vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media print {
|
||||
@@ -50,27 +50,31 @@ html {
|
||||
color: #000 !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #000 !important;
|
||||
}
|
||||
td.col-1{
|
||||
width:10%;
|
||||
}
|
||||
|
||||
td.col-1 {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
th.col-1 {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
th {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chartContainer{
|
||||
height:30vh;
|
||||
overflow:auto;
|
||||
.chartContainer {
|
||||
height: 30vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vehicleNoteContainer{
|
||||
height:40vh;
|
||||
.vehicleNoteContainer {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.display-7 {
|
||||
@@ -133,3 +137,66 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
/*Media Queries*/
|
||||
@media (max-width: 576px) {
|
||||
.lubelogger-tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lubelogger-navbar {
|
||||
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) {
|
||||
.lubelogger-mobile-nav-show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lubelogger-mobile-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lubelogger-navbar {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lubelogger-navbar-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,4 +130,16 @@ function initDatePicker(input, futureOnly) {
|
||||
autoclose: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user