Componente de exibição de caixa de categoria aprimorado

Personalização Componente de tema
1

discourse-theme-category-homepage

Trabalhei bastante em uma nova página inicial de category-box para o fórum da minha comunidade. Ela é bastante específica para nossas necessidades e, portanto, pode não ser útil para muitas pessoas, mas alguém pode tirar ideias dela.

Depois/Antes

category-homepage
category-homepage1105×683 148 KB

initial-category-box
initial-category-box1106×600 98.3 KB

Nosso caso de uso específico

Temos uma comunidade que lida com muitos tópicos amplos. Federamos ONGs locais que têm seus próprios membros, e também temos grupos autônomos, cada um realizando uma ou várias ações que precisam divulgar e que também precisam de um espaço privado para discutir sobre elas.

Uma parte significativa de nossos membros são pessoas idosas, e qualquer ação que exija mais de 3 cliques é muito difícil para elas (então gerenciar o nível de notificação da maneira usual não é viável para elas).

A comunidade é grande o suficiente para precisarmos de um sistema de classificação forte, mas a habilidade digital e a disposição dos usuários são bastante baixas, então precisamos manter algo o mais simples e explícito possível de usar.

Organização dos tópicos

As categorias de nível superior são usadas como hospedagem para os principais propósitos da comunidade.
Qualquer tópico que não se refira a um grupo pertence à categoria de nível superior mais próxima, e seus pontos principais podem ser rotulados com tags. Uma tag é principalmente, mas não necessariamente, contida em uma categoria de nível superior.

Cada ONG e grupo local faz seus anúncios em uma subcategoria pública da categoria de nível superior mais obviamente relacionada e trabalha silenciosamente em uma subcategoria privada.

Assim, um usuário pode facilmente encontrar todo o conteúdo sobre um de nossos principais propósitos (categoria de nível superior), sobre um tópico específico (uma tag que pode ser transversal a vários propósitos), sobre um grupo específico (uma subcategoria pública), etc.

Recursos

  • Destaque cada categoria para fazê-las parecerem uma seção inteira do site.
    • Escreva em negrito e adicione um ícone a qualquer coisa clicável, para que seja mais fácil focar no que é importante.
  • Adicione conteúdo adicional para cada categoria:
    • a quantidade usual de posts
    • o seletor de nível de notificação
    • um link “Clique aqui para ver todos os posts relacionados a esse domínio” para ser extra explícito
  • Adicione tags relacionadas àquela categoria
    • adicione um cabeçalho para deixar muito explícito que essas são as principais temas que estamos discutindo
    • essas tags são selecionadas com uma configuração de tema
    • a exibição das tags é feita de forma que elas realmente pareçam tags, para que o usuário entenda do que estamos falando quando usamos a palavra «tag».
    • nota: a exibição é aprimorada pelo componente Tag icon
  • Adicione cabeçalhos às subcategorias para deixar extra explícito que essas categorias são para anúncios, e outro para deixar extra explícito que essas subcategorias são privadas (sim, há um cadeado e qualquer usuário de nível médio entende. Mas…)
    • nota: a exibição é aprimorada pelo componente Category icon
  • A maioria desses recursos pode ser ativada ou desativada.

Instalação

Nota: este componente ainda está em Desenvolvimento. Estou atualizando-o, corrigindo bugs de CSS que propaguei em outros lugares, etc. Por favor, tenha paciência e me avise se algo parecer estranho.

Instale o componente como de costume. Como instalar um Tema ou Componente de Tema?
Repositório: https://framagit.org/oca/discourse-theme-category-homepage.git

Roadmap para melhorias futuras

Corrigir a quantidade muito grande de bugs de CSS.
Corrigir o problema que força a exibição do separador/cabeçalho para subcategorias mesmo quando não há subcategorias públicas ou privadas.
Criar uma página de categoria tão agradável quanto possível, exibindo caixas de subcategorias e tópicos.
Atualizar tudo assim que a equipe do Discourse decidir que sub-sub-categorias podem ser uma realidade (sei, deixe-me esperar…)

Estou aberto a sugestões de novos recursos, mas os adicionarei a este componente apenas se servirem ao meu caso de uso muito específico ou forem muito fáceis de implementar. Qualquer novo recurso adicionado será ativável ou desativável.

26 curtidas
Problem with Enhanced category-box display theme component
Suggestions for achieving a custom layout without having to code everything
Any existing theme with categories on top as cards?
Theme suggestion
2

Sem problemas, está feito.

7 curtidas
3

Muito obrigado por criar este ótimo componente, é incrível! :awthanks:

Uma pergunta: é possível ativá-lo com a configuração de categoria “Caixas com tópicos em destaque”? Se não for, seria uma funcionalidade possível de implementar, ou você prevê algum problema com isso?

Todos os melhores votos, e mais uma vez muito obrigado por criar isso! :pray:

3 curtidas
4

Olá, obrigado.
Não é possível como está agora (não é a mesma caixa que está sendo ajustada), mas é algo totalmente que pode ser feito facilmente. Posso te ajudar a fazer isso se quiser conversar por MP, ou posso dar uma olhada quando tiver um tempo, mas para isso, precisaria que você me desse um esboço do que gostaria (e como as coisas seriam exibidas).

4 curtidas
5

Entendido perfeitamente.

Para mim, o recurso principal do seu componente é adicionar o ícone de status de notificação para cada subcategoria, além da maneira simples, porém poderosa, de permitir a alteração da largura das colunas. Para o meu caso de uso, tornar esses recursos disponíveis com a opção “Caixas com tópicos em destaque” ativada atenderia perfeitamente às minhas necessidades específicas.

Sou iniciante, mas ficarei feliz em tentar implementar. Agradeço qualquer orientação, mas vou examinar outros componentes de caixa de categoria e, com sorte, conseguirei descobrir como fazer isso. Terei tempo para me familiarizar com isso daqui a algumas semanas e atualizarei aqui se fizer algum progresso.

Tudo de bom.

3 curtidas
6

Tenho tido dificuldades para fazer isso, mas no fim não é tão difícil.

Em um componente de tema, modifique seu componente Handlebars para incluir este código:

{{#each categories as |c|}}
  
  ...algumas coisas antes do sino...

  {{category-notifications-button
    value=c.notification_level
    onChange=(action "changeCategoryNotificationLevel" c)
  }}

  ...algumas coisas depois do sino...

{{/each}}

Se você não sabe como fazer, o tutorial de Johani é um ótimo “primeiro lugar para procurar”.

E se você descobrir como fazer o mesmo com tags, por favor me avise! Não consigo encontrar uma maneira de fazer isso.

5 curtidas
7

@oca Fiz uma alteração recente no core que faz com que a compilação do SCSS deste componente de tema falhe. A correção é bastante simples: essas duas linhas precisam ser removidas da folha de estilo:

@import "common/foundation/variables";
@import "theme_variables";

(A segunda linha causa um erro de compilação do SCSS porque esse arquivo não existe mais. No entanto, ambas as linhas são desnecessárias, pois as variáveis do core e do tema agora são injetadas antes de qualquer arquivo SCSS ser compilado.)

6 curtidas
Custom CSS isn't applied to my Discourse
How do colors work and how to change them?
8

Obrigado pelas explicações.

Isso foi removido.

6 curtidas
9

Bom trabalho!, Isso não funciona no celular?

Celular

image
image624×947 53.5 KB

Desktop

image
image1929×1297 374 KB

1 curtida
10

Eu gostaria de saber como fazer isso funcionar no celular, parece legal no desktop, mas se não for utilizável no celular, é meio inútil, tenho certeza que há uma maneira simples, mas não sei como, alguém tem alguma sugestão?

1 curtida
11

Desculpe pelo post múltiplo

Consegui juntar o Categories Layout Override para funcionar apenas no celular

Então, usando minha versão modificada GitHub - cyanlabs/discourse-categories-layout-override

Posso agora especificar o override como categories_boxes
image
o que força a visualização móvel para a visualização necessária para este plugin funcionar

Tablet

image
image813×949 79.8 KB

Celular

image
image479×950 55.2 KB

Obviamente não é uma solução ideal, mas funciona, então até que alguém tenha uma solução melhor, aqui está uma solução alternativa :slight_smile:

9 curtidas
How Can I Set Mobile Category Page Style?
12

Obrigado pela personalização do componente de tema Categories Layout Override, mas você pode compartilhar comigo a personalização do componente Enhanced category-box display? Visitei seu site e aprecio o uso de “background-color” para a classe “category-logo”.

1 curtida
13

Obrigado pelas personalizações recentes, no entanto, com a atualização recente para a versão 3.2.0.beta 4-dev, o componente de tema não funcionou. Espero também que a personalização da exibição móvel seja integrada ao núcleo do Discourse. Porque quero uma experiência síncrona do desktop para o mobile.

1 curtida
14

Infelizmente, não tenho ideia de como consertar isso.

2 curtidas
15

Recentemente, ao atualizar para a versão mais recente, o componente de tema “discourse theme category homepage” parou de funcionar no celular e continuo recebendo a seguinte mensagem

image
image1242×883 171 KB

Este é o meu site https://businesslab.vn/categories

2 curtidas
Preparing for Discourse's upgrade to Ember 5
16

Olá @hoangphuctran93, movi sua postagem para o tópico do componente temático relevante (cc @oca)

4 curtidas
17

Ah, isso parece algo que seria super útil para mim! Comunidade de suporte ativa com uma grande variedade de tópicos, mas pessoas que provavelmente permanecerão em um pequeno sub-enredo do enorme jardim, alfabetização digital bastante baixa para muitos. Triste ver que parece quebrado, ainda vou tentar. @oca você ainda está usando ativamente do seu lado?

18

Cuidado com a tag #broken, ela vai quebrar.

Eu consideraria silenciar todas as categorias por padrão e preparar tópicos marcados com #welcome para dar uma visão geral das categorias disponíveis. Quando você associa um grupo para seguir uma categoria, você pode criar uma experiência progressiva, onde as pessoas podem entrar em grupos para desativar o silêncio/descobrir categorias. Com muito poucos tópicos de boas-vindas, você pode fornecer aos leitores uma visão geral do que está disponível e dar-lhes a escolha de onde querem participar. Documentar as notificações também é importante para evitar sobrecarga de informações.

19

Obrigado pelo aviso, acho melhor ficar longe então…

Com certeza!

20

Você poderia tentar instalar o componente de tema… mas não no seu sistema de produção :slight_smile:

1 curtida