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
admin.html
+120 -6
View File
@@ -1099,6 +1099,67 @@
}
}
/* ---- Floating Panels Toggle ---- */
.map-floating-panel {
transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
overflow: hidden;
}
.map-floating-panel .panel-icon,
.map-floating-panel .panel-close-btn {
display: none;
}
.map-floating-panel .panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
@media (max-width: 900px) {
.map-floating-panel.collapsed {
width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
}
.map-floating-panel.collapsed:hover {
background: rgba(59, 130, 246, 0.2) !important;
border-color: rgba(59, 130, 246, 0.5) !important;
}
.map-floating-panel.collapsed > *:not(.panel-icon) {
display: none !important;
}
.map-floating-panel .panel-icon {
display: none;
font-size: 20px;
line-height: 1;
}
.map-floating-panel.collapsed .panel-icon {
display: block;
}
.map-floating-panel .panel-close-btn {
display: flex;
background: none;
border: none;
color: var(--clr-muted);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 4px;
border-radius: 4px;
align-items: center;
justify-content: center;
}
.map-floating-panel .panel-close-btn:hover {
color: var(--clr-text);
background: rgba(255,255,255,0.1);
}
}
/* ---- Custom Marker ---- */
.custom-marker {
display: flex; justify-content: center; align-items: center;
@@ -1163,6 +1224,46 @@
}
.routing-panel h3 { font-size: 12px; font-weight: 700; color: #f1f5f9; margin-bottom: 12px; border-bottom: 1px solid #334155; padding-bottom: 8px; text-transform: uppercase; margin-top:0; }
@media (max-width: 900px) {
.app-wrapper { height: 100dvh; }
header { height: auto; min-height: 64px; padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
.header-title h1 { font-size: 16px; }
.header-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.content-panel-header { align-items: flex-start; flex-direction: column; gap: 10px; }
.content-panel-header .btn-group { width: 100%; flex-wrap: wrap; }
.content-panel-header .btn-group .btn { flex: 1; min-width: 130px; }
.table { min-width: 680px; }
.modal { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.modal-footer { flex-wrap: wrap; }
.modal-footer .btn { flex: 1; min-width: 120px; }
.search-panel { left: 82px; right: 12px; top: 12px; width: auto; margin-left: 0; transform: none; }
.routing-panel { top: auto; right: 12px; left: 82px; bottom: 12px; width: auto; }
}
@media (max-width: 560px) {
.sidebar { width: 56px; }
.sidebar-header { padding: 12px 8px; justify-content: center; }
.sidebar-logo-icon { width: 34px; height: 34px; font-size: 14px; }
.sidebar-toggle,
.sidebar-logo-text,
.sidebar-item-text,
.sidebar-item-badge,
.sidebar-section-title { display: none !important; }
.sidebar-nav { padding: 10px 0; }
.sidebar-section { padding: 8px 0; }
.sidebar-item { padding: 12px 14px; justify-content: center; }
.content-panel-body { padding: 12px; }
.search-box input,
.form-group input,
.form-group select,
.form-group textarea { font-size: 16px; }
.search-panel { left: 68px; right: 8px; top: 8px; padding: 10px; }
.search-results { max-height: 135px; }
.routing-panel { left: 68px; right: 8px; bottom: 8px; padding: 10px; }
.routing-panel h3,
.search-panel h3 { font-size: 11px; margin-bottom: 8px; }
}
</style>
</head>
<body>
@@ -1272,8 +1373,12 @@
<div class="panel-map" id="map" role="main" aria-label="Peta persebaran WebGIS"></div>
<!-- Search Panel (Top Center) -->
<div class="search-panel" id="admin-search-panel">
<h3>🔍 Pencarian Global</h3>
<div class="search-panel map-floating-panel collapsed" id="admin-search-panel" onclick="if(this.classList.contains('collapsed')) this.classList.remove('collapsed');">
<div class="panel-icon">🔍</div>
<div class="panel-header">
<h3 style="margin-bottom: 0;">🔍 Pencarian Global</h3>
<button class="panel-close-btn" onclick="event.stopPropagation(); document.getElementById('admin-search-panel').classList.add('collapsed');" title="Tutup">×</button>
</div>
<div class="search-input-wrap">
<input type="text" id="global-search" class="ctrl-input" placeholder="Cari SPBU, Jalan, Ibadah..." autocomplete="off">
</div>
@@ -1295,14 +1400,18 @@
</div> -->
<!-- Floating "Tambah Data" Toolbar -->
<div id="map-add-toolbar" style="
<div id="map-add-toolbar" class="map-floating-panel collapsed" onclick="if(this.classList.contains('collapsed')) this.classList.remove('collapsed');" style="
position:absolute; top:80px; left:16px; z-index:1000;
background:rgba(15,23,42,0.96); backdrop-filter:blur(10px);
border:1px solid #334155; border-radius:12px;
padding:14px 12px; box-shadow:0 4px 24px rgba(0,0,0,0.6);
width:158px; font-family:'Inter',sans-serif;
">
<div style="font-size:10px;font-weight:700;color:#60a5fa;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:10px;">⊕ Tambah Data</div>
<div class="panel-icon" style="color:#60a5fa;">⊕</div>
<div class="panel-header" style="margin-bottom:10px;">
<div style="font-size:10px;font-weight:700;color:#60a5fa;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:0;">⊕ Tambah Data</div>
<button class="panel-close-btn" onclick="event.stopPropagation(); document.getElementById('map-add-toolbar').classList.add('collapsed');" title="Tutup">×</button>
</div>
<div style="font-size:10px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:5px;">📍 Titik</div>
<button class="map-tool-btn" id="map-add-spbu"
@@ -1330,8 +1439,13 @@
" onclick="window.mapToolCancel()">✕ Batal</button>
</div>
<div class="legend" id="legend-peta">
<div class="legend-title">SPBU</div>
<div class="legend map-floating-panel collapsed" id="legend-peta" onclick="if(this.classList.contains('collapsed')) this.classList.remove('collapsed');">
<div class="panel-icon">📋</div>
<div class="panel-header" style="margin-bottom:8px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;">
<div style="font-size:11px;font-weight:700;color:var(--clr-text);text-transform:uppercase;margin:0;">Legenda</div>
<button class="panel-close-btn" onclick="event.stopPropagation(); document.getElementById('legend-peta').classList.add('collapsed');" title="Tutup">×</button>
</div>
<div class="legend-title" style="margin-top:0;">SPBU</div>
<div class="legend-item">
<div class="legend-dot" style="background:#22c55e;"></div>
<span>Beroperasi 24 Jam</span>