Wie zeige ich das Tor weiter unten im Beitrag an?

Entwickler
1

Vielen Dank für die tolle Komponente! Wäre es möglich, das Gate weiter unten im Beitrag anzuzeigen? (Unsere Themen beginnen alle mit einem Bild und wir möchten einen guten Text anzeigen oder sogar eine Stelle im Thema definieren, an der das Gate nach oben geht.) Jeder Hinweis (z. B. CSS-Hacks) ist willkommen!

2 „Gefällt mir“
2

Ja, ich habe mich etwas Ähnliches gefragt – vielleicht eine Einstellung für einen Prozentsatz, die geändert werden könnte.

3

Derzeit wird der Inhalt unter anderem mit der folgenden Technik verborgen:

  • Das Scrollen ist deaktiviert
  • Die Höhe des Seiteninhalts wird auf 100 % gesetzt

Sie könnten diese Dinge anpassen. Zum Beispiel:

body.topic-in-gated-category {
    height: 200%;
}

Dies ermöglicht weiteres Scrollen:

Dies könnte schöner gestaltet werden, indem vielleicht der blaue Bereich kürzer gemacht wird (¼ oder ⅓ des Bildschirms), auch der weiße Farbverlauf verkürzt wird…

Sie können auch Folgendes ändern:

.topic-in-gated-category .post-stream {
    max-height: 150vh;
    overflow: hidden;
}

Die Anzahl der anzuzeigenden Beiträge mit CSS auszuwählen, ist schwierig, da sie sich auf derselben Ebene wie kleine Aktionen, Zeitabstände und so weiter befinden.
Daher wird die Verwendung von CSS wie folgt:

.post-stream > *:nth-child(n+6) {
    display: none;
}

zeigt nicht immer die gleiche Anzahl von Beiträgen von einem Thema zum anderen an.

4 „Gefällt mir“
4

Das sieht so aus, als wäre das sehr nützlich für unser Forum. Können Sie mir sagen, wo dieser benutzerdefinierte Code hinzugefügt werden soll, z. B. in den Einstellungen der Komponente oder in der Theme-CSS?

Vielen Dank im Voraus

5

Hallo Jaime,

Ihr Theme-CSS oder ein separates Komponenten-CSS – beides sind akzeptable Optionen. Die Verwendung einer Komponente ermöglicht die einfache Anbindung an mehrere Themes, was der bevorzugte Weg wäre.

1 „Gefällt mir“
6

Danke @Arkshine. Und nachdem ich mich etwas mehr damit beschäftigt habe, glaube ich, dass ich das Repository für diese Komponente klonen oder forken muss und dann meine Bearbeitungen direkt am gemeinsamen CSS vornehmen muss, bevor ich die bearbeitete Version wieder in Discourse importiere? Ist das richtig?

1 „Gefällt mir“
7

Wenn Sie etwas CSS ändern möchten, können Sie ganz einfach eine neue Komponente über die Benutzeroberfläche erstellen.

  1. Gehen Sie zu Admin → Anpassen
  2. Klicken Sie auf Installieren
  3. Wählen Sie dann Neu erstellen. Der Typ sollte Komponente sein.
    image
    image519×357 5.62 KB

Das ist alles! Hängen Sie sie an Ihr Theme an; dann können Sie CSS/HTML bearbeiten.

Normalerweise würden Sie entweder forken, wenn Sie zur ursprünglichen Komponente auf Github beitragen möchten (indem Sie eine Pull-Anfrage erstellen), oder wenn Sie Ihre eigene Version erstellen möchten. Wenn Sie das tun, erhalten Sie keine Updates von der ursprünglichen Komponente; das ist wahrscheinlich nicht das, was Sie hier wollen!

1 „Gefällt mir“
8

Vielen Dank nochmals. Das Problem, denke ich, ist, dass die CSS-Eigenschaft in meiner benutzerdefinierten Komponente auch in der Basiskomponente aus dem Repository auf Github vorhanden sein wird.

Es sei denn, es gibt eine Möglichkeit anzugeben, dass eine Komponente die andere überschreiben soll, scheint es notwendig zu sein, einfach eine Kopie des Repos zu erstellen und meine bearbeitete Version zu verwenden (die jetzt funktioniert, ich werde nur keine Updates erhalten, wie Sie sagen).

9

Wenn Ihr CSS die ursprüngliche Komponente nicht überschreibt, können Sie !important zu einer Regel hinzufügen. Dies sollte funktionieren.

.topic-in-gated-category .post-stream {
    max-height: 150vh !important;
    overflow: hidden !important;
}
1 „Gefällt mir“
10

Das funktioniert perfekt, nochmals vielen Dank für die Hilfe!

1 „Gefällt mir“
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.