Tópicos em destaque

Obrigado pela atualização! :heart:

Com alguns hacks de CSS, movi o avatar como uma sobreposição sobre a miniatura no modo de cartão:

.featured-topics__topic-details .topic-author {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

Como posso reduzir a altura da div (roxa) do autor do tópico para 0 e remover efetivamente o espaço em branco enquanto ainda exibo o avatar?

1 curtida

Se você estiver escrevendo CSS personalizado, em vez de adicionar código que substitua um dos layouts pré-definidos, eu realmente recomendo que você escolha a opção de layout Nenhum nas configurações do tema e declare seus estilos do zero.

Por exemplo, você pode copiar a planilha de cartões padrão e declarar o contêiner featured-topics__topic-details como uma grade. Então você pode posicionar seus elementos exatamente como quiser, em vez de movê-los com declarações absolutas.

2 curtidas

Essa é uma ótima ideia!

Por enquanto, estamos satisfeitos com o template e apenas alguns pequenos ajustes de CSS para testá-lo inicialmente. Assim que chegarmos à fase de otimização de CTR, provavelmente seguiremos seu conselho. :slight_smile:

2 curtidas

Não tenho certeza se este é o comportamento esperado ou se pode ser considerado um bug:

Quando três tópicos são definidos nas configurações, mas apenas dois são exibidos, um espaço em branco aparece onde o terceiro tópico deveria estar. Seria ideal se os cartões fossem redimensionados para preencher toda a largura nesses casos.

Se alguém estiver interessado em usar rolagem horizontal no celular, aqui está um pouco de CSS que “eu” criei (com a ajuda da IA). Ele também inclui alguns ajustes de scroll snap e tamanho que achei mais adequados ao nosso caso de uso.

PS: Eu também tentei criar algumas “navigation pills” sem adicionar HTML, mas isso definitivamente foi um exagero.

@media (max-width: 750px) {
  .featured-topics__topic-wrapper {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 1em 10vw; /* Preenchimento lateral para visibilidade do card vizinho */
    gap: 1rem; /* Espaçamento consistente entre os cards */
    overscroll-behavior-x: contain; /* Evita interferência de overscroll */
    scroll-behavior: smooth; /* Rolagem suave */
    scrollbar-width: none; /* Oculta a barra de rolagem */
    -ms-overflow-style: none;
  }

  .featured-topics__topic-wrapper::-webkit-scrollbar {
    display: none; /* Oculta a barra de rolagem em navegadores WebKit */
  }

  .featured-topics__topic-container {
    flex: 0 0 80vw; /* Cards mais estreitos para visibilidade lateral */
    min-width: 280px; /* Largura mínima para telas pequenas */
    scroll-snap-align: center; /* Centraliza cada card ao rolar */
    height: unset !important; /* Altura consistente */
  }

  .featured-topics__topic-thumbnail {
    height: 40vw;
    width: 100%;
  }
}

Olá, muito obrigado por este componente, adorei!

Alguém poderia, por acaso, ajudar a ajustar o tamanho do título, pois ele está muito grande no momento?

Recebi uma mensagem de erro dizendo que este componente precisa ser atualizado para compatibilidade com as próximas mudanças no núcleo do Discourse. Alguém sabe se uma atualização está planejada?

Atualizei o componente no início deste ano. Você precisa reinstalar para usar a nova versão, veja: :index_pointing_up: Featured Topics - #38 by manuel

1 curtida

Ah, muito obrigado, funcionou!

A única coisa que não consigo consertar (acho que estou provocando o Chat GPT há uma hora…) é a altura dos cards — alguma dica de como posso reduzi-la/removê-la?

Olá Manuel - existe alguma forma de fazer com que seu incrível Componente de Tema aqui ignore imagens (para que ele mostre apenas um trecho em vez disso)?

Tenho vários tópicos em destaque sem imagens (que quero destacar), mas eles ficam muito ruins ao lado daqueles que contêm imagens. Além disso, estou mais interessado no texto do que nas imagens.

O template do componente renderiza uma variedade de conteúdo disponível em um tópico. A aparência final é então ajustada com regras de estilo. Por exemplo, quando você seleciona “cards” como layout, os excertos do tópico são ocultados quando há uma imagem em destaque e mostrados sempre que não há nenhuma:

Se você sempre quiser mostrar o excerto e nunca mostrar uma imagem, você pode selecionar “none” para Layout e adicionar sua própria folha de estilo. Ou sobrescrever as regras no layout de cards que mostram a imagem e ocultam o excerto.

1 curtida