You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
1.1 KiB
27 lines
1.1 KiB
# Responsive Layout |
|
## Breakpoint Kunci |
|
| Lebar | Perilaku | |
|
|-------|----------| |
|
| <480px | Theme toggle: label disembunyikan, icon saja | |
|
| <768px | Header user name disembunyikan | |
|
| <1024px | Sidebar disembunyikan; bottom nav + sheet aktif; kolom aksi tabel disembunyikan | |
|
| ≥1024px | Sidebar permanen; bottom nav disembunyikan; aksi tabel inline | |
|
| ≥1280px | List panel max-height lebih besar; layout dua kolom (tabel + sidebar catatan) | |
|
|
|
## Pola Layout Halaman Data |
|
- Header halaman: `flex-col md:flex-row` (judul + toolbar) |
|
- List panel: `flex-col xl:flex-row` dengan panel sticky di desktop |
|
- Toolbar filter: `flex-wrap` dengan input full-width di mobile |
|
|
|
## List Panel (Scrollable Table) |
|
- Class `.list-panel`: max-height `min(100vh - chrome, 900px)` |
|
- Toolbar fixed atas, body scroll, thead sticky |
|
- `-webkit-overflow-scrolling: touch` untuk iOS |
|
|
|
## Safe Area |
|
- Bottom nav & sheet: `env(safe-area-inset-bottom)` |
|
- PWA install prompt: fixed bottom dengan padding adaptif |
|
|
|
## Viewport |
|
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">` |
|
- Min-height konten: `100dvh` aware di `.app-content-frame`
|
|
|