Skip to content

Secure DataTables Bulk Actions v1.1.0

Latest

Choose a tag to compare

@CilginYazilim CilginYazilim released this 30 Aug 05:39
· 2 commits to main since this release

Mobil deneyim ve seçim ergonomisi sürümü. Toplu işlem çekirdeği (scope=selected / scope=filtered, bulk_preview, expected_count freni) v1.0.0'daki gibi çalışmaya devam ediyor; bu sürümde PHP tarafında tek satır değişiklik yok.

📱 Mobil: tablo, telefonda tablo olmamalı

Sekiz sütunlu tablo telefonda overflow-x: auto ile yatay kaydırılıyordu. Teknik olarak çalışıyordu, pratikte kullanılamıyordu: kullanıcı ad-soyadı görürken durumu ve işlem düğmelerini göremiyordu.

Toplu işlemin ön koşulu satırı tanıyabilmektir. Hangi kaydı işaretlediğini görmeden onay veren kullanıcı, aslında onay vermiş sayılmaz.

  • Kart görünümü< 768px altında her <tr> bir karta dönüşür. Sütun başlıkları data-label ile her hücrenin üstüne yazılır (table.js rowCallback). Tek bir HTML çıktısı iki yerleşimi de besler; sunucuda "mobil mi?" kararı verilmez.
  • Ekranın altına sabitlenen toplu işlem çubuğu — çubuk akış içinde tablonun üstündeydi; listeyi kaydıran kullanıcı seçim yaptığında onu göremiyordu. Görünmeyen bir eylem çubuğu, olmayan bir eylem çubuğuyla aynı şeydir. env(safe-area-inset-bottom) ve body alt boşluğu dahil.
  • Mobil sıralama listesi ve mobil "sayfadaki tümünü seç"<thead> gizlendiğinde kaybolan iki denetimin karşılığı.
  • Araç çubuğu dar ekranda alt alta dizilir (eskiden nowrap + yatay kaydırma idi).
  • Dokunma hedefleri ≥ 44px; modal alanları 16px (iOS Safari'nin otomatik yakınlaştırmasını kapatır); mobil sayfalama düzeni sayfalama → bilgi → uzunluk.

Ölçülüp kapatılan mobil sorunlar

Sorun Sonuç
DataTables'ın <table> etiketine yazdığı satır içi genişlik kart yerleşiminde yatay taşmaya yol açıyordu Durum rozeti ve işlem düğmeleri ekran dışında kalıyordu → düzeltildi
.cy-actions inline-flex olduğu için justify-content onu hizalamıyordu İşlem düğmeleri kartın solunda kalıyordu → text-align ile düzeltildi
Etiket/değer çiftleri alt alta yazılıyor, kart ~290px'e uzuyordu Yan yana dizildi, kart ~200px; aynı ekranda bir kayıt daha görünüyor

⌨️ Arayüz geliştirmeleri

  • Shift + tık ile aralık seçimi. Olay change yerine click dinlenir — change olayı shiftKey bilgisini taşımaz.
  • Seçili satır göstergesi (.cy-row-selected) — masaüstünde zemin rengi, mobil kartta sol kenarda marka mavisi şerit.
  • Esc seçimi bırakır. Bir modal açıkken Esc Bootstrap'e bırakılır.
  • Açık / koyu tema düğmesi. Tercih, sayfa çizilmeden <head> içindeki satır içi betikle uygulanır (FOUC yok) ve localStorage'a kaydedilir. Hiç dokunulmazsa karar işletim sistemine kalır (prefers-color-scheme).

🐞 Düzeltmeler

  • "Seçimi Temizle" yarım çalışıyordu. İç durumu (selectedIds) boşaltıyor ve çubuğu gizliyordu, ama ekrandaki kutucuklar işaretli kalıyordu — seçim temizlendikten sonra tablo hâlâ "10 satır seçili" gibi görünüyordu.
  • Koyu temada toplu işlem sayacı okunmuyordu. Sabit --cy-brand-700 (koyu lacivert), koyu temada koyulaşan zemine düşüyordu. Artık temayla dönen --cy-text kullanılıyor.

📚 Diğer

  • Altbilgiye kütüphane bağlantıları eklendi: Örnek Kodlar & Kütüphane, bu örneğin anlatımı ve GitHub deposu.
  • README.md / README.en.md güncellendi: mobil bölümü, arayüz geliştirmeleri, sürüm geçmişi ve iki mobil ekran görüntüsü (açık + koyu tema).

Kurulum: cy_bulk.sql dosyasını içe aktarın, system/config.php içindeki veritabanı bilgilerini düzenleyin, canlıya alırken APP_DEBUG değerini false yapın.

Daha fazla örnek kod: cilginyazilim.com/kutuphane