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.
46 lines
1.3 KiB
46 lines
1.3 KiB
--- |
|
description: Standar UI/UX geonet-console dan databaselist |
|
globs: geonet-console/**/*,databaselist/**/* |
|
alwaysApply: false |
|
--- |
|
|
|
# UI/UX — Geonet Console |
|
|
|
## Stack |
|
|
|
- Blade + Tailwind CDN + `public/css/app-ui.css` |
|
- Vanilla JS: `app-nav.js`, `app-spa-nav.js`, `ui-feedback.js`, `theme.js` |
|
- Hotwire Turbo 8 untuk navigasi SPA parsial |
|
|
|
## File inti |
|
|
|
- Layout: `resources/views/layouts/app.blade.php` |
|
- Shell: `resources/views/partials/app-shell.blade.php` |
|
- Menu: `app/Support/NavigationMenu.php` |
|
|
|
## Pola yang sudah ada (pertahankan) |
|
|
|
- Dark-first, enterprise dashboard (sidebar + bottom nav mobile) |
|
- Kartu `rounded-2xl`, border slate, aksen cyan |
|
- Loading overlay + dialog feedback pada form kritis |
|
- Sticky table header + row action sheet di mobile |
|
- Role-based navigation (admin vs user) |
|
|
|
## Wajib saat ubah UI |
|
|
|
```blade |
|
{{-- Loading: gunakan ui-feedback.js overlay --}} |
|
{{-- Tabel mobile: action via sheet, bukan kolom aksi penuh --}} |
|
{{-- Theme: Light / Dark / System via theme.js --}} |
|
``` |
|
|
|
- Setiap form punya helper text / catatan |
|
- Icon menu sesuai konteks |
|
- Header & footer sticky; area data scroll internal |
|
- Turbo: jangan reload full layout; pertahankan sidebar/header |
|
|
|
## Gap — jangan regresi |
|
|
|
- Hindari layout shift saat navigasi |
|
- Kontras teks baik di semua tema |
|
- Target: compile Tailwind, bukan CDN di produksi
|
|
|