fix: perbaikan responsivitas pada tampilan mobile dan tablet

2026-06-10 17:08:09 +07:00
parent e19864b0c4
commit 1cf6967e46
4 changed files with 321 additions and 2 deletions
@@ -1260,3 +1260,137 @@ body {
 .leaflet-control-layers-selector:focus {
    box-shadow: 0 0 0 2.5px rgba(99, 102, 241, 0.25) !important;
 }
+
+/* ==========================================
+   RESPONSIVE DESIGN (BREAKPOINTS)
+   ========================================== */
+
+/* 1. Tablet (< 1024px dan >= 768px) */
+@media (max-width: 1023px) and (min-width: 768px) {
+    .search-wrapper {
+        max-width: 320px;
+    }
+
+    .brand-subtitle {
+        display: none;
+    }
+
+    .custom-select-trigger {
+        min-width: auto;
+        padding-right: 5px;
+    }
+
+    .input-sidebar {
+        width: 310px;
+        left: -330px;
+    }
+
+    .input-sidebar.open {
+        left: 20px;
+    }
+}
+
+/* 2. Mobile (< 768px) */
+@media (max-width: 767px) {
+    /* Header Kompak */
+    .webgis-header {
+        height: 56px;
+        padding: 0 10px;
+        gap: 8px;
+    }
+
+    .brand-name {
+        display: none;
+    }
+
+    .brand-subtitle {
+        display: none;
+    }
+
+    .header-divider {
+        display: none;
+    }
+
+    .search-wrapper {
+        max-width: 100%;
+        flex: 1;
+    }
+
+    /* Layout Kompak untuk Search Bar */
+    .custom-select-trigger {
+        display: none;
+    }
+
+    .search-category-wrap {
+        padding: 0 6px;
+        border-right: none;
+    }
+
+    .category-arrow {
+        display: none;
+    }
+
+    .header-tools {
+        gap: 4px;
+    }
+
+    .tool-badge {
+        display: none;
+    }
+
+    /* Sidebar Full-width (100%) */
+    .input-sidebar {
+        width: 100%;
+        left: -100%;
+        top: 56px;
+        bottom: 0;
+        border-radius: 0;
+        border: none;
+    }
+
+    .input-sidebar.open {
+        left: 0;
+    }
+
+    /* Pindahkan Tombol Toggle ke Bawah Tengah pada Mobile */
+    .sidebar-toggle {
+        top: auto;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    }
+
+    /* Sembunyikan tombol toggle saat sidebar terbuka penuh agar tidak menumpuk */
+    .sidebar-toggle.open {
+        display: none;
+    }
+
+    /* Penyesuaian UI Peta pada Mobile */
+    .leaflet-top {
+        margin-top: 0 !important;
+        top: 65px !important;
+    }
+
+    .leaflet-bottom {
+        bottom: 68px !important;
+    }
+
+    .pick-mode-overlay {
+        top: 66px;
+    }
+
+    .pick-mode-overlay.active {
+        top: 66px;
+    }
+
+    /* Buat legenda lebih kecil di perangkat seluler */
+    .legend h4 {
+        font-size: 10px;
+        margin-bottom: 6px;
+    }
+
+    .legend-item {
+        font-size: 9px;
+    }
+}