Freecodecamp: Estilo de menú desplegable de la comunidad en modo nocturno

Creado en 15 ene. 2017  ·  16Comentarios  ·  Fuente: freeCodeCamp/freeCodeCamp

descripcion del problema

En https://github.com/freeCodeCamp/freeCodeCamp/pull/12288 , se agregó un menú desplegable a la navegación. Mientras revisaba https://github.com/freeCodeCamp/freeCodeCamp/pull/12532 , noté que este menú desplegable es muy brillante en el modo nocturno. Creo que puede usar algunas actualizaciones de estilo.

Creo que los cambios deberían hacerse en algún lugar por aquí .

¿Alguien tiene alguna idea sobre cómo debería verse, específicamente qué colores debería usar?
/ cc @QuincyLarson @ freeCodeCamp / moderators

Captura de pantalla

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

help wanted UI

Comentario más útil

De acuerdo con Justin, y los códigos de color específicos se pueden tomar de aquí.
https://www.freecodecamp.com/design-style-guide/

Todos 16 comentarios

Hmm ¿Qué tal si intentamos lo contrario? mantener el gris oscuro, usando el claro para el texto mismo?
Ayudaré a dispuesto a enviar un PR;)

De acuerdo con Justin, y los códigos de color específicos se pueden tomar de aquí.
https://www.freecodecamp.com/design-style-guide/

@systimotic @raisedadead @hallaathrad
Hola chicos también, ¿qué pasa con esto?
image

Iba a abrir un tema aparte, pero este parece un lugar sensato para intervenir ...

No puedo decir si alguien ha dicho que trabajará en esto; si no, lo aceptaré si estamos de acuerdo en que ambos deben solucionarse.

Sí ... Estuve de acuerdo en que ambos deberían arreglarse. Pero tenga en cuenta que este modal ya no está disponible en la puesta en escena.

@ no-stack-dub-sack Puede seguir adelante con la reparación del menú desplegable 👍
Podría ser mejor dejar el modal, ya que de todos modos se eliminará.

😕 Acabo de verificar y el modal está disponible en la puesta en escena. Supongo que esto se revirtió. No estoy seguro de cuál es el estado de eso, si ha regresado temporal o permanentemente.
Se revirtió en https://github.com/freeCodeCamp/freeCodeCamp/pull/11253. Por lo que puedo decir, ha vuelto de forma permanente, pero no estoy seguro.

@systimotic @raisedadead Ok, entonces puedo seguir adelante y arreglar ambos, y si termina siendo eliminado, ¡no hay problema!

También noté que si hace clic en el botón de comunidad mientras el menú desplegable está hacia abajo, y luego saca el mouse del menú desplegable, permanece blanco en lugar de volver a verde:

image

Suponiendo que esto no sea intencional, trataré de verlo también.

@raisedadead @systimotic

De acuerdo con Justin, y los códigos de color específicos se pueden tomar de aquí.
https://www.freecodecamp.com/design-style-guide/

En realidad, esto plantea dos buenos puntos:

  1. Muchos de los colores del modo nocturno no se encuentran en esta guía de estilo
  2. Y hay varias instancias de "Campamento de código libre" en esta guía de estilo, que deben cambiarse según el número 12472.

Sin embargo, no puedo encontrar esto en el código base, ¿alguien sabe dónde vive?

Ok, tengo algo preparado que creo que se ve bien y usa colores de modo nocturno / marca, incluida la solución del problema del
image

Y aquí está el menú desplegable:
image
image

PERO, cuando comencé a hacer clic, por ejemplo, yendo a la tienda y luego volviendo al mapa, el estilo vuelve a los colores claros. La página vuelve momentáneamente al "modo día", luego, cuando vuelve al modo nocturno, los estilos desplegables se han revertido. ¿Alguna idea de por qué podría ser esto?

Aquí está mi código, inserte en la línea 1073 de 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;
    }
  }

Los modales: trabajé un poco en esto, pero vienen con una gran cantidad de otros problemas en los que estoy demasiado cansado para abordar ahora. Porque también está el modal "Bug" ...

Hay varias instancias de "Campamento de código libre" en esta guía de estilo.

Tengo relaciones públicas pendientes de fusión. Ref https://github.com/freeCodeCamp/design-style-guide/pull/7

Me gusta lo que ha hecho con el menú desplegable, tal vez el texto necesite más contraste (más blanco), ¡pero se ve genial!

Eso me suena como un problema de página de reacción / estática. La página de la tienda no tiene
se ha convertido para reaccionar todavía, y su preferencia por el modo nocturno no es
almacenado localmente, no creo.

La selección del modo nocturno no persiste en todo el sitio es un problema independiente y
Necesitará uno elevado, si alguien pudiera levantarlo estaría muy agradecido. yo
no tengo acceso a GitHub en este momento

El lunes 16 de enero de 2017, mrugesh mohapatra [email protected]
escribió:

Hay varias instancias de "Campamento de código libre" en esta guía de estilo.

Tengo relaciones públicas pendientes de fusión. Ref freeCodeCamp / design-style-guide # 7
https://github.com/freeCodeCamp/design-style-guide/pull/7

Me gusta lo que has hecho con el menú desplegable, tal vez el texto necesite más
contraste (más blanco), ¡pero se ve genial!

-
Recibes esto porque estás en un equipo que se mencionó.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12538#issuecomment-272837258 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ARtk5hIk55x-gDVJsymtMwSfkxmlxp8Wks5rS1TPgaJpZM4Lj7u0
.

@ no-stack-dub-sack no estoy seguro de que esté excavando el texto verde sobre el gris cuando estoy flotando / activo. No parece tener suficiente contraste para ser legible. ¿Qué tal un fondo gris claro con texto gris oscuro?

@systimotic @raisedadead @hallaathrad Así que creo que esto se ve un poco mejor según el comentario de Justin y Mrugesh con respecto a más contraste, usé la @link-hover-color var que es @brand-primary oscurecida en un 15%, por lo que aún se mantiene un toque de la marca verde, pero ofrece un contraste sustancialmente mejor. Esto se encuentra dentro del menú desplegable y, para el desplazamiento, activo, foco de los enlaces de navegación.
image

Y creo que abriré una edición separada con respecto a los modales y explicaré la dificultad con los que están allí.

Esto se ve bien para mí.

Genialidad !!! ¡Tengamos ya una solicitud de extracción! 😉

¡En eso!

¿Fue útil esta página
0 / 5 - 0 calificaciones