Exibir Tags no card do tópico no tema Horizon

Funcionalidade
,
1

Não percebi que as tags não estavam nos cartões de tópico nas listas de tópico do tema Horizon até ver isto:

Seria certamente muito útil tê-las, por isso tem o meu :+1:!

2 curtidas
3

Concordo! Seria bom poder ativar/desativar a exibição das tags.

Editar: Algumas soluções alternativas de CSS que funcionaram bem para nós (WIP)

CSS Comum:

/* Lista de tópicos Horizon metadados + tags de pílula */
.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 para Dispositivos Móveis:

    .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 curtidas
4

Legal!

Alguma chance de você se interessar em empacotar isso como um Componente de Tema e compartilhar?

1 curtida
5

Eu preferiria ver isso integrado diretamente ao tema Horizon como uma configuração, seria mais apropriado lá. Caso contrário, continuaremos apenas adicionando TC de recurso único após TC.

Vou ver se e como posso enviar um PR… mas não conte com isso.

2 curtidas
6

Não sou um profissional, então as operações de CSS são um pouco desafiadoras para mim……:sob: É possível ter este recurso de exibição de tags empacotado como uma configuração integrada no tema Horizon? Ou talvez implementado como um componente de tema separado? Se houver alguma possibilidade disso acontecer, eu estaria disposto a esperar! Se houver a menor chance, eu realmente apreciaria se alguém pudesse me manter atualizado. Muito obrigado!

7

Alternativamente, você poderia me dizer onde no site devo adicionar este CSS? Não consigo encontrar nenhum lugar para escrever CSS no meu tema Horizon (peço desculpas, como você pode ver, não sou um profissional, então me faltam esses noções básicas de programação :sob: :cry: ).

8

Você pode adicionar seu próprio componente de tema ao tema em que adiciona CSS personalizado

1 curtida