Cartões de Tópico

[Discourse]

	Resumo	Topic Cards reestiliza a lista de tópicos para exibir como cartões com uma miniatura
	Visualizar	Visualizar no Criador de Temas Discourse
: hammer_and_wrench:	Repositório	https://github.com/discourse/discourse-topic-cards
: open_book:	Novo em Temas Discourse?	Guia para iniciantes no uso de Temas Discourse

Instalar este componente de tema

Como este é um componente de tema #oficial mantido pela equipe Discourse, #suporte, Bug, UX e solicitações de Feature podem ser feitas nas respectivas categorias aqui no Meta, e marcadas com a tag apropriada do componente de tema. Clique em um link abaixo para iniciar um.

 Suporte  Bug  UX  Feature

Este componente de tema pode causar conflitos com outras personalizações na lista de tópicos

Recursos

Este componente se inspira em Topic Thumbnails, simplifica o uso, adiciona trechos e cliques em cartão completo, e adiciona um pouco de mágica CSS extra.

• Torna o cartão completo clicável (exceto pelo avatar do postador original)
• Mostra o trecho
• Mostra uma miniatura do tópico, se disponível
• Mostra a data de publicação
• Remove alguns metadados e torna as curtidas mais proeminentes

Desktop

Mobile

Configurações

Tradução	Padrão
published	Publicado

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

[Moin]

A linha azul vertical cobre partes do texto

(Parece não depender do navegador/dispositivo, tentei Edge/Windows, Chrome/Android e Firefox/Android)

[frold]

funcionou de primeira no Chrome no Windows e no Chrome no iPhone 8

[chapoi]

@Moin

A linha azul vertical cobre partes do texto

Certo, esqueci disso. Vou corrigir – obrigado

[jayme]

como me livrar das abas “respostas” e “atividade” sob o botão “+Novo Tópico”?
isso está deixando meu tópico muito curto e fica feio haha

[Lilly (Lillian Louis)]

Olá @jayme, parece que essas abas não fazem parte deste componente e provavelmente foram adicionadas por outro componente ou plugin de tema. Quando carrego um fórum de teste com este componente, essas abas não existem, nem aparecem nas capturas de tela na postagem original. Talvez você precise desativar outros componentes para descobrir qual é, e então, se não houver configuração para essas abas, talvez precise desativá-lo.

[chapoi]

Borda/box-shadow não funciona bem com cards, então tive que improvisar um pouco para obter uma indicação de substituição

UX: replace border with text colour on select with keyboard

[Moin]

@chapoi

então tive que improvisar um pouco para obter uma indicação de substituição

De alguma forma não vejo nenhum indicador agora

[chapoi]

Você está usando os comandos j/k para navegar?

[Moin]

Não, eu apenas usei Tab. Na verdade, usei meu tablet. Depois de usar o botão voltar, a postagem geralmente fica destacada. Isso não aconteceu aqui. Eu só tentei isso no computador para a gravação.

[derak (Cristian Deraco)]

componente de tema incrível!

[Gonerdot]

Tentei instalar este componente em muitos temas, mas ele parece um pouco torto em todos eles. O que estou fazendo de errado?

[chapoi]

Hmmm… difícil dizer. Parece que, de alguma forma, a altura dos cartões está restrita e o conteúdo é maior do que o usual.

Você pode primeiro verificar se não é devido a um conflito com outros componentes ou tema? Vejo que você também tem a barra lateral direita habilitada e isso pode afetar alguns cálculos de tamanho, talvez.

Então, por favor, verifique isso e me diga?

[Gonerdot]

Desativei todos os outros componentes, mas o problema não foi resolvido.

[chapoi]

Estranho! Posso dar uma olhada no fórum em que você o instalou?

[Gonerdot]

bearblog.ru

Mas você precisa alterar o tema para dracula nas configurações do seu perfil.

[chapoi]

Obrigado, darei uma olhada!

[Gonerdot]

Parece-me que o problema pode ser resolvido limitando o número de caracteres na pré-visualização, mas não sei como fazer isso.

[chapoi]

Ok, então os topic-cards precisam de uma altura máxima, caso contrário, você terá problemas como:

Não consigo dizer por que o seu não está se encaixando bem, porque no exemplo no criador de temas eu também posso usar títulos de várias linhas e ainda assim se encaixa:

Pode ter algo a ver com o tamanho da fonte, a família da fonte ou a altura da linha. Infelizmente, isso exigirá alguns ajustes individuais, e não algo para o qual eu possa aplicar uma solução única.

Uma solução possível é, como você disse, limitar o título a apenas 1 linha, o que você poderia fazer adicionando este CSS:

.topic-card {
  .link-top-line {
      max-width: 100%;
      overflow: hidden;

     .title {
        display: block;
        white-space: no-wrap;
      }
   }
}