Freecodecamp: Style de liste déroulante communautaire en mode nuit

Hmm Et si on essayait le contraire? garder le gris foncé, en utilisant le clair pour le texte lui-même?
J'aiderai @systimotic QA si quelqu'un est prêt à soumettre un PR;)

D'accord avec Justin, et les codes de couleurs spécifiques peuvent être pris à partir d'ici
https://www.freecodecamp.com/design-style-guide/

@systimotic @raisedadead @hallaathrad
Hé les gars aussi, qu'en est-il de ça:

J'allais ouvrir un numéro séparé pour cela, mais cela semble être un endroit sensé pour intervenir ...

Je ne peux pas dire si quelqu'un a dit qu'il y travaillerait - sinon, je le prendrai si nous convenons que les deux devraient être corrigés!

Ouais ... J'ai convenu que les deux devraient être réparés. Mais gardez à l'esprit que ce modal n'est plus disponible lors de la mise en scène.

@ no-stack-dub-sack Vous pouvez continuer à corriger la liste déroulante 👍
Il serait peut-être préférable de laisser le modal, car il est quand même supprimé.

😕 Je viens de vérifier, et le modal est disponible sur la mise en scène. Je suppose que cela a été inversé. Je ne sais pas quel est le statut à ce sujet, s'il est de retour temporairement ou définitivement.
Il a été rétabli dans https://github.com/freeCodeCamp/freeCodeCamp/pull/11253. D'après ce que je peux dire, il est de retour en permanence, mais je ne suis pas certain.

@systimotic @raisedadead Ok, donc je peux aller de l'avant et réparer les deux - et si cela finit par être supprimé - pas de problème!

Vous avez également remarqué que si vous cliquez sur le bouton de la communauté pendant que la liste déroulante est vers le bas, puis que vous sortez la souris de la liste déroulante, elle reste blanche au lieu de revenir au vert:

En supposant que ce n'est pas intentionnel, nous essaierons de l'examiner également.

@raisedadead @systimotic

D'accord avec Justin, et les codes de couleurs spécifiques peuvent être pris à partir d'ici
https://www.freecodecamp.com/design-style-guide/

Cela soulève en fait deux bons points:

1. La plupart des couleurs du mode nuit ne figurent
2. Et il existe plusieurs exemples de "Free Code Camp" dans ce guide de style, qui devraient être modifiés par numéro 12472.

Cependant, je ne trouve pas cela dans la base de code, est-ce que quelqu'un sait où cela vit?

Ok, donc j'ai quelque chose de concocté qui, à mon avis, est joli et utilise les couleurs du mode nuit / de la marque, y compris la résolution du problème de

Et voici la liste déroulante:

MAIS, lorsque j'ai commencé à cliquer, par exemple, en allant à la boutique, puis en revenant à la carte, le style revient aux couleurs claires. La page revient momentanément en "mode jour", puis lorsqu'elle revient en mode nuit, les styles de liste déroulante sont revenus. Des idées sur pourquoi cela pourrait être?

Voici mon code, insérez à la ligne 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;
    }
  }

Les modaux - j'ai travaillé un peu là-dessus, mais ils viennent avec toute une série d'autres problèmes que je suis trop fatigué pour aborder maintenant. Parce qu'il y a aussi le modal "Bug" ...

Il existe plusieurs exemples de "Free Code Camp" dans ce guide de style

J'ai PR en attente de fusion. Réf https://github.com/freeCodeCamp/design-style-guide/pull/7

J'aime ce que vous avez fait avec le menu déroulant, peut-être que le texte a besoin de plus de contraste (plus blanc), mais ça a l'air cool!

Cela me semble être un problème de page de réaction / statique. La page de la boutique n'a pas
été converti pour réagir encore, et votre préférence pour le mode nuit n'est pas
stocké localement, je ne pense pas.

La sélection du mode nuit qui ne persiste pas sur le site est un problème distinct et
aura besoin d'un soulevé, si quelqu'un pouvait le soulever, je serais très obligé. je
n'ont pas accès à GitHub pour le moment

Le lundi 16 janvier 2017, mrugesh mohapatra [email protected]
a écrit:

Il existe plusieurs exemples de "Free Code Camp" dans ce guide de style

J'ai PR en attente de fusion. Ref freeCodeCamp / design-style-guide # 7
https://github.com/freeCodeCamp/design-style-guide/pull/7

J'aime ce que vous avez fait avec le menu déroulant, peut-être que le texte a besoin de plus
contraste (plus blanc), mais semble cool!

-
Vous recevez cela parce que vous faites partie d'une équipe qui a été mentionnée.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12538#issuecomment-272837258 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/ARtk5hIk55x-gDVJsymtMwSfkxmlxp8Wks5rS1TPgaJpZM4Lj7u0
.

@ no-stack-dub-sack pas sûr que je creuse le texte vert sur le gris en survolant / actif. Ne semble pas avoir suffisamment de contraste pour être lisible. Que diriez-vous d'un fond gris clair avec du texte gris foncé?

@systimotic @raisedadead @hallaathrad Donc, je pense que cela semble un peu mieux selon le commentaire de Justin & Mrugesh concernant plus de contraste, j'ai utilisé le @link-hover-color var qui est @brand-primary assombri de 15%, donc il garde toujours un soupçon de la marque verte, mais offre un contraste nettement meilleur. Cela se trouve dans la liste déroulante et pour le survol, actif, focus des liens de navigation.

Et je pense que je vais ouvrir une question distincte concernant les modaux et expliquer la difficulté avec ceux-ci.

Cela me semble bien.

Génialité !!! Permet déjà d'avoir une demande Pull! 😉

Dessus!