Afficher les tags sur la carte du sujet dans le thème Horizon

Fonctionnalité
,
1

Je n’avais pas remarqué que les étiquettes n’étaient pas sur les cartes de sujets dans les listes de sujets du thème Horizon jusqu’à ce que je voie ceci :

Ce serait certainement très utile de les avoir, donc ceci a mon :+1: !

2 « J'aime »
3

D’accord ! Ce serait bien de pouvoir activer/désactiver l’affichage des tags.

Modification : Quelques CSS de contournement qui ont bien fonctionné pour nous (en cours de développement)

CSS commun :

/* Horizon topic list metadata + 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);
}

CSS mobile :

    .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 « J'aime »
4

Bien !

Y a-t-il une chance que vous soyez intéressé par l’empaquetage en tant que composant de thème et que vous le partagiez ?

1 « J'aime »
5

Je préférerais que ce soit intégré directement dans le thème Horizon en tant que paramètre, ce serait plus approprié là-bas. Sinon, nous continuerons à ajouter des fonctionnalités TC une par une.

Je vais voir si et comment je pourrais soumettre une PR… mais n’y comptez pas.

2 « J'aime »
6

Je ne suis pas un professionnel, donc les opérations CSS me posent quelques difficultés…… :sob: Est-il possible que cette fonctionnalité d’affichage des balises soit intégrée comme un paramètre intégré au thème Horizon ? Ou peut-être implémentée comme un composant de thème distinct ? S’il y a la moindre possibilité que cela se produise, je suis prêt à attendre ! S’il y a la moindre chance, j’apprécierais vraiment que quelqu’un me tienne au courant. Merci beaucoup !

7

Alternativement, pourriez-vous m’indiquer où sur le site web je dois ajouter ce CSS ? Je ne trouve aucun endroit pour écrire du CSS dans mon thème Horizon (je m’excuse, comme vous pouvez le voir, je ne suis pas un professionnel, donc il me manque ces bases de programmation :sob: :cry: ).

8

Vous pouvez ajouter votre propre composant de thème au thème dans lequel vous ajoutez du CSS personnalisé

1 « J'aime »