Freecodecamp: Gaya tarik-turun komunitas dalam mode malam

Dibuat pada 15 Jan 2017  ·  16Komentar  ·  Sumber: freeCodeCamp/freeCodeCamp

Deskripsi masalah

Di https://github.com/freeCodeCamp/freeCodeCamp/pull/12288 , dropdown telah ditambahkan ke navigasi. Saat memeriksa https://github.com/freeCodeCamp/freeCodeCamp/pull/12532 , saya perhatikan bahwa dropdown ini sangat cerah dalam mode malam. Saya pikir itu bisa menggunakan beberapa pembaruan gaya.

Saya percaya perubahan harus dilakukan di sekitar sini .

Adakah yang punya ide tentang seperti apa bentuknya, khususnya warna apa yang harus digunakan?
/ cc @QuincyLarson @ freeCodeCamp / moderator

Screenshot

firefox_2017-01-15_15-14-22
firefox_2017-01-15_15-14-31

help wanted UI

Komentar yang paling membantu

Setuju dengan Justin, dan kode warna spesifik dapat diambil dari sini
https://www.freecodecamp.com/design-style-guide/

Semua 16 komentar

Hmm Bagaimana kalau kita coba yang sebaliknya? tetap abu-abu tua, menggunakan yang terang untuk teks itu sendiri?
Saya akan membantu @systimotic QA jika ada yang mau mengirimkan PR;)

Setuju dengan Justin, dan kode warna spesifik dapat diambil dari sini
https://www.freecodecamp.com/design-style-guide/

@systimotic @raisedadead @hallaathrad
Hai teman-teman juga, bagaimana dengan ini:
image

Akan membuka masalah terpisah untuk itu, tapi ini sepertinya tempat yang masuk akal untuk menyela ...

Saya tidak tahu apakah seseorang mengatakan mereka akan mengerjakan ini - jika tidak, saya akan menerimanya jika kami setuju keduanya harus diperbaiki!

Yup .. aku setuju keduanya harus diperbaiki. Namun perlu diingat bahwa modal ini tidak lagi tersedia untuk pementasan.

@ no-stack-dub-sack Anda dapat melanjutkan dengan memperbaiki tarik-turun 👍
Mungkin yang terbaik adalah meninggalkan modal, karena itu tetap dihapus.

😕 Saya baru saja memeriksa, dan modal tersedia untuk pementasan. Saya kira ini dikembalikan. Saya tidak yakin apa statusnya, apakah itu kembali sementara atau permanen.
Itu dikembalikan di https://github.com/freeCodeCamp/freeCodeCamp/pull/11253. Dari apa yang saya tahu itu kembali secara permanen, tetapi saya tidak yakin.

@systimotic @raisedadead Ok, jadi saya bisa melanjutkan dan memperbaiki keduanya - dan jika akhirnya dihapus - bukan masalah besar!

Perhatikan juga bahwa jika Anda mengklik tombol komunitas saat dropdown di bawah, dan kemudian mouse keluar dari drop down, itu tetap putih alih-alih kembali ke hijau:

image

Dengan asumsi ini tidak disengaja, maka saya akan mencoba untuk melihatnya juga.

@raisedadead @systimotic

Setuju dengan Justin, dan kode warna spesifik dapat diambil dari sini
https://www.freecodecamp.com/design-style-guide/

Ini sebenarnya memunculkan dua poin bagus:

  1. Banyak warna mode malam tidak ada dalam panduan gaya ini
  2. Dan, ada beberapa contoh "Camp Kode Gratis" dalam panduan gaya ini, yang harus diubah per masalah # 12472

Namun, saya tidak dapat menemukan ini di basis kode, apakah ada yang tahu di mana ini berada?

Oke, jadi saya menyiapkan sesuatu yang menurut saya terlihat bagus dan menggunakan warna nightmode / merek, termasuk memperbaiki masalah gaya fokus tombol di navbar:
image

Dan inilah dropdown:
image
image

TAPI, ketika saya mulai mengklik, misalnya, pergi ke toko, lalu kembali ke peta, gaya kembali ke warna terang. Halaman sebentar kembali ke "mode siang", kemudian saat kembali ke mode malam, gaya tarik-turun telah dikembalikan. Ada ide mengapa hal ini terjadi?

Ini kode saya, masukkan pada baris 1073 dari main.less:

.hamburger-dropdown {
    .dropdown .dropdown-menu,
    .open a {
      background-color: @gray;
      a {
        color: @night-text-color;
        &:hover {
          background-color: #666;
          color: @brand-primary;
        }
      }
    }
    a:focus,
    a:active {
      background-color: #666 !important;
      color: @brand-primary !important;
    }
  }

Modalnya - Saya mengerjakan ini sedikit, tetapi mereka datang dengan banyak masalah lain yang terlalu lelah untuk saya tangani sekarang. Karena ada juga modal "Bug" ...

Ada beberapa contoh "Kamp Kode Gratis" dalam panduan gaya ini

Saya memiliki PR yang menunggu penggabungan. Ref https://github.com/freeCodeCamp/design-style-guide/pull/7

Saya suka apa yang telah Anda lakukan dengan drop down, mungkin teksnya membutuhkan lebih banyak kontras (lebih putih), tetapi terlihat keren!

Bagi saya itu terdengar seperti masalah halaman bereaksi / statis. Halaman toko belum
telah diubah untuk bereaksi, dan preferensi Anda untuk mode malam tidak
disimpan secara lokal, saya tidak berpikir.

Pemilihan mode malam tidak bertahan di seluruh situs adalah masalah terpisah dan
akan membutuhkan satu dibesarkan, jika seseorang dapat meningkatkannya, saya akan sangat berterima kasih. saya
tidak memiliki akses ke GitHub sekarang

Pada hari Senin, 16 Januari 2017, mrugesh mohapatra [email protected]
menulis:

Ada beberapa contoh "Kamp Kode Gratis" dalam panduan gaya ini

Saya memiliki PR yang menunggu penggabungan. Referensi freeCodeCamp / design-style-guide # 7
https://github.com/freeCodeCamp/design-style-guide/pull/7

Saya suka apa yang telah Anda lakukan dengan drop-down, mungkin teksnya perlu lebih banyak
kontras (lebih putih), tetapi terlihat keren!

-
Anda menerima ini karena Anda berada di tim yang disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12538#issuecomment-272837258 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/ARtk5hIk55x-gDVJsymtMwSfkxmlxp8Wks5rS1TPgaJpZM4Lj7u0
.

@ no-stack-dub-sack tidak yakin saya sedang menggali teks hijau di atas abu-abu saat melayang / aktif. Tampaknya tidak memiliki kontras yang cukup untuk dapat dibaca. Bagaimana dengan latar belakang abu-abu terang dengan teks abu-abu tua?

@systimotic @raisedadead @hallaathrad Jadi saya pikir ini terlihat sedikit lebih baik menurut komentar Justin & Mrugesh tentang lebih kontras, saya menggunakan @link-hover-color var yaitu @brand-primary digelapkan oleh 15%, jadi masih disimpan sedikit warna hijau merek, tetapi menawarkan kontras yang jauh lebih baik. Ini ada dalam dropdown, dan untuk hover, aktif, fokus dari link nav.
image

Dan saya pikir saya akan membuka masalah terpisah mengenai modals dan akan menjelaskan kesulitannya dengan yang ada di sana.

Ini terlihat bagus untukku.

Keangkeran!!! Mari kita sudah memiliki permintaan Tarik! 😉

Di atasnya!

Apakah halaman ini membantu?
0 / 5 - 0 peringkat