AleksanderWilliam/WebGIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: perbaikan responsivitas pada tampilan mobile dan tablet

Browse Source
This commit is contained in:
Aleksander William
2026-06-10 17:08:09 +07:00
parent e19864b0c4
commit 1cf6967e46
4 changed files with 321 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMap/style.css
+17 -2
View File
@@ -1774,10 +1774,21 @@ body {
left: 0;
}
/* Dashboard Sidebar Full-width (100%) */
.dashboard-sidebar {
width: 100%;
right: -100%;
border-left: none;
}
.dashboard-sidebar.open {
right: 0;
}
/* Pindahkan Tombol Toggle ke Bawah Tengah pada Mobile */
.sidebar-toggle {
top: auto;
bottom: 24px;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
@@ -1793,8 +1804,12 @@ body {
top: 65px !important;
}
.leaflet-bottom {
bottom: 68px !important;
}
.pick-mode-overlay {
bottom: 80px;
bottom: 136px;
}
/* Naikkan sedikit agar tidak tertutup tombol toggle */
index.php
+36
View File
@@ -361,6 +361,42 @@
color: #52525b;
letter-spacing: 0.5px;
}
/* ==============================
RESPONSIVE STYLE OVERRIDES
============================== */
@media (max-width: 768px) {
body {
padding: 24px 16px;
}
header {
margin-bottom: 30px;
}
h1 {
font-size: 1.85rem;
}
.subtitle {
font-size: 0.95rem;
margin-bottom: 16px;
}
.card-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.card {
padding: 24px;
}
.card-description {
min-height: auto;
margin-bottom: 16px;
}
.features-list {
margin-bottom: 20px;
}
.tech-tags {
margin-bottom: 20px;
}
}
</style>
</head>
pertemuan1/style.css
+134
View File
@@ -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;
}
}
pertemuan2/style.css
+134
View File
@@ -1221,3 +1221,137 @@ body {
.leaflet-control-layers-selector:focus {
box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 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;
}
}