Rayhan/UAS_SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement responsive UI layouts and collapsible control panels across application pages

Browse Source
This commit is contained in:
z0rayy
2026-06-11 05:28:31 +07:00
parent b027f02cf0
commit 4e73e17656
7 changed files with 435 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
spbu.html
+95 -12
View File
@@ -147,6 +147,14 @@
.legend-panel h3 { font-size: 11px; font-weight: 700; color: var(--clr-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.legend-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; color: var(--clr-text); font-size: 12px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.panel-toggle {
width: 100%; display: none; align-items: center; justify-content: space-between; gap: 10px;
background: transparent; border: none; color: var(--clr-text); cursor: pointer;
font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 0;
}
.panel-toggle .toggle-icon { color: var(--clr-muted); transition: transform var(--transition); }
.panel-collapsed .panel-body { display: none; }
.panel-collapsed .toggle-icon { transform: rotate(-90deg); }
/* ---- Custom Marker ---- */
.custom-marker {
@@ -175,6 +183,59 @@
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
@media (max-width: 1024px) {
.sidebar { width: var(--sidebar-collapsed); }
.sidebar-logo-text,
.sidebar-item-text,
.sidebar-section-title { display: none; }
.sidebar-header { padding: 16px 14px; }
header { height: auto; min-height: 64px; padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
.header-title h1 { font-size: 16px; }
.header-breadcrumb { font-size: 12px; }
}
@media (max-width: 760px) {
.app-wrapper { height: 100dvh; }
.sidebar { width: 56px; }
.sidebar-header { padding: 12px 8px; justify-content: center; }
.sidebar-logo-icon { width: 34px; height: 34px; font-size: 12px; }
.sidebar-toggle { display: none; }
.sidebar-nav { padding: 10px 0; }
.sidebar-item { padding: 12px 14px; justify-content: center; }
header { align-items: flex-start; }
header > div:last-child { width: 100%; justify-content: space-between; }
.content-area { min-height: 0; }
.search-panel,
.controls-panel,
.legend-panel {
left: 10px; right: 10px; width: auto;
}
.search-panel { top: 10px; padding: 10px; }
.search-results { max-height: 130px; }
.controls-panel { top: 142px; padding: 10px; }
.controls-panel h3,
.search-panel h3 { font-size: 11px; margin-bottom: 8px; }
.panel-toggle { display: flex; }
.search-panel h3,
.controls-panel h3,
.legend-panel h3 { display: none; }
.search-panel,
.controls-panel,
.legend-panel { padding: 10px; }
.panel-body { margin-top: 10px; }
.ctrl-btn { padding: 9px; font-size: 12px; }
.legend-panel { bottom: 10px; padding: 10px; }
.legend-panel h3 { margin-bottom: 7px; }
.legend-row { font-size: 11px; margin-bottom: 5px; }
}
@media (max-width: 420px) {
.search-panel { top: 8px; }
.controls-panel { top: 136px; }
.header-breadcrumb { display: none; }
#data-count, #btn-refresh { font-size: 12px !important; padding: 5px 9px !important; }
}
</style>
</head>
<body>
@@ -228,29 +289,38 @@
<!-- Search Panel (Left) -->
<div class="search-panel">
<button class="panel-toggle" type="button" data-panel-toggle="search-panel"><span>Cari SPBU</span><span class="toggle-icon">▾</span></button>
<h3><i class="fa-solid fa-magnifying-glass" style="color:var(--clr-primary)"></i> Cari SPBU</h3>
<div class="search-input-wrap">
<input id="search-spbu" class="ctrl-input" type="text" placeholder="Ketik nama atau no SPBU..." autocomplete="off">
<div class="panel-body">
<div class="search-input-wrap">
<input id="search-spbu" class="ctrl-input" type="text" placeholder="Ketik nama atau no SPBU..." autocomplete="off">
</div>
<div id="search-results" class="search-results"></div>
</div>
<div id="search-results" class="search-results"></div>
</div>
<div class="controls-panel">
<button class="panel-toggle" type="button" data-panel-toggle="controls-panel"><span>Lokasi & Rute</span><span class="toggle-icon">▾</span></button>
<h3>📍 Lokasi & Rute</h3>
<button id="btn-location" class="ctrl-btn">📍 Dapatkan Lokasi Saya</button>
<button id="btn-nearest" class="ctrl-btn" disabled>🎯 Cari SPBU Terdekat</button>
<div id="info-box" class="info-box">
<strong>SPBU Terdekat:</strong><br>
<span id="nearest-name">-</span><br>
<strong>Jarak:</strong> <span id="nearest-distance">-</span> km
<div class="panel-body">
<button id="btn-location" class="ctrl-btn">📍 Dapatkan Lokasi Saya</button>
<button id="btn-nearest" class="ctrl-btn" disabled>🎯 Cari SPBU Terdekat</button>
<div id="info-box" class="info-box">
<strong>SPBU Terdekat:</strong><br>
<span id="nearest-name">-</span><br>
<strong>Jarak:</strong> <span id="nearest-distance">-</span> km
</div>
</div>
</div>
<div class="legend-panel">
<button class="panel-toggle" type="button" data-panel-toggle="legend-panel"><span>Legenda</span><span class="toggle-icon">▾</span></button>
<h3>Legenda</h3>
<div class="legend-row"><div class="legend-dot" style="background:#22c55e;"></div> SPBU 24 Jam</div>
<div class="legend-row"><div class="legend-dot" style="background:#f59e0b;"></div> SPBU Tidak 24 Jam</div>
<div class="legend-row"><div class="legend-dot" style="background:#ef4444;"></div> Lokasi Anda</div>
<div class="panel-body">
<div class="legend-row"><div class="legend-dot" style="background:#22c55e;"></div> SPBU 24 Jam</div>
<div class="legend-row"><div class="legend-dot" style="background:#f59e0b;"></div> SPBU Tidak 24 Jam</div>
<div class="legend-row"><div class="legend-dot" style="background:#ef4444;"></div> Lokasi Anda</div>
</div>
</div>
</div>
</div>
@@ -264,6 +334,19 @@
document.getElementById('sidebar').classList.toggle('collapsed');
});
function setupCollapsiblePanels() {
document.querySelectorAll('[data-panel-toggle]').forEach(btn => {
const panel = btn.closest('.search-panel, .controls-panel, .legend-panel');
btn.addEventListener('click', () => panel.classList.toggle('panel-collapsed'));
});
if (window.matchMedia('(max-width: 760px)').matches) {
document.querySelectorAll('.search-panel, .controls-panel, .legend-panel').forEach(panel => {
panel.classList.add('panel-collapsed');
});
}
}
setupCollapsiblePanels();
// Init Map
const map = L.map('map').setView([-0.026, 109.342], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {