Skip to content

ui: kerapatan desktop mengikuti Coolify #127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
coderbuzz merged 1 commit into from
Oct 16, 2026
Merged

ui: kerapatan desktop mengikuti Coolify #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/DESIGN-SYSTEM.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ Lencana: 10 sampai 11px, 800, huruf kapital, radius 6, font mono untuk nilai tek
## 4. Tipografi, spasi, radius
Body 15px/1.5. KPI 24px/800 tracking -0.02em. Angka sekunder 20px/800. Judul kartu 15px/700. Label 12.8px. Meta/chip 11 sampai 12px (chip 600).
Label tab bawah 11px. Input/select **16px**. Skala spasi 4px: padding halaman 14 sampai 16px, antar kartu 12px, antar kontrol 8px.
Radius: kartu 16, kontrol/tombol 12, lencana 6, chip/pill penuh. Skala kontrol (dikecilkan dari 44/48, mengikuti hadir S16): input/select/tombol default **40px**, `sm` 34px, `lg` 44px (satu aksi utama penuh-lebar), ikon 40px (`btn-icon`) dan 36px (`btn-icon-sm`), nav desktop 40px, segmen HP 38px. Teks input 16px di HP (iOS zoom), 14px di ≥700px. Chip 32px dengan jarak ≥6px.
Radius: kartu 16, kontrol/tombol 12, lencana 6, chip/pill penuh. Skala kontrol (dikecilkan dari 44/48, mengikuti hadir S16): input/select/tombol default **40px**, `sm` 34px, `lg` 44px (satu aksi utama penuh-lebar), ikon 40px (`btn-icon`) dan 36px (`btn-icon-sm`), nav desktop 40px, segmen HP 38px. Teks input 16px di HP (iOS zoom), 14px di ≥700px. **Desktop ≥700px (kerapatan mengikuti Coolify)**: input/select/tombol 32px, teks tombol 13px, `sm` 28px, `lg` 36px, ikon 32/28px, segmen 26px, chip 28px, padding kartu 16px, nav 36px, body 14px. HP tetap 40px/16px. Chip 32px dengan jarak ≥6px.

## 5. Komponen (partial bersama, varian di partial bukan di pemakaian)
| Kebutuhan | Partial / kelas | Catatan |
Expand Down
31 changes: 31 additions & 0 deletions internal/http/static/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -902,3 +902,34 @@ hgroup .page-actions { margin-top: 4px; }
/* Lencana di tabel/daftar lebih kecil dari lencana judul (umpan balik produksi 2026-10-15) */
/* Konstruksi sama dengan lencana judul (line-height 1 + padding): di Android line-height tinggi membuat teks naik */
.rows .badge, .group-head .badge { font-size: 8px; font-weight: 700; line-height: 1; padding: 4.5px 5px 3.5px; letter-spacing: 0.02em; } /* +0,5px: diukur dari foto HP, teks kapital mono duduk 0,25-0,6px terlalu tinggi di Android */

/* Desktop density (>= 700px), sizes follow Coolify: controls 32px, buttons 13px, body 14px, cards p-4.
Phones keep 40px controls / 16px inputs (touch target, iOS zoom). DESIGN-SYSTEM §4. */
@media (min-width: 700px) {
body { font-size: 14px; }
.btn { min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.btn-sm { min-height: 28px; padding: 0 8px; font-size: 12px; }
.btn-lg { min-height: 36px; padding: 0 14px; }
.btn-link, .btn-link:hover { min-height: 0; padding: 0; }
.btn-icon { width: 32px; padding: 0; }
.btn-icon-sm { width: 28px; min-height: 28px; padding: 0; }
.actgrid .btn .icon { width: 15px; height: 15px; }
input, select, textarea { min-height: 32px; padding: 0 10px; border-radius: 8px; }
textarea { min-height: 72px; padding: 6px 10px; }
.row-env textarea { min-height: 32px; }
.search input { padding-left: 36px; }
.search .icon { left: 10px; width: 16px; height: 16px; }
.select-wrap select { padding-right: 34px; }
.select-wrap .icon { right: 10px; width: 16px; height: 16px; }
.field, label, .check { font-size: 14px; }
.seg-btn, .seg-radio span { min-height: 26px; font-size: 12px; }
.chip { min-height: 28px; }
.card { padding: 16px; }
.row-domain { grid-template-columns: minmax(0, 1fr) 32px; }
.row-env { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 28px 28px; }
.row-file { grid-template-columns: minmax(0, 1fr) auto 28px; }
}
@media (min-width: 900px) {
.main-nav { height: 36px; }
.main-nav a { font-size: 13px; }
}
Loading