Tags auf der Themenkarte im Horizon-Theme anzeigen

Merkmal
,
1

Mir ist nicht aufgefallen, dass Tags auf den Thema-Karten in den Themenlisten des Horizon-Designs fehlten, bis ich Folgendes sah:

Es wäre sicherlich sehr hilfreich, sie zu haben, daher hat dies mein :+1:!

2 „Gefällt mir“
3

Stimme zu! Es wäre schön, wenn man ein- und ausschalten könnte, ob Tags angezeigt werden.

Bearbeiten: Einige Workaround-CSS, die für uns gut funktioniert haben (WIP)

Gemeinsames CSS:

/* Horizon Topic List Metadaten + Pill Tags */
.topic-list-body .topic-list-item {
  row-gap: var(--space-2);
}

.topic-list-body .topic-list-item .link-bottom-line .badge-category__wrapper  {
  display: none;
}

.topic-list-body .topic-list-item td.main-link .link-bottom-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: var(--space-1);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  font-size: var(--font-0) !important;
  line-height: 1.35;
  grid-column: 2 / -2;
}

.topic-list-body .topic-list-item td.main-link .discourse-tags {
  display: inline-flex!important;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) * 1.25) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--primary-low-mid);
  background: var(--secondary);
  color: var(--primary-high);
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 var(--secondary-very-high),
    inset 0 -1px 0 var(--primary-low);
  text-decoration: none;
  margin-right: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag:hover,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box:hover {
  border-color: var(--primary-low);
  background: var(--secondary-high);
}

Mobiles CSS:

    .topic-list-body .topic-list-item .badge-category__wrapper {
        font-size: var(--font-down-1);
    }
    .topic-list-item .discourse-tags {
    font-weight: normal;
    font-size: var(--font-down-2);
}
2 „Gefällt mir“
4

Schön!

Hätten Sie vielleicht Interesse daran, dies als Theme Component zu verpacken und zu teilen?

1 „Gefällt mir“
5

Ich würde es lieber direkt als Einstellung in das Horizon-Theme integriert sehen, dort wäre es angemessener. Ansonsten fügen wir immer wieder einzelne Funktionen TC für TC hinzu.

Ich werde sehen, ob und wie ich einen PR einreichen kann… aber verlassen Sie sich nicht darauf.

2 „Gefällt mir“
6

Da ich kein Profi bin, sind CSS-Operationen für mich etwas schwierig……:sob: Könnte diese Tag-Anzeigefunktion als integrierte Einstellung im Horizon-Theme verpackt werden? Oder vielleicht als separates Theme-Komponente implementiert werden? Wenn es irgendeine Möglichkeit gibt, dass dies geschieht, wäre ich bereit zu warten! Wenn es auch nur die geringste Chance gibt, wäre ich sehr dankbar, wenn mich jemand auf dem Laufenden halten könnte. Vielen Dank!

7

Alternativ könnten Sie mir bitte sagen, wo auf der Website ich dieses CSS hinzufügen soll? Ich kann in meinem Horizon-Theme keine Stelle finden, an der ich CSS schreiben kann (ich entschuldige mich, wie Sie sehen können, bin ich kein Profi, daher fehlen mir diese Programmiergrundlagen :sob: :cry: ).

8

Sie können Ihre eigene Themenkomponente zum Thema hinzufügen, in dem Sie benutzerdefiniertes CSS hinzufügen

1 „Gefällt mir“