Responsive Davranış
Atlas V2 layout motoru, dashboard'un farklı ekran boyutlarında otomatik olarak ölçeklenmesini sağlar. Yapılandırma gerektirmez; widget oranları (nx/ny/nw/nh) baz alınarak her viewport için yerleşim yeniden hesaplanır.
Ön Koşul
Bir Atlas dashboard'u oluşturulmuş ve içine en az bir widget yerleştirilmiş olmalıdır. Aksi halde responsive davranış görsel olarak doğrulanamaz.
Klasik Breakpoint Yok
Atlas, Bootstrap-vari breakpoint sistemi kullanmaz. Görsel akıcıdır: viewport ne olursa olsun widget'lar oransal olarak konumlanır. Bu daha öngörülebilir ama daha az özelleştirilebilir bir modeldir.
1. Ölçekleme Mantığı
baseRenderWidth, canvas'ın o anki gerçek genişliğidir. Ekran küçüldüğünde baseRenderWidth küçülür ve widget'lar proporsyonel olarak küçülür; ekran büyüdüğünde tersi.
| Cihaz | Ne olur? |
|---|---|
| Masaüstü 1920×1080 | Tam canvas; widget'lar tasarım boyutunda |
| Tablet 1024×768 | Canvas %53'e küçülür; widget'lar oransal küçülür |
| Mobil 375×667 | Canvas %19'a küçülür; widget'lar tek sütun gibi görünür |
2. Scroll Eşiği
İçerik viewport'tan büyükse scrollbar otomatik açılır. Eşik:
İçerik viewport'un %50'sini aştığında dikey scroll aktifleşir. Atlas dashboard'unun içine taşmayacak şekilde widget yerleştirmek bu eşiği gözeterek dengelenir.
Scrollsuz Ölçekleme
Eğer widget sayısını ekran sığacak şekilde ayarlarsanız scroll çıkmaz; tüm dashboard tek bir görünür alanda kalır. Bu, embed senaryolarında daha temiz bir görünüm verir.
3. Widget Görünürlük Kontrolü
| Özellik | V2'de Var mı? |
|---|---|
| Mobile için widget gizleme | ✗ |
| Mobile için farklı yerleşim | ✗ |
| Breakpoint bazlı CSS | ✗ |
| Widget min/max boyut clamp | ✓ |
Mobil Optimizasyon
Mobil için özel widget gizleme veya farklı layout desteği yoktur. Mobile'da kötü okunan widget'lar varsa Cartography tarafında font/marker boyutunu büyütmek tek seçenektir.
4. Test Etme
Tarayıcı geliştirici araçlarında device emulation ile farklı ekran boyutlarında dashboard'u test edebilirsiniz:
| Adım | Açıklama |
|---|---|
| 1 | Chrome DevTools'u açın (F12) |
| 2 | Device toolbar'ı toggle edin (Ctrl+Shift+M) |
| 3 | Cihaz seçin: iPhone 12, iPad, Surface, Custom |
| 4 | Dashboard'u hem dikey hem yatay test edin |
5. Tasarım Önerileri
| Senaryo | Öneri |
|---|---|
| Çok kart, küçük ekran | 2-4 widget'lı özet dashboard + ayrı detay dashboard |
| TV ekranı | 8-12 büyük widget; refresh interval 5-10sn |
| Mobil dashboard | Tek sütun, widget'lar tam genişlik (nw=1.0) |
| Embed sayfa | Scroll yok; viewport sığacak widget sayısı |
6. Print / PDF
Dashboard'u tarayıcının Print → Save as PDF ile dökersiniz. Atlas dashboard'u responsive olduğu için print preview'da viewport'a göre ölçeklenir. A4 yatay önerilir.
Print Hazırlığı
Print öncesi şu adımları yapın:
- Edit mode kapalı olsun
- Tüm widget'lar veri yüklenmiş olsun
- Tarayıcıda yer imi/araç çubuğu gizli olsun (F11 fullscreen)
- Print sırasında "Background graphics" seçeneğini açın