Skip to content

Minor iyileştirmeler ve çoklu link desteği #5

@osman-koc

Description

@osman-koc

Merhaba FKA, öncelikle bu repo için teşekkürler. Repo'yu forklayıp apps.osmankoc.dev altında yayınladım. Yayınlama öncesinde kendimce birkaç şey gözüme çarptı ve bunları düzeltip iyileştirdim. Bir de yeni bir özellik ekledim. Bunları buraya da PR çıkacaktım fakat değişikliklerin kapsamı biraz genişlediği için öncesinde bunları bir issue ile söyleyip göstermek istedim, eğer uygun görürsen ona göre değişiklikleri buraya da çıkacağım. Aşağıda detayları mevcut.

  1. Mobil Uygulamalar için Çoklu Link Desteği (App Store / Google Play)

Her uygulamanın yalnızca tek bir homepage veya downloadUrl bağlantısı vardı. Bendeki mobil uygulamaların hem App Store hem de Google Play linklerini taşıyabilmesi için yeni bir links alanı eklendi. Diğer türlü aynı uygulamanın android ve ios tarafı için ayrı ayrı eklemek gerekecekti.

apps.json — Yeni links alanı

"links": [
  { "label": "App Store", "url": "https://apps.apple.com/...", "platform": "ios" },
  { "label": "Google Play", "url": "https://play.google.com/...", "platform": "android" }
]
  1. Uygulama Kartı / Satırı — "Get" Butonu Davranışı
  • links dizisi dolu olan uygulamalarda "Get" butonuna tıklanınca artık platform seçim modalı (veya dropdown) açılıyor. Daha önce yalnızca tek bir URL'ye yönlendirme yapılıyordu.
  • Uygulama detay ekranında, links dizisi dolu olan uygulamalar için "Get" butonu; altında açılır dropdown (platform listesi) gösteren bir yapıya dönüştürüldü.
  • getButtonLabel() fonksiyonu güncellendi: links dizisi varsa veya kategori games/entertainment ise buton etiketi "Get" döner.
  • get-dropdown-wrapper / get-dropdown CSS sınıfları eklendi.
  • Her platform bağlantısı; platforma özgü icon (iOS/Android SVG), etiket ve ok ikonuyla listeleniyor.
  • Dropdown, dışarıya tıklanınca veya Escape tuşuna basılınca kapanıyor.
  1. Platform Seçim Modalı (showLinksModal)

Ana uygulama listesindeki "Get" butonuna tıklanınca (app.links varsa) yeni bir modal ekranı açılıyor:

  • Modal'da uygulama ikonu ve adı gösteriliyor.
  • Her platform linki; .modal-platform-link elemanı olarak, platforma özgü icon ve ">" oku ile listeleniyor.
  • Mevcut closeModal() altyapısı kullanılıyor.
  1. Yeni platformIcon(platform) Fonksiyonu

"ios", "android" ve genel harici link olmak üzere 3 farklı SVG ikonu döndüren yardımcı fonksiyon eklendi.

  1. Yeni CSS Sınıfları (style.css)
Sınıf / Grup Açıklama
.platform-links Detay ekranında platform butonlarının wrapper'ı
.platform-link-btn Yuvarlak kenarlıklı platform butonu
.modal-platform-links Modal içindeki platform linkleri listesi
.modal-platform-link Tek bir platform link satırı
.modal-platform-icon Platform ikonunun kapsayıcısı
.modal-platform-label Platform etiketi
.modal-platform-chevron Platform satırı ok ikonu
.get-dropdown-wrapper Detay sayfasındaki dropdown'ın konumlandırma wrapper'ı
.get-dropdown Dropdown panel (opacity/transform animasyonlu)
.get-dropdown.open Açık dropdown durumu
.get-dropdown-item Dropdown içindeki tek bir link satırı
.get-dropdown-icon Dropdown satırındaki platform ikonu kapsayıcısı
.get-dropdown-label Dropdown satırı etiketi
.get-dropdown-arrow Dropdown satırı ok ikonu
  1. Layout ve Responsive Düzeltmeler
  • body ve .app-store'dan overflow: hidden kaldırıldı → sayfa kayması sorunu çözüldü.
  • width: 100vwwidth: 100%, max-width: 100vwmax-width: 100% olarak değiştirildi (yatay taşma önlendi).
  • .info-grid ve .app-detail üzerindeki overflow: hidden mobil breakpoint'te kaldırıldı.
  • App detail actions alanı mobilde ortalandı (justify-content: center).

GitHub repo: https://github.com/osman-koc/my-apps
Live: https://apps.osmankoc.dev

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions