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
poverty.html
+83 -15
View File
@@ -135,6 +135,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); }
/* ---- Popup Slider ---- */
.popup-slider-wrap { margin-top: 10px; }
@@ -172,6 +180,48 @@
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,
.sidebar-item-user { display: none; }
.sidebar-header { padding: 16px 14px; }
header { height: auto; min-height: 64px; padding: 10px 14px; }
.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; }
.search-panel,
.legend-panel {
left: 10px; right: 10px; width: auto;
}
.search-panel { top: 10px; padding: 10px; }
.search-results { max-height: 105px; }
.search-panel h3 { font-size: 11px; margin-bottom: 8px; }
.panel-toggle { display: flex; }
.search-panel h3,
.legend-panel h3 { display: none; }
.panel-body { margin-top: 10px; }
.legend-panel { bottom: 10px; padding: 10px; }
.legend-panel h3 { margin-bottom: 7px; }
.legend-row { font-size: 11px; margin-bottom: 5px; }
}
@media (max-width: 420px) {
.header-breadcrumb { display: none; }
.search-panel { top: 8px; }
.ctrl-input { padding: 8px 10px; font-size: 12px; }
}
</style>
</head>
<body>
@@ -222,28 +272,33 @@
<!-- Search Panel (Left) -->
<div class="search-panel">
<button class="panel-toggle" type="button" data-panel-toggle="search-panel"><span>Pencarian</span><span class="toggle-icon">▾</span></button>
<h3><i class="fa-solid fa-magnifying-glass" style="color:var(--clr-primary)"></i> Pencarian</h3>
<div style="font-size:11px; font-weight:600; color:#94a3b8; margin-bottom:4px;">RUMAH IBADAH</div>
<div class="search-input-wrap">
<input id="search-ibadah" class="ctrl-input" type="text" placeholder="Cari Rumah Ibadah..." autocomplete="off">
</div>
<div id="results-ibadah" class="search-results"></div>
<div class="panel-body">
<div style="font-size:11px; font-weight:600; color:#94a3b8; margin-bottom:4px;">RUMAH IBADAH</div>
<div class="search-input-wrap">
<input id="search-ibadah" class="ctrl-input" type="text" placeholder="Cari Rumah Ibadah..." autocomplete="off">
</div>
<div id="results-ibadah" class="search-results"></div>
<div style="font-size:11px; font-weight:600; color:#94a3b8; margin-top:8px; margin-bottom:4px;">PENDUDUK MISKIN</div>
<div class="search-input-wrap">
<input id="search-miskin" class="ctrl-input" type="text" placeholder="Cari Nama KK Penduduk Miskin..." autocomplete="off">
<div style="font-size:11px; font-weight:600; color:#94a3b8; margin-top:8px; margin-bottom:4px;">PENDUDUK MISKIN</div>
<div class="search-input-wrap">
<input id="search-miskin" class="ctrl-input" type="text" placeholder="Cari Nama KK Penduduk Miskin..." autocomplete="off">
</div>
<div id="results-miskin" class="search-results"></div>
</div>
<div id="results-miskin" class="search-results"></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> Rumah Ibadah</div>
<div class="legend-row"><div class="legend-dot" style="background:#ef4444;"></div> Penduduk Miskin (Dalam Radius)</div>
<div class="legend-row"><div class="legend-dot" style="background:#1e293b; border: 1px solid #64748b;"></div> Penduduk Miskin (Luar Radius)</div>
<hr style="border-color:#334155; margin: 8px 0;">
<div style="font-size:11px; color: var(--clr-muted);">💡 Klik Rumah Ibadah untuk atur radius jangkauan</div>
<div class="panel-body">
<div class="legend-row"><div class="legend-dot" style="background:#22c55e;"></div> Rumah Ibadah</div>
<div class="legend-row"><div class="legend-dot" style="background:#ef4444;"></div> Penduduk Miskin (Dalam Radius)</div>
<div class="legend-row"><div class="legend-dot" style="background:#1e293b; border: 1px solid #64748b;"></div> Penduduk Miskin (Luar Radius)</div>
<hr style="border-color:#334155; margin: 8px 0;">
<div style="font-size:11px; color: var(--clr-muted);">💡 Klik Rumah Ibadah untuk atur radius jangkauan</div>
</div>
</div>
</div>
</div>
@@ -257,6 +312,19 @@
document.getElementById('sidebar').classList.toggle('collapsed');
});
function setupCollapsiblePanels() {
document.querySelectorAll('[data-panel-toggle]').forEach(btn => {
const panel = btn.closest('.search-panel, .legend-panel');
btn.addEventListener('click', () => panel.classList.toggle('panel-collapsed'));
});
if (window.matchMedia('(max-width: 760px)').matches) {
document.querySelectorAll('.search-panel, .legend-panel').forEach(panel => {
panel.classList.add('panel-collapsed');
});
}
}
setupCollapsiblePanels();
// Global state
let ibadahData = [], miskinData = [];
let ibadahLayer, miskinLayer, map;