Einfacher responsiver Footer

[Johani (Joe)]

Ich habe einige Fehlerbehebungen vorgenommen.

Wichtige Änderungen:

• Die Komponente verwendet nun CSS-Variablen, sodass sie mit dem Dark-Mode kompatibel ist

• Einige Korrekturen an Media Queries, um den von @mbauman gemeldeten Fehler zu beheben

• Eine Einstellung hinzugefügt, mit der Sie steuern können, ob der Footer auf Seiten mit Anmeldepflicht angezeigt wird

  

https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b

@rolando

Ich habe meine .wrap mit Media Queries breiter gemacht (1200 px), sodass das Forum nach einer bestimmten Auflösung breiter wird. Wenn ich den responsiven Footer aktiviere, wird die .wrap schmaler (1100 px), aber nur der „Board-Teil" und nicht die .d-header .wrap noch die .footer, die beide bei (1200 px) bleiben. Sobald ich den responsiven Footer deaktiviere, sieht alles wieder so breit aus (1200 px), wie beabsichtigt.

Die Ursache hierfür ist die CSS-Spezifität. Ihr CSS zielt auf .wrap ab und funktioniert, aber diese Komponente enthält auch CSS, das auf #main-outlet abzielt und einige Eigenschaften hinzufügt, um den Footer auch auf kurzen Seiten unten zu halten.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

Der Selektor #main-outlet ist spezifischer als Ihr Selektor .wrap, da er auf einer ID basiert, und überschreibt daher Ihre Stile.

Sie können dies beheben, indem Sie folgendes CSS hinzufügen:

#main {
  #main-outlet {
    width: 1200px; // oder die gewünschte Breite
  }
}

@Edward_Legaspi

Hallo. Gibt es eine Möglichkeit, die Anzahl der Footer-Spalten auf 3 zu begrenzen?

Ja, entfernen Sie einfach alle zusätzlichen Spalten, die Sie in den Einstellungen nicht benötigen, und Sie erhalten drei Spalten.

@PoojaPatel

Nach dem Update tritt in der Chrome-Konsole der folgende Fehler auf.

Ich kann dieses Problem nicht reproduzieren, aber der Fehler deutet darauf hin, dass Ihre Einstellungen nicht korrekt sind. Bitte überprüfen Sie dies noch einmal und stellen Sie sicher, dass Sie die Anweisungen unter jeder Einstellung befolgt haben. Wenn Ihr Problem weiterhin besteht, teilen Sie bitte einen Link zur Website mit, auf der Sie das Problem sehen.

---

Ich habe etwas Aufräumarbeit geleistet und die Antworten zu Fehlern gelöscht, die behoben werden, sobald Sie die Komponente aktualisieren. Wenn Ihr Problem weiterhin besteht, können Sie gerne erneut darüber posten.