search

evrimagaci / periodum

Periodum: An Interactive, Open-Source Periodic Table!
https://periodum.com/
Open Software License 3.0
391 stars 68 forks source link

Tarayıcı Kontrolü #3

Closed cagrimertbakirci closed 2 years ago

cagrimertbakirci commented 2 years ago

Projenin farklı tarayıcılarda nasıl çalıştığını kontrol etmemiz ve aksaklıkları gidermemiz gerekiyor.

En öncelikli olanlar:

  1. Chrome (Temelde buna yönelik tasarlandı)
  2. Firefox
  3. Safari

Ek olarak:

  1. Opera
  2. Edge

Mobil tarayıcılar için ayrı issue oluşturacağız.

evilese commented 2 years ago

Tasarımsal bir şey belirtmek istiyorum. Hakkımızda sayfasında yazı maalesef okunabilirlik açısından iyi değil, ufak biz düzenleme yaptım belki işinize yarar.

/* LİNKLERİ DAHA OKUNABİLİR YAPAR */
.description>p>a {
    color: #75e8e6;
    text-decoration: none;
    font-weight: 700;
}

/* GENELİ DAHA OKUNABİLİR YAPAR */

.description[data-v-7fdfdd16] {
    font-size: 0.9em;
    color: #b5bac5;
    font-weight: 400;
    line-height: normal;
}

/ MEVCUT HALİ / 1

/ DÜZENLENEN HALİ / 2

/* SCSS VERSİYON */ 
.description {
    >p {
        >a {
            color: #75e8e6;
            text-decoration: none;
            font-weight: 700;
        }
    }
    font-size: 0.9em;
    color: #b5bac5;
    font-weight: 400;
    line-height: normal;
}
krumdahr commented 2 years ago

Merhaba, Firefox'da (96.0.1 (64 bit)) deyalı bilgi paneli transparan açıldığı için okumak pek mümkün değil maalesef.

Screenshot 2022-01-16 at 17-43-25 periodium

erdemildiz commented 2 years ago

Fontların daha okunabilir olması iyi olur.

turkerdev commented 2 years ago

Merhaba, Firefox'da (96.0.1 (64 bit)) deyalı bilgi paneli transparan açıldığı için okumak pek mümkün değil maalesef.

Screenshot 2022-01-16 at 17-43-25 periodium

Sıvı ile gazın resimleri ters olmuş sanırım.

krumdahr commented 2 years ago

Benzer transparan görünüm sorunu bileşik oluşturma panelinde de mevcut. Ayrıca ilk elenement (burada Al) koyu bir renk ile yazıldığı için okumayı güçleştiriyor.

Screenshot 2022-01-18 at 10-26-34 periodium

yafesdot commented 2 years ago

@cagrimertbakirci bence bu başlığı da tartışmaya atmak mantıklı olabilir

nesimtunc commented 2 years ago

Yukarida testlere ek olarak Mac OS Monterey ve Windows 11 isletim sistemlerindeki Safari, Edge ve Opera ile denedim. Denemeyi base olarak Anasayfayi ele aldim. Diger alt sayfalardaki gorsel degisiklikler hemen hemen her yerde ayni ve kismen duzeltildi, duzeltiliyor.

Cozunurluk: 1920x910 Test Ortami: BrowserStack.com Sonuc: Window 11 - Safari v5.1 haric basarili

Windows 11 Safari v5.1 Ekran Goruntuleri:

Screen Shot 2022-01-29 at 13 54 33 Screen Shot 2022-01-29 at 13 54 48
nesimtunc commented 2 years ago

Selam @evilese, degisikliklerin guzel gozukuyor, acaba onlari bir kod degisikligi olarak bize gonderseniz şık olmaz mı? 😎

cagrimertbakirci commented 2 years ago 
/* LİNKLERİ DAHA OKUNABİLİR YAPAR */
.description>p>a {
    color: #75e8e6;
    text-decoration: none;
    font-weight: 700;
}

/* GENELİ DAHA OKUNABİLİR YAPAR */

.description[data-v-7fdfdd16] {
    font-size: 0.9em;
    color: #b5bac5;
    font-weight: 400;
    line-height: normal;
}

Buna bir PR şart. 😍