Overlays falsch positioniert beim Einbetten von Discourse

Entwickler
1

Hallo :waving_hand:

Wenn ich versuche, den gesamten Discourse einzurahmen, um unterschiedlich gefärbte Seitenleisten zu ermöglichen, tritt ein Problem mit der Platzierung von Overlays wie beispielsweise der Benutzerkarte auf.

17
171113×780 58.9 KB

Die Benutzerkarte soll direkt neben dem geklickten Benutzer geöffnet werden. Tatsächlich ist sie jedoch genau um die Breite meiner Seitenleisten horizontal verschoben. Daher meine Frage: Wie wird die Positionierung dieser Overlays realisiert, und wie könnte ich solche Verschiebungen vermeiden, während ich trotzdem Seitenleisten einrichte?

Vielen Dank :clinking_beer_mugs:

2

Ja, mir ist das passiert, als ich während der Entwicklung eines großen Plugins für einen Kunden ein extra großes Banner hinzugefügt habe. In meinem Fall war der Offset völlig absurd (er lag außerhalb des Bildschirms!).

Es mag eine einfachere Lösung geben, aber es stellt sich heraus, dass dies etwas aufwendig ist und erfordert, dass du eine Funktion überschreibst, z. B. für die Benutzerkarte:

          api.modifyClass('component:user-card-contents',  {
            _positionCard(target) {

Das stammt aus einem Mixin, das hier zu finden ist: discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub

Ich habe jQuery verwendet, um basierend auf der Sichtbarkeit des Banners zu entscheiden, ob die Änderung angewendet werden soll oder nicht: Auf einigen Seiten hatte ich das große „Banner“, auf anderen nicht. Du könntest eine ähnliche Strategie verwenden.

Um ehrlich zu sein, sieht dein Beispiel nicht so schlimm aus – ich würde in Erwägung ziehen, es so zu lassen.

3

Das Problem ist, dass im Grunde alle Overlays falsch positioniert sind. Ich möchte nicht wirklich die Positionierungsmethoden aller möglicherweise existierenden Overlays überschreiben.

Auf dem Beispielbild sieht es noch akzeptabel aus, da das Browserfenster nicht in voller Größe war. Die Seiten sind normalerweise breiter, wodurch die Fehlausrichtung noch schlimmer wird. Einige Overlays sind fast außerhalb des Bildschirms.

4

Ja, das ist ärgerlich. Vielleicht solltest du Anpassungen auf die Themenliste beschränken und die Themenansicht so weit wie möglich unberührt lassen. Vermeide zudem zu viele Varianten, um es dir einfach zu halten.

5

Ich habe keine bestimmte Ansicht angepasst. Ich möchte das gesamte Forum in einen Container einbetten, um die Seiten unterschiedlich einzufärben.

6

Wie gehst du dabei vor? Fügst du einen neuen Container um das #main-Div hinzu?

Es könnte einfacher sein, stattdessen eine Hintergrundfarbe für #main-outlet hinzuzufügen und dann die Hintergrundfarbe für die Seiten auf body zu setzen.

7

Ja, später habe ich auch so gedacht! Also:

body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

Das Problem mit dem klobigen Banner besteht zwar noch, aber es ist nicht so groß.