Aninhar subcategorias sob suas categorias principais na barra lateral

Concordo com isso. Houve alguma atualização sobre isso? Ou haverá no futuro próximo?

2 curtidas

Não temos planos imediatos para fazer alterações adicionais aqui.

Observe que agora você pode ver que as subcategorias são ordenadas abaixo de suas pais (por exemplo, as subcategorias de Documentation no meta):

Além disso, a interface do usuário para selecionar categorias mudou desde que esta discussão começou, e dentro dessa caixa de diálogo, as subcategorias são aninhadas.

Isso deve ajudar a torná-las mais fáceis de descobrir para as pessoas que escolhem quais adicionar à sua barra lateral.

3 curtidas

Saudações!

Por obra do acaso, deparei-me com este artigo. A sua semelhança com a minha composição anteriormente escrita é impressionante.
https://meta.discourse.org/t/navigation-menu-sidebar-modifier/267354/24?u=aizada_m

Curioso para saber – a equipa do discourse previu soluções para esta questão, ou pode a questão ser considerada resolvida?

Não sei ao certo, mas sinto que se a categoria pai for mostrada, então talvez as subcategorias possam ser direcionadas com CSS para serem recuadas para fornecer uma aparência aninhada? É possível usar um pseudo-elemento ::before? :woman_shrugging:t2:

Talvez eu veja o que consigo criar para um dos meus componentes de menu de navegação quando os atualizar. Tenho a lógica em mente de como isso pode ser alcançado, mas não tenho certeza se é realmente possível. Em meus sonhos, não apenas as subcategorias são aninhadas, mas também é possível recolher subcategorias em suas categorias pai clicando no marcador. :laughing: :exploding_head:

5 curtidas

Estou participando para receber notificações caso ocorram alterações, pois também temos muitas subcategorias para apresentar na barra lateral sem construir uma torre, o que prejudica a melhoria da experiência do usuário que a barra lateral proporciona.

A melhor solução que temos agora é fazer com que os usuários escolham seus grupos e vejam apenas as categorias relacionadas a esses grupos, mais uma padrão, o que funciona até que um usuário selecione muitos e construa uma torre em sua barra lateral.

@Lilly se esse método não funcionar, eu me perguntei se a ferramenta para criar categorias aninhadas já existe.

O módulo Adicionar Seção Personalizada poderia ser instruído a adicionar automaticamente todas as categorias de nível superior como suas próprias seções e puxar suas subcategorias para baixo.

Este método daria aos usuários excelente controle sobre sua barra lateral, pois todos teriam uma função de edição integrada.
A desvantagem é que os usuários perderiam o ícone da caixa colorida para a categoria e, provavelmente, a função que mostra quantos novos posts existem em cada seção.

2 curtidas

Houve alguma solução para isso?

Parece loucura que tudo o que podemos ter é uma lista enorme e longa… nem parece haver nenhuma classe adicionada a subcategorias que possamos estilizar manualmente com um pequeno recuo.

Procurando alcançar algo próximo ao seguinte:

Marketing ⌄

  • Centralidade do Cliente
  • Tecnologia
  • Ferramentas

Não sei, tenho pensado muito sobre isso ultimamente - quero dizer, toda a seção de categorias é personalizável por usuários individuais e esta é a maneira preferida e deve ser incentivada. Como subcategorias podem ser adicionadas sem suas categorias pai e elas têm marcadores com metade da cor para indicar seu status de subcategoria, acho que a lista aninhada/indentada não vale realmente a pena, especialmente dada a tarefa de programação árdua e difícil para alcançá-la. De uma perspectiva funcional, talvez a ideia de categorias pai recolhíveis (como a seção Mais, por exemplo) clicando no marcador pareça mais atraente para mim do que a indentação, embora seja um empreendimento de programação ainda mais difícil. :thinking:

2 curtidas

Então, utilize os IDs das subcategorias, que são um tanto incômodos, mas funcionais:

li.sidebar-section-link-wrapper {
  &[data-category-id="10"], /* ID da subcategoria */
  &[data-category-id="11"], /* ID da subcategoria */
  &[data-category-id="12"], /* ID da subcategoria */
  &[data-category-id="13"]  /* ID da subcategoria */ {
    margin-left: 1em;
  }
}

8 curtidas

Oh, essa é uma solução legal!!! Obrigado por compartilhar :raised_hands:. Minha pergunta é, é possível fazer algo semelhante com links normais na barra lateral? :sweat_smile:

Abra seu console de desenvolvedor e dê uma olhada no registro data-list-item-name:

Em seguida, você pode direcioná-los em seu CSS, por exemplo:

li.sidebar-section-link-wrapper {
  &[data-list-item-name="New"],
  &[data-list-item-name="Global leaderboard"],
  &[data-list-item-name="Test leaderboard"] {
    margin-left: 1em;
  }
}

Com uma abordagem semelhante, você pode mover uma seção inteira em vez de links individuais:

.sidebar-section-wrapper.sidebar-section[data-section-name="new-global-links-section"] {
    margin-left: 1em;
}

6 curtidas

Olá @dax! Por favor, me perdoe pela longa resposta :pray:
Sim, é mágica :sparkles: e funciona, estou procurando por uma solução como essa nos últimos 3 meses, sou profundamente grato a você :raised_hands:

2 curtidas

Na barra lateral, gostaria de saber se é possível exibir as subcategorias com um recuo sob sua categoria pai? Veja na minha barra lateral:

Por exemplo, em “Eventos” tenho a subcategoria “AGU” sem recuo. Muitos usuários não conseguem distinguir as cores e pensam que “AGU” é apenas uma categoria diferente, não relacionada a “Eventos”. Assim, mais tarde, eles procuram por “AGU” como uma categoria, e não como uma subcategoria, e por isso não a encontram facilmente.

Existe uma opção para ter esse recuo? Se não houver, seria bom tê-la.

Estou me perguntando se poderíamos simplificar isso?

No componente de tema Category Hider, um alternador foi adicionado para ocultar todas as subcategorias

.hamburger-panel .category-link.subcategory {
      display:none;
}

Antes deste componente, eu havia ocultado manualmente todas as subcategorias, visando cada uma individualmente. Até que alguém compartilhou um código de 1 linha que ocultava todas as subcategorias

li.sidebar-section-link-wrapper {
  .category-link.subcategory {
    margin-left: 1em;
  }
}

Testarei o código acima momentaneamente.

Infelizmente, isso não funciona. :sad_but_relieved_face:. Haveria uma maneira de ajustar este código para funcionar?

Eu criei um componente de tema simples para fazer isso

10 curtidas

Funciona muito bem! Obrigado!

1 curtida