Ana içeriğe geç

Rentiva v4.34.2 — Transfer kartı ikon stili hotfix'i

· 3 dakikalık okuma
MaxHandMade
MaxHandMade
Maintainer

v4.34.1'in üzerine saf bir CSS hotfix. Transfer arama sonuçları sayfasındaki favori (kalp) ve karşılaştır ikonları, kiralama ızgara/listesindeki küçük yuvarlak beyaz ikonlar yerine büyük dolu mavi bloklar olarak render ediliyordu. v4.34.2 pariteyi geri getiriyor.

Ne kırıldı​

Kullanıcı, Popüler Rotalar kartından transfer arama sonuçlarına tıkladı ve kalp ile karşılaştır düğmelerinin kiralama ızgarasındaki muadillerine hiç benzemediğini fark etti:

  • Beklenen: 32×32 yuvarlak düğme, beyaz şeffaf arka plan, kırmızı kalp dış çizgi ikon, kart görselinin sağ üstünde.
  • Olan: 100×55px dolu mavi blok, içinde minik beyaz kalp, genel CTA düğmesi gibi padding'li.

PHPUnit yeşildi. PHPCS temizdi. Ama canlı DOM'daki ikonlar bozuktu.

Kök neden​

vehicle-card.css ikon düğmelerini bu kuralla stillendiriyor:

.mhm-vehicle-card .mhm-card-favorite {
  width: 32px; height: 32px; padding: 0;
  border-radius: 50%; background: rgba(255, 255, 255, 0.9);
  /* ...vs */
}

.mhm-vehicle-card parent prefix'i dekoratif değil — bilinçli bir specificity hack'i. Dosyadaki CSS yorumu bile bunu söylüyor:

Parent selector raises specificity to (0,2,0) — overrides Astra's inline button rule (0,0,1) without needing !important. Works across themes.

(Parent selector specificity'yi (0,2,0)'a çıkarır — Astra'nın inline button kuralını (0,0,1) !important gerekmeden ezer. Tüm temalarda çalışır.)

Astra (ve diğer temalar) düğmelere padding uygulayan ve dolu arka plan veren genel bir button stili gönderiyor. Eklentinin niyeti !important silahlanma yarışına girmeden bunu selector specificity'sine yaslanarak ezmekti.

Ancak transfer kartları parent class olarak .mhm-transfer-card ile render ediliyor — .mhm-vehicle-card değil. Yani stillendirme kuralı hiç eşleşmedi, (0,0,1) Astra kuralı varsayılan olarak kazandı ve 100×55px dolu mavi düğme ortaya çıktı.

Düğmelerin kendisi aynı markup'ı kullanıyor (.mhm-card-favorite / .mhm-card-compare) — sadece parent wrapper class'ı farklı.

Düzeltme​

Her selector'de her iki parent'ı listele:

.mhm-vehicle-card .mhm-card-favorite,
.mhm-transfer-card .mhm-card-favorite {
  /* eski 32×32 yuvarlak ikon kurallarının aynısı */
}

.mhm-vehicle-card .mhm-card-compare,
.mhm-transfer-card .mhm-card-compare {
  /* aynı */
}

Specificity (0,2,0)'da kalıyor, Astra'nın button kuralı !important olmadan eziliyor ve ikon stilizasyonu artık kiralama ile transfer yüzeylerinde birebir aynı.

Bu bize ne öğretti​

PHPUnit + PHPCS gerekli ama yeterli gate'ler değil. CSS kapsama bug'ları her ikisinden de sızıyor:

  • PHPUnit CSS'i hiç görmüyor.
  • PHPCS CSS'i metin olarak görüyor, DOM'a uygulanmış kurallar olarak değil.

Bu sınıf bug'ı yakalayan tek sinyal canlı DOM'a bakmak. v4.34.0 ve v4.34.1 ana sayfa Popüler Rotalar bölümünde runtime smoke test çalıştırdı — ve o bölüm doğruydu. Transfer arama sonuçları sayfası smoke test'in ziyaret etmediği ayrı bir yüzeydi. v4.34.2 döngüyü kapatıyor: bir özellik birden fazla aşağı yönlü yüzeyi etkilediğinde, smoke test'in tıklama yolunu takip etmesi gerek, sadece giriş noktasını incelemek değil.

Uyumluluk​

  • Lisans-server güncellemesi yok.
  • Kırıcı değişiklik yok — etkilenen CSS sadece kural setini genişletiyor; mevcut hiçbir şey kırılmıyor.

— GitHub release