amar
/
perling
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

main
marszayn 2025-07-04 09:50:22 +07:00
parent 0bb237b314
commit 6cf0c137bd
1 changed files with 82 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
resources/views/dashboard/index.blade.php
View File

@ -12,11 +12,9 @@
<div class="card shadow-lg border-0 overflow-hidden"> <div class="card shadow-lg border-0 overflow-hidden">
<div class="card-body p-0"> <div class="card-body p-0">
<ul class="nav nav-justified position-relative flex-wrap flex-md-nowrap" id="dashboard-tabs" role="tablist" style="gap: 4px; overflow-x: auto; white-space: nowrap;"> <ul class="nav nav-justified position-relative flex-wrap flex-md-nowrap" id="dashboard-tabs" role="tablist" style="gap: 4px; overflow-x: auto; white-space: nowrap;">
{{-- <div class="position-absolute bg-primary rounded-pill transition-all d-none d-md-block"
style="height: 100%; width: 20%; left: 0; top: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1;"></div> --}}
<li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;"> <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
<button class="nav-link active fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100" <button class="nav-link active fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
id="pertek-tab" data-bs-toggle="pill" data-bs-target="#pertek-content" id="pertek-tab" data-bs-toggle="pill" data-bs-target="#pertek-content"
type="button" role="tab" aria-controls="pertek-content" aria-selected="true" type="button" role="tab" aria-controls="pertek-content" aria-selected="true"
data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-placement="bottom"
@ -25,14 +23,14 @@
<div class="icon-wrapper d-flex align-items-center justify-content-center"> <div class="icon-wrapper d-flex align-items-center justify-content-center">
<x-lucide-shield-check class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/> <x-lucide-shield-check class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
</div> </div>
<span class="nav-text transition-all duration-300 d-none d-sm-inline">PERTEK</span> <span class="nav-text transition-all duration-300 text-center">PERTEK</span>
<div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all" <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
</button> </button>
</li> </li>
<li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;"> <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
<button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100" <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
id="rintek-tab" data-bs-toggle="pill" data-bs-target="#rintek-content" id="rintek-tab" data-bs-toggle="pill" data-bs-target="#rintek-content"
type="button" role="tab" aria-controls="rintek-content" aria-selected="false" type="button" role="tab" aria-controls="rintek-content" aria-selected="false"
data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-placement="bottom"
@ -41,14 +39,14 @@
<div class="icon-wrapper d-flex align-items-center justify-content-center"> <div class="icon-wrapper d-flex align-items-center justify-content-center">
<x-lucide-settings class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/> <x-lucide-settings class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
</div> </div>
<span class="nav-text transition-all duration-300 d-none d-sm-inline">RINTEK</span> <span class="nav-text transition-all duration-300 text-center">RINTEK</span>
<div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all" <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
</button> </button>
</li> </li>
<li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;"> <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
<button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100" <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
id="amdal-tab" data-bs-toggle="pill" data-bs-target="#amdal-content" id="amdal-tab" data-bs-toggle="pill" data-bs-target="#amdal-content"
type="button" role="tab" aria-controls="amdal-content" aria-selected="false" type="button" role="tab" aria-controls="amdal-content" aria-selected="false"
data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-placement="bottom"
@ -57,14 +55,14 @@
<div class="icon-wrapper d-flex align-items-center justify-content-center"> <div class="icon-wrapper d-flex align-items-center justify-content-center">
<x-lucide-leaf class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/> <x-lucide-leaf class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
</div> </div>
<span class="nav-text transition-all duration-300 d-none d-sm-inline">AMDAL</span> <span class="nav-text transition-all duration-300 text-center">AMDAL</span>
<div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all" <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
</button> </button>
</li> </li>
<li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;"> <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
<button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100" <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
id="angkut-tab" data-bs-toggle="pill" data-bs-target="#angkut-content" id="angkut-tab" data-bs-toggle="pill" data-bs-target="#angkut-content"
type="button" role="tab" aria-controls="angkut-content" aria-selected="false" type="button" role="tab" aria-controls="angkut-content" aria-selected="false"
data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-placement="bottom"
@ -73,13 +71,13 @@
<div class="icon-wrapper d-flex align-items-center justify-content-center"> <div class="icon-wrapper d-flex align-items-center justify-content-center">
<x-lucide-bus-front class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/> <x-lucide-bus-front class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
</div> </div>
<span class="nav-text transition-all duration-300 d-none d-sm-inline text-center">IZIN ANGKUT & OLAH</span> <span class="nav-text transition-all duration-300 text-center">IZIN ANGKUT</span>
<div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all" <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
</button> </button>
</li> </li>
<li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;"> <li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 90px;">
<button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100" <button class="nav-link fw-semibold d-flex align-items-center justify-content-center gap-2 text-md py-3 px-2 border-0 bg-transparent position-relative overflow-hidden w-100 flex-column flex-sm-row"
id="ujiemisi-tab" data-bs-toggle="pill" data-bs-target="#ujiemisi-content" id="ujiemisi-tab" data-bs-toggle="pill" data-bs-target="#ujiemisi-content"
type="button" role="tab" aria-controls="ujiemisi-content" aria-selected="false" type="button" role="tab" aria-controls="ujiemisi-content" aria-selected="false"
data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-placement="bottom"
@ -88,7 +86,7 @@
<div class="icon-wrapper d-flex align-items-center justify-content-center"> <div class="icon-wrapper d-flex align-items-center justify-content-center">
<x-lucide-bus class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/> <x-lucide-bus class="w-20-px h-20-px w-md-22-px h-md-22-px transition-all duration-300"/>
</div> </div>
<span class="nav-text transition-all duration-300 d-none d-sm-inline text-center">IZIN TEMPAT UJI EMISI</span> <span class="nav-text transition-all duration-300 text-center">IZIN TUE</span>
<div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all" <div class="nav-ripple position-absolute rounded-circle bg-white opacity-0 transition-all"
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
</button> </button>
@ -1679,12 +1677,30 @@ document.addEventListener('DOMContentLoaded', function() {
} }
}); });
// Aktifkan tooltip Bootstrap pada semua tab di mobile // Aktifkan tooltip Bootstrap hanya pada desktop, karena mobile sudah menampilkan text
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// Hanya aktifkan tooltip pada desktop (768px ke atas)
if (window.innerWidth >= 768) {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.forEach(function (tooltipTriggerEl) { tooltipTriggerList.forEach(function (tooltipTriggerEl) {
new bootstrap.Tooltip(tooltipTriggerEl); new bootstrap.Tooltip(tooltipTriggerEl);
}); });
}
// Update tooltip saat resize window
window.addEventListener('resize', function() {
var tooltips = document.querySelectorAll('.tooltip');
tooltips.forEach(function(tooltip) {
tooltip.remove();
});
if (window.innerWidth >= 768) {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.forEach(function (tooltipTriggerEl) {
new bootstrap.Tooltip(tooltipTriggerEl);
});
}
});
}); });
</script> </script>
<style> <style>
@ -1736,6 +1752,11 @@ document.addEventListener('DOMContentLoaded', function () {
.tooltip-mobile { .tooltip-mobile {
display: none !important; display: none !important;
} }
/* Hide all tooltips on desktop since we have better hover states */
.tooltip {
display: none !important;
}
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
@ -1745,11 +1766,32 @@ document.addEventListener('DOMContentLoaded', function () {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
#dashboard-tabs .nav-item { #dashboard-tabs .nav-item {
min-width: 100px; min-width: 110px;
flex: 0 0 auto; flex: 0 0 auto;
} }
/* Mobile tab styling for vertical layout (icon above text) */
#dashboard-tabs .nav-link {
flex-direction: column !important;
gap: 4px !important;
padding: 12px 8px !important;
min-height: 70px;
}
#dashboard-tabs .nav-text { #dashboard-tabs .nav-text {
display: none !important; font-size: 0.7rem !important;
line-height: 1.1 !important;
font-weight: 600 !important;
text-align: center !important;
max-width: 80px;
word-wrap: break-word;
hyphens: auto;
}
#dashboard-tabs .icon-wrapper {
width: 28px !important;
height: 28px !important;
margin-bottom: 2px;
} }
/* Mobile active state styles */ /* Mobile active state styles */
@ -1763,6 +1805,10 @@ document.addEventListener('DOMContentLoaded', function () {
color: white !important; color: white !important;
} }
#dashboard-tabs .nav-link.active .nav-text {
color: white !important;
}
#dashboard-tabs .nav-link:not(.active) { #dashboard-tabs .nav-link:not(.active) {
background-color: transparent !important; background-color: transparent !important;
color: var(--bs-gray-600) !important; color: var(--bs-gray-600) !important;
@ -1772,6 +1818,10 @@ document.addEventListener('DOMContentLoaded', function () {
color: var(--bs-gray-600) !important; color: var(--bs-gray-600) !important;
} }
#dashboard-tabs .nav-link:not(.active) .nav-text {
color: var(--bs-gray-600) !important;
}
/* Hover states for mobile */ /* Hover states for mobile */
#dashboard-tabs .nav-link:not(.active):hover { #dashboard-tabs .nav-link:not(.active):hover {
background-color: var(--bs-gray-100) !important; background-color: var(--bs-gray-100) !important;
@ -1781,6 +1831,15 @@ document.addEventListener('DOMContentLoaded', function () {
#dashboard-tabs .nav-link:not(.active):hover svg { #dashboard-tabs .nav-link:not(.active):hover svg {
color: var(--bs-primary) !important; color: var(--bs-primary) !important;
} }
#dashboard-tabs .nav-link:not(.active):hover .nav-text {
color: var(--bs-primary) !important;
}
/* Hide tooltips on mobile since we now show text */
.tooltip {
display: none !important;
}
} }
/* Custom tooltip styles for mobile */ /* Custom tooltip styles for mobile */