Tasarım Planı

Responsive Card Grid Sistemi

Tutarlı Kart Boyutları İçin Yeniden Tasarım

27 Aralık 2025

🚨 Mevcut Sorunlar

1. Playlists Sayfası (Dar Ekran)

Grid: grid-cols-2 → grid-cols-5

Sorun: 768-1024px arasında sağ sidebar (280px) açıldığında kalan alan ~400px

Sonuç: 2 kolon × ~200px = çok küçük kartlar

❌ Kartlar sıkışık, başlıklar okunmuyor

2. Ana Sayfa (Geniş Ekran)

Grid: w-[190px] flex horizontal-scroll

Sorun: Sabit genişlik, alanı doldurmak yerine horizontal scroll

Sonuç: Geniş ekranlarda kartlar küçük kalıyor

⚠️ Kartlar tutarlı ama alan verimsiz kullanılıyor

📐 Kullanılabilir Alan Hesabı

Viewport Sol Sidebar Sağ Sidebar Padding Main Content Önerilen Kolon
375px 0 0 32px 343px 2 kolon
768px 0 280px 48px 440px 2 kolon
1024px 220px 280px 48px 476px 2-3 kolon
1280px 220px 320px 48px 692px 3-4 kolon
1536px 220px 360px 48px 908px 4-5 kolon

⚠️ Kritik: 768-1024px aralığında main content sadece ~440-476px. Minimum kart genişliği 160px olursa 2 kolon sığar (160×2 + gap = ~336px).

✅ Önerilen Çözüm: Hybrid Grid Sistemi

Temel Strateji

  • ✅ Minimum kart genişliği: 150px (altına düşmesin)
  • ✅ Maksimum kart genişliği: 220px (çok büyümesin)
  • ✅ Auto-fill grid: minmax(150px, 1fr)
  • ✅ Tutarlı gap: 16px (gap-4)

Yeni Grid Class

grid grid-cols-2 sm:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4

Mobile: 2 kolon sabit | 640px+: auto-fill minmax(160px, 1fr)

Viewport Bazlı Beklenen Sonuç

375px 2 kolon
768px 2 kolon
1024px 2-3 kolon
1280px+ 4-5 kolon

📄 Sayfa Bazlı Uygulama Planı

Ana Sayfa home.blade.php

Mevcut:

flex w-[190px] overflow-x-auto

Önerilen:

Horizontal scroll KALSIN ✓

Ana sayfada horizontal scroll UX için iyi, değiştirme

Index Sayfaları playlists, albums, genres, sectors, artists

Mevcut:

grid-cols-2 md:grid-cols-3 lg:grid-cols-4...

Önerilen:

grid grid-cols-2 sm:grid-cols-[repeat(auto-fill,minmax(160px,1fr))]
Detail Sayfaları playlist-detail, album-detail, genre-detail

Genellikle şarkı listesi gösteriyor, kart grid'i yok. Değişiklik gerekmez.

📁 Etkilenecek Dosyalar

Index Sayfaları (Grid Değişecek)

  • ✏️ resources/views/themes/muzibu/playlists/index.blade.php
  • ✏️ resources/views/themes/muzibu/albums/index.blade.php
  • ✏️ resources/views/themes/muzibu/artists/index.blade.php
  • ✏️ resources/views/themes/muzibu/genres/index.blade.php (varsa)
  • ✏️ resources/views/themes/muzibu/sectors/index.blade.php (varsa)
  • ✏️ resources/views/themes/muzibu/radios/index.blade.php (varsa)

Tailwind Config (Safelist)

  • ✏️ tailwind/tenants/tenant-1001.config.js

grid-cols-[repeat(auto-fill,minmax(160px,1fr))] safelist'e eklenmeli

🔧 Uygulama Adımları

  1. 1

    Tailwind Config Güncelle

    Safelist'e yeni grid class'ı ekle

  2. 2

    Index Sayfalarını Güncelle

    Grid class'larını yeni formata çevir

  3. 3

    CSS Build

    npm run css:muzibu

  4. 4

    Test Et

    375px, 768px, 1024px, 1280px viewport'larında kontrol

💡 Alternatif Yaklaşım: Horizontal Scroll

Index sayfalarında da ana sayfa gibi horizontal scroll kullanılabilir. Bu durumda kartlar hiç küçülmez, sadece sağa kaydırılır.

✅ Avantajları

  • • Kartlar her zaman aynı boyutta
  • • Ana sayfa ile tutarlı UX
  • • Mobilde doğal swipe deneyimi

❌ Dezavantajları

  • • Tüm içeriği görmek için kaydırmak gerekir
  • • Pagination ile uyumsuz olabilir
  • • SEO için grid daha iyi

Öneri: Index sayfalarında Grid yaklaşımını kullanalım, ana sayfada horizontal scroll kalsın. Bu şekilde her iki dünya'nın avantajlarını alırız.

📋 Onay Bekliyor

Index sayfalarında auto-fill minmax grid kullanalım mı?
Minimum kart genişliği 160px uygun mu?
Ana sayfa horizontal scroll olarak kalsın mı?

"UYGUNDUR" dersen uygulamaya başlayacağım.