Tópicos em destaque

Não, não diretamente. Você pode escolher categorias, mas apenas para restringir a seleção de tópicos. Eu não gostaria de adicionar mais lógica para habilitar essa opção.

Uma solução alternativa poderia ser marcar automaticamente todos os novos tópicos, usando um curinga:

Ou use um componente diferente. Se você puder explicar um pouco mais a aparência que deseja alcançar, talvez eu possa recomendar um.

Obrigado pela sua resposta.

Adicionar uma tag específica para o componente será um acréscimo desnecessário a longo prazo se eu decidir remover este componente.

Portanto, a melhor lógica para o componente seria selecionar automaticamente as postagens mais recentes se nenhuma tag for especificada.

Caso eu remova o componente, terei que procurar por todos os tópicos usando a tag “featured” e remover a tag de todos eles.

Você pode remover tags de tópicos muito rapidamente filtrando por tag e usando as opções de Ação em Massa:

Eu acho que ele só pega os que estão visíveis na tela, então eu costumo rolar para baixo para carregar todos antes de aplicar a ação em massa. :+1:

1 curtida

Bem, você também pode simplesmente excluir essa tag e ela sumirá :headstone: :upside_down_face:

1 curtida

Em nota geral: O componente é um fork do Featured Tiles Component oficial. Toda a ideia e motivação para mim foi ter um visual de cards com a funcionalidade que o componente oferece. Não acho que adicionarei mais recursos funcionais além do componente original. O motivo é que, em relação à manutenção do código, quero poder apenas seguir as correções de compatibilidade do componente oficial.

2 curtidas

Caso alguém se interesse: Modificamos o componente de cards em destaque para permitir que os usuários rolem horizontalmente por todos os tópicos em destaque (fonte de tópicos usada: mais recentes).

Este é o CSS usado:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    -ms-overflow-style: none; /* Oculta a barra de rolagem para MS Edge */
    scrollbar-width: none; /* Oculta a barra de rolagem para Mozilla Firefox */
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
}

.featured-card {
    scroll-snap-align: start;
}

.featured-cards-container::-webkit-scrollbar {
    display: none; /* Oculta a barra de rolagem em navegadores baseados em Webkit (Chrome, Safari, etc.) */
    -webkit-overflow-scrolling: touch; /* Em telas sensíveis ao toque, o conteúdo continua rolando por um tempo após o término do gesto de rolagem */
}
3 curtidas

Solicitação de Recurso.

Podemos ter uma opção para que isso seja exibido em uma página de categoria específica?

ou seja, se estiver visualizando a Sala, os cards em destaque são mostrados aqui

a imagem mostrada é a Imagem da Categoria. Estou usando o Tema Air. Aplicação para mostrar tópicos em destaque relacionados a essa categoria de sua subcategoria Notícias da Fronteira.

Qual é o tamanho de imagem recomendado para a imagem do Card?

Ótimo, mas ele não tem suporte no tema FKB

Como posso definir o número máximo de caracteres para o título? Estou exibindo um trecho no card e ele se estende para fora da caixa com o texto do título e do trecho.

Não há configuração para controlar o número máximo de caracteres do título. No entanto, você pode aumentar a configuração de altura dos cards para acomodar o conteúdo.
image

Se você não quiser ajustar toda vez, pode tentar este CSS em seu tema ou em um componente.
Ele remove o limite de altura do card e você tem as seguintes opções:

  • se você prefere esticar o card
  • a altura máxima da imagem.
  • o número máximo de linhas do título
  • o número máximo de linhas do excerto
.featured-cards-container {
    $stretch_card: "true";
    $max-image-height: 10em;
    $max-title-lines: 3;
    $max-excerpt-lines: 4;
    
    height: inherit; 
    max-height: inherit;
    
    .featured-card {
        @if $stretch_card == "true" {
            height: inherit;
        }
        
        a.card-content .card-details {
            .topic-title {
                -webkit-line-clamp: $max-title-lines;
            }
            
            .topic-excerpt {
                -webkit-line-clamp: $max-excerpt-lines;
            }
        }

        a.card-content .card-image {
            height: #{$max-image-height};
            min-height: #{$max-image-height};
        }
    }
}

Espero que ajude!

1 curtida

Obrigado, eu na verdade tinha a sua altura definida de 350 antes de postar, mas acabei de tentar o seu código e parece ajustar o tamanho do cartão apropriadamente para títulos com trechos.

2 curtidas

Desenterrando este, é genial! Existe alguma maneira de habilitá-lo também para a visualização em smartphones?

Por algum motivo, a rolagem horizontal não está mais funcionando. Alguém conseguiu fazê-la funcionar no desktop e no celular?

1 curtida

Tente algo assim:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    scroll-snap-type: x mandatory;
    scroll-padding: 1.25rem;

    /* Torna a barra de rolagem tangível, mas invisível */
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;

    /* Ou a exibe, mas fina */
    // scrollbar-width: thin;
    // scrollbar-color: #91919185 transparent;

    /* Garante que a barra de rolagem fique logo abaixo do contêiner em vez de abaixo da altura máxima. */
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

Não tenho certeza se é uma boa ideia ocultar a barra de rolagem em um desktop; pode ser frustrante acessá-la.

Fina e visível (também tornando o fundo transparente) parece bom para mim. O que você acha?

3 curtidas

Isso funciona no desktop agora! Mas não no mobile. Já montei um CSS para rolagem horizontal no mobile, mas não é muito sofisticado :smiley:

Também adicionei ajuste de fonte, pois o tamanho da fonte do título era muito grande para a tela pequena.

.featured-cards-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
    align-content: flex-start;
    overflow-x: auto;
    max-height: 350px;
}
.featured-cards-container .featured-card {
    min-width: 90%;
    
}


.featured-card a.card-content .card-details .topic-title {
    font-size: var(--font-up-1);
}
3 curtidas

Existe alguma maneira de tornar o elemento inteiro recolhível e replicar o mesmo comportamento do componente Homepage Feature?

"A ‘Mostrar trecho está em branco’ está acontecendo só comigo?

Atualizei este componente e movi seu repositório para o GitLab: Manuel Kostka / Discourse / Components / Featured Topics · GitLab.

A nova versão adota uma abordagem de design ligeiramente diferente, removendo opções de estilo selecionadas das configurações do tema. Em vez disso, ela fornece dois arranjos básicos de layout (Cards e List) e um template mais limpo para adicionar declarações de estilo personalizadas via CSS.

Se você quiser continuar usando o componente anterior, ele está disponível em GitHub - nolosb/discourse-featured-cards.

3 curtidas

É um pouco fora do tópico, mas acho que é uma ótima abordagem. Tenho dificuldade em não fornecer um milhão de configurações em um componente para fins de personalização, quando você deveria simplificar as coisas para o usuário, mas ainda oferecer uma maneira de personalizar para uso/usuários avançados.

3 curtidas

Ainda não fiz isso neste componente, mas outra abordagem que gosto é oferecer propriedades personalizadas como a forma padrão de personalizar estilos. Por exemplo, assim, em Manuel Kostka / Discourse / Components / Extra Banners · GitLab :

No componente, você pode declarar o estilo com um placeholder para a propriedade personalizada e um valor padrão:

background: var(--extra-banners-background, var(--secondary));
4 curtidas