Themenkarten

[Gonerdot]

Bitte sagen Sie mir, was ich in den Dateien ändern muss, um den Speicherort der Tags zu ändern.
Ich denke, der Titel sollte zuerst kommen.

Vorher:

Nachher:

[manchestermania (Quaerimus Felicitatem)]

Vielen Dank für diesen wunderbaren TC. Das Erscheinungsbild ist wirklich modern, schlicht und edel.

Eine Frage und eine Bitte:

Kann die Suchergebnisansicht auch das gleiche Erscheinungsbild haben? Es wäre wirklich schön, wenn die Suchergebnisansicht die gleiche wäre wie die TC-Ansicht, wenn man bedenkt, dass unsere Benutzer die Suchfunktion sehr häufig nutzen.

Nochmals vielen Dank für diese Arbeit.

[chapoi]

@manchestermania

Kann die Anzeige der Suchergebnisse auch das gleiche Aussehen haben? Es wäre wirklich schön, wenn die Anzeige der Suchergebnisse die gleiche wäre wie die Anzeige von TC, da unsere Benutzer die Suchfunktion sehr häufig nutzen.

Das wäre cool, aber leider ist das ein völlig anderer Bereich der App. Daher ist es nicht möglich, ihn einfach dort anzuwenden. Es wäre im Grunde eine komplett neue Komponente, um das zu erreichen.

[Ahmed26]

@chapoi Wie kann ich die Bildgröße und den Themenbereich reduzieren?

Themenkarten sind zu groß

[P_O]

Es ist eine wirklich großartige Theme-Komponente. Darf ich einige Verbesserungen vorschlagen, darunter das Hinzufügen einer Einstellungsseite zur Bearbeitung der folgenden Punkte:

• Einstellungswert für abgerundete Ecken oder aus
• Einstellungswert für Schatten oder aus
• Einstellung zum Aktivieren/Deaktivieren von Antworten, Ansichten und Aktivität
• Poster anzeigen wahr oder falsch

[bloomexperiment (Tracey)]

@Gonerdot

Ich habe versucht, diese Komponente auf vielen Themes zu installieren, aber sie sieht überall ein wenig schief aus. Was mache ich falsch?

@chapoi

Okay, die Topic-Karten benötigen eine maximale Höhe, sonst gibt es Probleme wie:

@chapoi

Es könnte etwas mit der Schriftgröße, der Schriftart oder dem Zeilenabstand zu tun haben. Leider erfordert dies einige individuelle Anpassungen und ist nichts, wofür ich eine allgemeingültige Lösung anbieten kann.

Ich wollte das nur mitteilen, falls es für jemand anderen hilfreich ist:

Bei mir hatte ich das gleiche Problem, dass die maximale Höhe der Topic-Karte nicht ausreichte, wenn ein Thumbnail vorhanden war – als ich dies als Theme-Komponente auf dem Minima-Theme installierte.

Dies ist der relevante CSS-Code, den ich zur Behebung verwendet habe:

// Maximale Höhe für Topic-Karten mit Thumbnail erhöhen
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

(Die Standardhöhe schien 210 Pixel zu betragen, als ich sie im Inspektor überprüft habe)

Muss aber möglicherweise angepasst werden – habe es bei mobilen Breiten noch nicht überprüft.

Vorher

Nachher

[Heliosurge (Dan DeMontmorency)]

Ich habe mich gefragt, ob dies so konfiguriert werden könnte, dass ausgewählt werden kann, welche Kategorien die Themenkarte verwenden. Es wäre großartig, wenn dies in Theme verwendet würde, da die Themen-Miniaturansichten auf Mobilgeräten nicht so benutzerfreundlich sind.

Sehr schöne Komponente

[chapoi]

@bloomexperiment

Bei mir hatte ich das gleiche Problem mit der maximalen Höhe der Themenkarte, die nicht groß genug war, wenn ein Vorschaubild vorhanden war – als ich dies als Theme-Komponente im Minima-Theme installierte.

Dies ist das relevante CSS, das ich zur Behebung verwendet habe:

// Erhöhe die maximale Höhe für Themenkarten mit Vorschaubild
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

(Die Standardhöhe schien 210px zu betragen, als ich sie im Inspektor überprüfte)

Muss aber vielleicht angepasst werden – habe es noch nicht auf mobilen Breiten überprüft.

Ja, das meinte ich mit dem, was ich zuvor gesagt habe: Abhängig von anderen Parametern können 210px zu klein oder 275px zu groß sein. Es ist schwierig, eine Einheitslösung zu finden.

Ich werde vielleicht noch einige Einstellungen hinzufügen (wie die Auswahl nach Kategorie, wie von @Heliosurge gewünscht), einschließlich vielleicht einer maximalen Größeneinstellung, damit jedes Forum damit experimentieren kann.

[Truest]

1. Was ist mit dem Verschieben des Fotos nach rechts?\nDie Platzierung mit und ohne Foto ist unterschiedlich und inkonsistent.\n2. Es scheint, dass der untere Text abgeschnitten wird, da einige Inhalte angezeigt werden.

[icaria36]

Ich habe mich gefragt, wie diese Themenkomponente auf Air Theme aussieht, auch in Kombination mit Themen mit und ohne Bilder. Sie sieht vielversprechend aus, ist aber noch nicht ganz ausgereift. Vielleicht kann CSS allein die Probleme beheben, oder es ist mehr Arbeit nötig.

Auf Mobilgeräten sieht es gut aus!

Ich werde es vorerst deinstallieren, aber ich werde dieses Thema im Auge behalten, da es sehr gut aussieht, wie beabsichtigt.

Und ja, es wäre eine schöne Ergänzung, das Kategoriebild zu verwenden, wenn das Thema kein eigenes Bild hat.

[icaria36]

Was wäre nötig, damit die Topic Cards-Komponente nicht nur die s eines Themas (wie bisher) anzeigt, sondern auch Aufrufe und Kommentare, so wie es die offizielle Topic List Thumbnails im Blog-Modus tut?

Topic List Thumbnails

Topic Cards

Außerdem finde ich, dass die Verwendung des Datums der letzten Aktivität von Topic List Thumbnails („1d“ oben) besser ist als das „Veröffentlicht“-Datum von Topic Card. Das Aktivitätsdatum ist konsistent mit der Standardeinstellung von Discourse und liefert dem Benutzer mehr Informationen. Außerdem passt die Designimplementierung sehr gut neben Aufrufe, Likes und Beiträge.

Falls es Sie interessiert, hier sind einige zusätzliche Gedanken nach vielen Stunden des Testens von Kombinationen zwischen dem Standardthema, Air Theme, Topic Cards und Topic List Thumbnails, sowie einigem CSS-Gefummel.

Ich habe mich für Topic Cards + Standardthema entschieden, aufgepeppt mit den Modern Category + Group Boxes, die Karten für Kategorien mitbringen und zu den Topic Cards passen.

Gründe:

• Topic Cards verarbeitet Beiträge mit und ohne Bilder elegant.
• Das Air-Theme ist sehr cool, aber Topic Cards plus Modern Category kommt dem schon ziemlich nahe.
• Wenn man beim Standardthema bleibt, ist die Kompatibilität mit jedem offiziellen Theme-Komponente sofort gegeben.

[icaria36]

Ok, vielleicht ist diese Frage einfacher:

Derzeit werden die vorgeschlagenen Themen am Ende jeder Seite auch als Karten angezeigt. Während ich die Karten auf den Hauptseiten liebe, finde ich, dass sie am Ende aller Seiten überdimensioniert sind und vom eigentlichen Seiteninhalt oder der Diskussion ablenken.

Gibt es eine Möglichkeit, eine einfache Liste von vorgeschlagenen Themen anzuzeigen (so nah wie möglich am Standardthema), ohne die Themenkarten auf den Hauptseiten zu beeinträchtigen?

[chapoi]

Im Moment nicht, nein. Aber meiner Meinung nach ist das eine gute Anfrage, daher können Sie immer eine Funktionsanfrage dafür stellen und vielleicht wird sie auf diese Weise berücksichtigt.

[icaria36]

@chapoi

Aber es ist eine gute Anfrage, meiner Meinung nach, also können Sie immer versuchen, eine Funktionsanfrage dafür zu stellen.

Ok, danke. Erledigt, auch für meine andere Anfrage oben:

• Don't show Topic Cards' style in the Suggested topics
• Add icons for Views and Replies, and Last Activity date in Topic Cards

Und übrigens, gestern habe ich das versucht, weil ich auf dasselbe Problem gestoßen bin, dass der Inhalt aus den Karten herausragt:

@bloomexperiment

Das ist das relevante CSS, das ich verwendet habe, um es zu beheben:

// Erhöhe die maximale Höhe für Thema-Karten mit Miniaturansicht
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

Hat das die mobile Ansicht nicht durcheinander gebracht? Ich habe es gerade versucht und es hat sie in meinem Fall durcheinander gebracht.

[chapoi]

Ich werde mir das ansehen. Zumindest werde ich eine Einstellung für die Höhe hinzufügen, um das Anpassen zu erleichtern. Ich werde eine Erinnerung einstellen, damit ich es nicht vergesse.

[icaria36]

Einige Beobachtungen, die helfen könnten, die Höhe von Themenkarten zu begrenzen. Ich habe dies nicht gründlich getestet, aber es scheint, dass…

• Während die Beschreibung immer auf drei Zeilen beschränkt ist, kann der Titel auf zwei oder mehr Zeilen springen. Es ist relativ einfach, dass ein Titel eine zweite Zeile benötigt, und das Design könnte dies berücksichtigen.
• Wenn es viele Tags gibt und diese nicht neben die Kategorie passen, springen sie alle in eine neue Zeile darunter. Es wäre natürlicher und platzsparender, wenn die Tags immer neben der Kategorie gerendert würden und dann die Tags, die nicht in die erste Zeile passen, in die zweite Zeile fließen würden.
• „Veröffentlicht [Datum]“ und das stehen derzeit in einer neuen Zeile unter dem Autor. Das „Veröffentlicht“-Element könnte jedoch neben dem rechtsbündig in derselben Zeile wie der Autor stehen. Dies würde vertikalen Platz bei jedem Eintrag sparen und das Risiko verringern, dass Inhalte überlaufen.

Nur für den Fall, dass die Erklärung zu den Tags nicht klar ist. Hier sehen Sie, wie sie in einer neuen Zeile beginnen, anstatt neben der Kategorie zu beginnen, wie sie es standardmäßig tun:

[eisammy (Sammy)]

Das passiert hier

[icaria36]

Ich habe mich gefragt, ob es technisch möglich ist, ein Limit von einer Zeile für Tags zu erzwingen, so wie es ein Limit von 2 Zeilen für den Titel und 3 Zeilen für die Beschreibung gibt.

Die meisten Discourse-Instanzen verwenden 0-5 Tags, und eine Zeile ist für sie mehr als ausreichend. Einige (wie unsere) verwenden möglicherweise viele Tags, aber wir müssen nicht alle auf den Themenkarten sehen. Nur die ersten zu sehen, reicht aus, um eine Vorstellung zu geben.

Das Hinzufügen von Beschränkungen für die Anzahl der Zeilen würde die Themenkarten mit unterschiedlichen Bildgrößen und Seitenverhältnissen zuverlässiger machen:

• 1 Zeile für Kategorie und Tags
• Bis zu 2 Zeilen für den Titel
• Bis zu 3 Zeilen für die Beschreibung
• 1 Zeile für Autor, Veröffentlichungsdatum und Likes.

[icaria36]

@icaria36

„Veröffentlicht am [date]“ und das stehen in einer neuen Zeile unter dem Autor. Das „Veröffentlicht“-Element könnte jedoch neben dem rechtsbündig in derselben Zeile wie der Autor stehen. Dies würde vertikalen Platz bei jedem Eintrag sparen und das Risiko verringern, dass Inhalte herausfallen.

FYI, wir werden uns damit unter Add icons for Views and Replies, and Last Activity date in Topic Cards befassen.

[bloomexperiment (Tracey)]

@icaria36

@bloomexperiment

Dies ist das relevante CSS, das ich zur Behebung verwendet habe:

// Increase max height for topic cards with thumbnail
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

Hat das nicht die mobile Ansicht beeinträchtigt? Ich habe es gerade ausprobiert und es beeinträchtigt sie in meinem Fall.

Ahh ja, ich habe vergessen, hier mit meinem Update dazu zu kommentieren: Ich musste diesen Code zu desktop.scss und nicht zu common.scss hinzufügen.

Ich kann meinen ursprünglichen Kommentar nicht mehr bearbeiten, aber ich habe ihn in meiner Theme-Komponente aktualisiert: Minima Adjustments for Topic Cards