Olá a todos,
Estou trabalhando com tópicos que às vezes recebem muitas tags (muitas delas são geradas automaticamente a partir de um feed ICS). Na interface do Discourse, as tags simplesmente continuam a quebrar a linha, o que torna as listas de tópicos muito altas e mais difíceis de percorrer.
Gostaria de fazer algo semelhante à forma como as categorias são exibidas nas listas de tópicos:
- Mostrar as primeiras algumas (digamos 5)
- Em seguida, recolher o restante atrás de um indicador “+X mais”
O que eu tentei:
- O CSS pode ocultar tags após um certo número e até adicionar um marcador estático “…”, por exemplo,
/* Ocultar todas as tags após a 5ª */
.topic-list .discourse-tags a:nth-of-type(n+6) {
display: none;
}
/* Adicionar … após a 5ª */
.topic-list .discourse-tags a:nth-of-type(5)::after {
content: " …";
}
Isso funciona para ocultar, mas o CSS não consegue contar dinamicamente quantas foram ocultadas, então não consigo obter “+3 mais”.
Minha pergunta:
- Existe uma maneira integrada de limitar as tags por exibição de tópico?
- Se não, existe um trecho de exemplo (talvez da renderização de categorias) que eu possa adaptar em um componente de tema para adicionar a lógica “+X mais” para tags?
Agradeço antecipadamente!
