Freecodecamp: Community-Dropdown-Stil im Nachtmodus

Erstellt am 15. Jan. 2017  ·  16Kommentare  ·  Quelle: freeCodeCamp/freeCodeCamp

Fehlerbeschreibung

In https://github.com/freeCodeCamp/freeCodeCamp/pull/12288 wurde der Navigation ein Dropdown-Menü hinzugefügt. Beim Auschecken von https://github.com/freeCodeCamp/freeCodeCamp/pull/12532 habe ich festgestellt, dass dieses Dropdown-Menü im Nachtmodus sehr hell ist. Ich denke, es kann einige Styling-Updates verwenden.

Ich glaube, die Änderungen sollten irgendwo hier vorgenommen werden .

Hat jemand eine Idee, wie es aussehen soll, insbesondere welche Farben es verwenden soll?
/ cc @QuincyLarson @ freeCodeCamp / moderators

Bildschirmfoto

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

help wanted UI

Hilfreichster Kommentar

Mit Justin einverstanden, und die spezifischen Farbcodes können von hier übernommen werden
https://www.freecodecamp.com/design-style-guide/

Alle 16 Kommentare

Hmm Wie wäre es, wenn wir das Gegenteil versuchen? das dunkle Grau behalten und das helle für den Text selbst verwenden?
Ich helfe @systimotic QA, wenn jemand

Mit Justin einverstanden, und die spezifischen Farbcodes können von hier übernommen werden
https://www.freecodecamp.com/design-style-guide/

@systimotic @raisedadead @hallaathrad
Hey Leute auch, was ist damit:
image

Wollte ein separates Thema dafür eröffnen, aber dies scheint ein vernünftiger Ort zu sein, um ...

Ich kann nicht sagen, ob jemand gesagt hat, dass er daran arbeiten wird - wenn nicht, werde ich es übernehmen, wenn wir uns einig sind, dass beide behoben werden sollten!

Yup .. Ich stimmte zu, dass beide behoben werden sollten. Beachten Sie jedoch, dass dieses Modal beim Staging nicht mehr verfügbar ist.

@ no-stack-dub-sack Sie können das Dropdown-Menü 👍 reparieren
Am besten lassen Sie das Modal, da es sowieso entfernt wird.

😕 Ich habe es gerade überprüft und das Modal ist beim Staging verfügbar. Ich denke, das wurde rückgängig gemacht. Ich bin mir nicht sicher, wie der Status lautet, ob er vorübergehend oder dauerhaft zurück ist.
Es wurde in https://github.com/freeCodeCamp/freeCodeCamp/pull/11253 zurückgesetzt. Soweit ich weiß, ist es dauerhaft zurück, aber ich bin mir nicht sicher.

@systimotic @raisedadead Ok, also kann ich beides reparieren - und wenn es entfernt wird - kein Problem!

Beachten Sie auch, dass, wenn Sie auf die Community-Schaltfläche klicken, während das Dropdown-Menü geöffnet ist, und dann mit der Maus aus dem Dropdown-Menü herausfahren, diese weiß bleibt, anstatt wieder grün zu werden:

image

Angenommen, dies ist unbeabsichtigt, so wird auch versucht, dies zu betrachten.

@raisedadead @systimotic

Mit Justin einverstanden, und die spezifischen Farbcodes können von hier übernommen werden
https://www.freecodecamp.com/design-style-guide/

Dies wirft tatsächlich zwei gute Punkte auf:

  1. Viele der Nachtmodusfarben sind nicht in diesem Styleguide enthalten
  2. In diesem Styleguide gibt es mehrere Instanzen von "Free Code Camp", die pro Ausgabe Nr. 12472 geändert werden sollten

Ich kann dies jedoch nicht in der Codebasis finden. Weiß jemand, wo dies lebt?

Ok, so dass ich etwas stand gekocht , dass ich sieht nett aus und nutzt Nachtmodus / Markenfarben denken, einschließlich der Festsetzung Fokusart Ausgabe der Schaltflächen in der Navigationsleiste:
image

Und hier ist die Dropdown-Liste:
image
image

ABER als ich anfing herumzuklicken, zum Beispiel in den Laden ging und dann zur Karte zurückkehrte, kehrte das Styling zu den hellen Farben zurück. Die Seite kehrt vorübergehend in den "Tag-Modus" zurück. Wenn sie dann wieder in den Nacht-Modus wechselt, werden die Dropdown-Stile zurückgesetzt. Irgendwelche Ideen, warum das so sein könnte?

Hier ist mein Code, fügen Sie in Zeile 1073 von main.less ein:

.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;
    }
  }

Die Modalitäten - ich habe ein bisschen daran gearbeitet, aber sie bringen eine ganze Reihe anderer Probleme mit sich, auf die ich jetzt nicht mehr eingehen kann. Weil es auch das "Bug" -Modal gibt ...

In diesem Styleguide gibt es mehrere Instanzen von "Free Code Camp"

Ich habe PR bis zur Zusammenführung. Siehe https://github.com/freeCodeCamp/design-style-guide/pull/7

Mir gefällt, was Sie mit dem Dropdown gemacht haben, vielleicht braucht der Text mehr Kontrast (weißer), sieht aber cool aus!

Das klingt für mich wie ein Problem mit reaktiven / statischen Seiten. Die Shop-Seite hat nicht
wurde konvertiert, um noch zu reagieren, und Ihre Präferenz für den Nachtmodus ist nicht
lokal gespeichert, glaube ich nicht.

Die Auswahl des Nachtmodus, die nicht auf der gesamten Website beibehalten wird, ist ein separates Problem
Ich brauche eine Erhöhung, wenn jemand sie erhöhen könnte, wäre ich sehr verpflichtet. ich
Ich habe momentan keinen Zugriff auf GitHub

Am Montag, den 16. Januar 2017, mrugesh mohapatra [email protected]
schrieb:

In diesem Styleguide gibt es mehrere Instanzen von "Free Code Camp"

Ich habe PR bis zur Zusammenführung. Ref freeCodeCamp / design-style-guide # 7
https://github.com/freeCodeCamp/design-style-guide/pull/7

Mir gefällt, was Sie mit dem Dropdown gemacht haben, vielleicht braucht der Text mehr
Kontrast (weißer), sieht aber cool aus!

- -
Sie erhalten dies, weil Sie in einem Team sind, das erwähnt wurde.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/freeCodeCamp/freeCodeCamp/issues/12538#issuecomment-272837258 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/ARtk5hIk55x-gDVJsymtMwSfkxmlxp8Wks5rS1TPgaJpZM4Lj7u0
.

@ no-stack-dub-sack Ich bin mir nicht sicher, ob ich den grünen Text über das Grau grabe, wenn ich schwebe / aktiv bin. Scheint nicht genug Kontrast zu haben, um lesbar zu sein. Wie wäre es mit hellgrauem Hintergrund mit dunkelgrauem Text?

@systimotic @raisedadead @hallaathrad Ich denke, das sieht nach Justin & Mrugeshs Kommentar zu mehr Kontrast etwas besser aus. Ich habe die @link-hover-color var verwendet, die @brand-primary um 15% verdunkelt ist, also bleibt sie immer noch erhalten ein Hauch von Marke grün, bietet aber wesentlich besseren Kontrast. Dies befindet sich in der Dropdown-Liste und für den Schwebeflug im aktiven Fokus der Navigationslinks.
image

Und ich denke, ich werde ein separates Thema in Bezug auf die Modalitäten eröffnen und die Schwierigkeiten mit denen dort erklären.

Das sieht gut aus für mich.

Großartigkeit!!! Lasst uns schon eine Pull-Anfrage haben! 😉

Darauf!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen