Visualizza i tag sulla scheda dell'argomento nel tema Horizon

Funzionalità
,
1

Non avevo notato che i tag non fossero presenti sulle schede degli argomenti negli elenchi degli argomenti del tema Horizon finché non ho visto questo:

Sarebbe certamente molto utile averli, quindi questo ha il mio :+1:!

2 Mi Piace
3

Concordo! Sarebbe bello poter abilitare/disabilitare la visualizzazione dei tag.

Modifica: Alcune soluzioni CSS che hanno funzionato bene per noi (WIP)

CSS comune:

/* Elenco argomenti Horizon metadati + tag pillola */
.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 per dispositivi mobili:

    .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 Mi Piace
4

Bello!

C’è qualche possibilità che tu sia interessato a impacchettarlo come componente tematico e condividerlo?

1 Mi Piace
5

Preferirei vederlo integrato direttamente nel tema Horizon come impostazione, sarebbe più appropriato lì. Altrimenti, continueremo solo ad aggiungere singole funzionalità TC dopo TC.

Vedrò se e come potrei inviare una PR… ma non contarci.

2 Mi Piace
6

Non sono un professionista, quindi le operazioni CSS mi risultano un po’ difficili… :sob: È possibile che questa funzionalità di visualizzazione dei tag venga inclusa come impostazione predefinita nel tema Horizon? O magari implementata come componente separato del tema? Se ci fosse la minima possibilità, sarei disposto ad aspettare! Se ci fosse anche una minima possibilità, apprezzerei molto se qualcuno potesse tenermi aggiornato. Grazie mille!

7

In alternativa, potresti dirmi dove sul sito web dovrei aggiungere questo CSS? Non riesco a trovare un posto dove scrivere CSS nel mio tema Horizon (mi scuso, come puoi vedere non sono un professionista, quindi mi mancano le basi di programmazione :sob: :cry: ).

8

Puoi aggiungere il tuo componente tema al tema in cui aggiungi CSS personalizzato

1 Mi Piace