Отображение тегов на карточках тем в теме Horizon

[nathank (Nathan Kershaw)]

Я не заметил, что в теме Horizon на карточках тем в списках тем отсутствуют теги, пока не увидел это:

@lindsey

Тема Horizon не поддерживает отображение тегов на карточках тем, поэтому она несовместима с иконками тегов. Мы рассматриваем возможность добавить поддержку отображения тегов на карточках тем.

Безусловно, их наличие было бы очень полезным, поэтому я ставлю !

[jrgong]

Согласен! Было бы здорово иметь возможность включать/отключать отображение тегов.

Редактирование: Некоторые рабочие CSS-решения, которые хорошо сработали у нас (WIP)

Общий 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);
}

[nathank (Nathan Kershaw)]

@jrgong

Редакция: Обходной путь с CSS, который хорошо сработал у нас (в процессе)

Отлично!

Есть ли шанс, что вы заинтересуетесь упаковкой этого в компонент темы и его публикацией?

[jrgong]

Я бы предпочел, чтобы это было реализовано прямо в теме Horizon как настройка — это было бы более уместно. В противном случае мы просто будем продолжать добавлять по одной функции за раз.

Я посмотрю, смогу ли и как отправить PR… но не рассчитывайте на это.

[anoedo]

Я не профессионал, поэтому работа с CSS для меня немного сложна…… Возможно ли реализовать эту функцию отображения тегов как встроенную настройку в теме Horizon? Или, возможно, в виде отдельного компонента темы? Если есть хоть какая-то возможность, я готов подождать! Если есть хоть малейший шанс, я был бы очень признателен, если бы кто-то мог держать меня в курсе. Большое спасибо!

[anoedo]

Или, не могли бы вы подсказать, где на сайте нужно добавить этот CSS? Я не могу найти место для написания CSS в моей теме Horizon (извините, как вы видите, я не профессионал, поэтому мне не хватает этих основ программирования ).

[Moin]

Вы можете добавить собственный компонент темы в тему, где вы настраиваете пользовательский CSS

Customizing themes without an Edit code button

Sometimes, you may want to customize a Discourse theme but find that there’s no “Custom code” section with an “Edit code” button available. This often happens with remote themes (themes installed from an external source) and the preinstalled themes (Horizon & Foundation). Here’s how you can still add your customizations: Understanding the limitation For preinstalled themes, you see a banner telling you This theme is preinstalled and can not be deleted or customized For remote themes, you’ll…

[chapoi]

Просто хочу сообщить, что мы активно работаем над этим. Точных сроков пока нет, но это обязательно будет.

[lindsey (Lindsey Fogle)]

Теперь это стало возможным благодаря карточкам тем с высоким контекстом!

Horizon: High Context Topic Cards