Como eu direcionaria tópicos não resolvidos com CSS?

Dev
,
1

Quais seriam os seletores CSS para alterar o estilo dos tópicos não resolvidos?

1 curtida
2

Olá Dan :wave:

Em uma lista de tópicos, seria isto:

.topic-list-item:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

image
image1099×795 69.4 KB

Em uma página de tópico, não há uma classe específica para ser direcionada.

4 curtidas
3

Obrigado, funcionou!

Uma ressalva, semelhante a esta questão, é que procurar pela ausência da classe status-solved significa que tópicos de categorias que não têm Solucionado habilitado também serão destacados. No nosso caso, adicionei uma segunda classe ao seletor para direcionar apenas a categoria de suporte:

/* Destacar tópicos não solucionados */
.topic-list-item.category-support:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

Existe uma solução mais geral, por exemplo, se mais categorias Solucionadas existirem, em vez de repetir o seletor?

1 curtida
4

Tentei descobrir uma condição de curinga para qualquer categoria com “resolvido” ativado, mas não consegui. No entanto, você pode combinar todas as categorias relevantes em um único trecho de código:

 /* Destaque tópicos não resolvidos */

.topic-list-item.category-support,
.topic-list-item.category-another_category,
.topic-list-item.category-yet_another_category:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

Ou pode-se criar um componente de tema e ter uma configuração para adicionar quaisquer categorias que você queira aplicar. Suspeito que pode haver uma maneira de segmentar categorias com “resolvido” ativado, mas não consigo descobrir. :thinking:

5

Não tenho certeza se conseguimos determinar quais tópicos pertencem a uma categoria “solucionável” na lista de tópicos.

Se você não for alterar a configuração da categoria toda semana, pode modificar o código que você e @Lilly escreveram, mas adicionar um loop e torná-lo mais fácil de ler e manter. Ele ainda usará as classes de categoria.

Você pode reutilizar a solução fornecida aqui para esta intenção:

1 curtida
6

Olá :wave:

Criei um componente de tema para adicionar a classe .solvable-topic aos tópicos solucionáveis na lista de tópicos.

Após instalar este componente de tema, você pode adicionar um CSS simples para alcançá-lo. :slightly_smiling_face:

.topic-list-item {
  &.solvable-topic {
    &:not(.status-solved) {
      background: red;
    }
  }
}
5 curtidas