Horizonテーマのトピックカードにタグを表示

特徴
,
1

Horizon テーマのトピックリストのトピックカードにタグが表示されないことに、この投稿を見るまで気づきませんでした。

タグが表示されると非常に便利になるので、これは私の :+1: です！

「いいね！」 2
3

同意します！タグの表示/非表示を切り替えられると便利ですね。

編集：私たちにとってうまく機能した（WIP）回避策のCSS

共通CSS：

/* Horizon トピックリストのメタデータ + ピルタグ */
.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);
}

モバイル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
4

素晴らしい！

それをテーマコンポーネントとしてパッケージ化して共有することに興味はありませんか？

「いいね！」 1
5

Horizonテーマに直接設定として組み込まれる方が適切だと思います。そうでなければ、単一機能のTCを追加し続けることになります。

プルリクエストを提出できるかどうか、またどのように提出できるかを確認しますが、期待はしないでください。

「いいね！」 2
6

私はプロではないので、CSSの操作は少し難しいです……:sob: このタグ表示機能をHorizonテーマの組み込み設定としてパッケージ化することは可能でしょうか？それとも、別のテーマコンポーネントとして実装することは可能でしょうか？もしそれが可能であれば、待つ価値はあります！わずかでも可能性があるなら、誰かが私に最新情報を提供してくれれば、本当に感謝します。本当にありがとうございます！

7

それとも、ウェブサイトのどこにこのCSSを追加すればよいか教えていただけますか？HorizonテーマではCSSを記述する場所が見つかりません（専門家ではないため、これらのプログラミングの基本が欠けていることをお詫びします:sob: :cry:）。

8

カスタムCSSを追加するテーマに独自のテーマコンポーネントを追加できます

「いいね！」 1