update
marszayn
parent
0bb237b314
commit
6cf0c137bd
|
|
@ -12,11 +12,9 @@
|
|||
<div class="card shadow-lg border-0 overflow-hidden">
|
||||
<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;">
|
||||
{{-- <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;">
|
||||
<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"
|
||||
<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 flex-column flex-sm-row"
|
||||
id="pertek-tab" data-bs-toggle="pill" data-bs-target="#pertek-content"
|
||||
type="button" role="tab" aria-controls="pertek-content" aria-selected="true"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
|
|
@ -25,14 +23,14 @@
|
|||
<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"/>
|
||||
</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"
|
||||
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;">
|
||||
<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"
|
||||
<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 flex-column flex-sm-row"
|
||||
id="rintek-tab" data-bs-toggle="pill" data-bs-target="#rintek-content"
|
||||
type="button" role="tab" aria-controls="rintek-content" aria-selected="false"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
|
|
@ -41,14 +39,14 @@
|
|||
<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"/>
|
||||
</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"
|
||||
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;">
|
||||
<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"
|
||||
<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 flex-column flex-sm-row"
|
||||
id="amdal-tab" data-bs-toggle="pill" data-bs-target="#amdal-content"
|
||||
type="button" role="tab" aria-controls="amdal-content" aria-selected="false"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
|
|
@ -57,14 +55,14 @@
|
|||
<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"/>
|
||||
</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"
|
||||
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;">
|
||||
<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"
|
||||
<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 flex-column flex-sm-row"
|
||||
id="angkut-tab" data-bs-toggle="pill" data-bs-target="#angkut-content"
|
||||
type="button" role="tab" aria-controls="angkut-content" aria-selected="false"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
|
|
@ -73,13 +71,13 @@
|
|||
<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"/>
|
||||
</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"
|
||||
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item position-relative flex-fill" role="presentation" style="z-index: 2; min-width: 80px;">
|
||||
<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"
|
||||
<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 flex-column flex-sm-row"
|
||||
id="ujiemisi-tab" data-bs-toggle="pill" data-bs-target="#ujiemisi-content"
|
||||
type="button" role="tab" aria-controls="ujiemisi-content" aria-selected="false"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
|
|
@ -88,7 +86,7 @@
|
|||
<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"/>
|
||||
</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"
|
||||
style="width: 0; height: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
|
||||
</button>
|
||||
|
|
@ -1679,11 +1677,29 @@ 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 () {
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.forEach(function (tooltipTriggerEl) {
|
||||
new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
// Hanya aktifkan tooltip pada desktop (768px ke atas)
|
||||
if (window.innerWidth >= 768) {
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.forEach(function (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>
|
||||
|
|
@ -1736,6 +1752,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
.tooltip-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide all tooltips on desktop since we have better hover states */
|
||||
.tooltip {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
|
|
@ -1745,11 +1766,32 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
#dashboard-tabs .nav-item {
|
||||
min-width: 100px;
|
||||
min-width: 110px;
|
||||
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 {
|
||||
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 */
|
||||
|
|
@ -1763,6 +1805,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
color: white !important;
|
||||
}
|
||||
|
||||
#dashboard-tabs .nav-link.active .nav-text {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#dashboard-tabs .nav-link:not(.active) {
|
||||
background-color: transparent !important;
|
||||
color: var(--bs-gray-600) !important;
|
||||
|
|
@ -1772,6 +1818,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
color: var(--bs-gray-600) !important;
|
||||
}
|
||||
|
||||
#dashboard-tabs .nav-link:not(.active) .nav-text {
|
||||
color: var(--bs-gray-600) !important;
|
||||
}
|
||||
|
||||
/* Hover states for mobile */
|
||||
#dashboard-tabs .nav-link:not(.active):hover {
|
||||
background-color: var(--bs-gray-100) !important;
|
||||
|
|
@ -1781,6 +1831,15 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
#dashboard-tabs .nav-link:not(.active):hover svg {
|
||||
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 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue