Categorías o subcategorías de barra lateral indentadas o anidadas

| | | |\n|— | — | —|\n|:information_source: | Resumen | Indenta / anida categorías o subcategorías seleccionadas en la barra lateral|\n|:hammer_and_wrench: | Repositorio | https://github.com/Lillinator/discourse-nested-categories|\n|:eyeglasses: | Vista previa | Vista previa en Discourse Theme Creator|\n|:question: | Guía de instalación | Cómo instalar un tema o componente de tema|\n|:open_book: | ¿Nuevo en los temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse|\n\n\u003c!-- Rellena "repoName" y "repoURL" para el botón de instalación automática –\u003e\n\n[wrap=theme-install-button repoName="Discourse Nested Categories" repoUrl="https://github.com/Lillinator/discourse-nested-categories\"]\nInstalar este componente de tema\n[/wrap]\n\n\u003c!-- Describe este tema/componente en una o dos frases –\u003e\n\nHay dos formas de usar este sencillo componente de tema: para seleccionar categorías o subcategorías para indentar (o anidar) en la barra lateral; o para permitir indentar todas excepto una lista seleccionada de categorías. La mayoría de la gente querrá indentar solo las subcategorías, por supuesto, para que parezcan anidadas, pero puedes indentar cualquiera de tus categorías listadas. Funciona tanto en vista de escritorio como móvil, así como en el menú desplegable del encabezado. Gracias a @dax por parte del código.\n\n\u003c!-- Añade capturas de pantalla (si procede) –\u003e\n\nHay 3 configuraciones: solo usa la primera, o la segunda y la tercera, dependiendo de lo que necesites hacer.\n\n|Configuración| Descripción |\n|— | —|\n|indentar solo categorías seleccionadas | Lista de categorías o subcategorías seleccionadas para indentar. |\n|indentar todas las categorías excepto las siguientes | Habilita esta configuración si deseas indentar todas las categorías excepto las de la siguiente lista. La configuración de la lista anterior debe estar vacía.|\n| categorías a no indentar | categorías a no indentar |\n\n***\n\n### Capturas de pantalla de la configuración y los resultados en la barra lateral\n\nIndentación solo de categorías seleccionadas\n\n[details="Resumen"]\nConfiguración:\n

\n\nResultado:\n\n[/details]\n\n\n\u003cbr\u003e\n\n[details="Indentación de todas las categorías excepto las especificadas"]\nConfiguración:\n\n\n\nResultado:\n\n[/details]\n\n***\n\nNota: si deseas ocultar el icono de candado en las viñetas de las categorías para categorías privadas como en mis capturas de pantalla anteriores, puedes usar este componente.

28 Me gusta

¡¡¡Sí!!! ¡Este es un paso más para poder usar finalmente la barra lateral!

3 Me gusta

¡Buen trabajo, @Lilly!

Sin embargo, no satisface del todo la necesidad de mi instancia. Tengo muchas subcategorías y pocas categorías, y las subcategorías son bastante dinámicas.

Sería mejor para nuestra instancia si todas las categorías y subcategorías estuvieran indentadas por defecto y la lista fuera para las categorías que no deberían estar indentadas.

3 Me gusta

Hmm, déjame pensar en esto. Veo a qué te refieres. Voy a experimentar un poco, pero abordaré tu caso de uso de todos modos (con un componente separado o un par de configuraciones adicionales). También estaba pensando en incluir una configuración que permitiera formatear u ocultar las viñetas de la subcategoría. :thinking:

5 Me gusta

He actualizado el componente para permitir la configuración de categorías indentadas de la manera opuesta: es decir, indentando todas excepto una lista seleccionada. Espero que esto ayude a tu caso de uso. :slight_smile:

6 Me gusta

¡Esto se ve genial en nuestra comunidad, gracias por esto!

2 Me gusta

Por favor, actualiza este componente. Hice una pequeña actualización hoy para solucionar un problema en el que el botón “Todas las categorías” también se estaba aplicando sangría si se estaba utilizando la configuración indent all categories except the following.

4 Me gusta

Hola Lilly, ¡estoy disfrutando usando este TC de ambas maneras!

Pero tengo una pregunta tonta:

¿Por qué no simplemente hacer que este componente idente todas las subcategorías (y no las categorías) por defecto?

¡Gran trabajo @Lilly!

¿Hay alguna forma de ajustar esto para que funcione también con Sub-Sub-Categorías?

Así habría 2 niveles de sangría disponibles.

Por ejemplo:
Tenemos la categoría de Aprendizaje, con las Sub-Categorías (Herramientas de Aprendizaje y Cómo hacer), las Sub-Sub-Categorías de Juegos y Mejores Prácticas.
(Aprendizaje - herramientas de aprendizaje - juegos) y (Aprendizaje - Cómo hacer - Mejores Prácticas)

Sería genial si pudiéramos anidar juegos y mejores prácticas de esta manera.

2 Me gusta

¿No parece eso inquieto?

1 me gusta

Hola @Jagster,
No estoy seguro de qué quieres decir con eso. Lo siento :frowning:

Los ojos se preguntarán porque no hay líneas rectas. Por eso intentamos mantener el espaciado, etc. lo más uniforme posible en textos, barras de herramientas… Y al mismo tiempo, los iconos y los colores también cambian. El icono de la categoría principal tiene cierto valor informativo, otros no. Eso no facilita la navegación, sino todo lo contrario. Y todo eso es básicamente la razón principal por la que la anidación profunda es una mala idea, sin importar si hablamos de libros o de la web. Además, pierdes espacio valioso y los nombres de las categorías ya no son nombres.

Y si realmente tienes tal cantidad de temas específicos que debes usar varias categorías principales y al menos la misma cantidad de subcategorías, porque tienes muchas sub-subcategorías (y todo el tiempo las principales y las de primer nivel son solo encabezados que muestran otras categorías), eso conducirá a una barra lateral tan larga que absolutamente nadie la usará.

Odio decir esto en voz alta, pero parece exactamente lo mismo que los fragmentos de CSS donde las intenciones se usan para mostrar la estructura lógica de los pares { }. Nunca está destinado a la lectura.

2 Me gusta

Gracias por exponer tus ideas aquí, @Jagster. Realmente aprecio tus comentarios.

Haces muchos puntos excelentes, especialmente sobre no crear una barra lateral excesivamente larga y que los colores e íconos no combinen.

Ojalá pudiera expandir las categorías anidadas como un acordeón, entonces podríamos tener lo mejor de ambos mundos, una barra lateral corta, pero también una navegación rápida por el sitio.

1 me gusta

Te recomendaría leer este tema, especialmente las publicaciones sobre el foro de Wix y la simplicidad de sus categorías.

También ten en cuenta que tus usuarios pueden personalizar sus propias secciones de la barra lateral de categorías.

Sinceramente, no veo cómo las sub-subcategorías funcionarían aquí con anidación; creo que crearía un poco de desorden visual. Ni siquiera estoy seguro de si es posible integrarlo en este componente…

6 Me gusta

Acabo de instalar esto en mi instancia y ninguna de mis subcategorías se está indentando…
Al menos eso es lo que pensaba. Lo configuré para que indente todo excepto las elegidas, y dejé la lista en blanco.
Al principio no me di cuenta de que estaba indentando todo, incluidas las categorías.
¿Hay alguna forma de actualizar esto con una casilla para simplemente “indentar todas las subcategorías”? Puedes agregar una lista de exclusión si quieres, pero en mi caso de uso, siempre quiero que las subcategorías se indenten y nunca que se indenten las categorías.

Para su caso de uso, ¿por qué no simplemente poner las categorías en el cuadro Categorías a no indentar?

Estoy de acuerdo, sería más agradable simplemente indentar subcategorías. Sin embargo, en el momento en que @Lilly desarrolló este TC, fue bastante difícil de lograr. Personalmente, encuentro que la solución anterior es muy factible a menos que sus categorías sean inusualmente dinámicas.

Ya que estoy aquí…

Solicitud de función: subcategorías expandibles/contraíbles

Esto se discute aquí:

Me pregunto si funcionaría como una extensión de este Componente de Tema.

Potencialmente podríamos tener algo de presupuesto para esto si alguien está interesado en unir fuerzas.

1 me gusta

Como curiosidad, he descubierto que el JS que añadí (tuve que hacer más modificaciones que puedo compartir) funciona como una solución provisional, ya que básicamente solo pliega las subcategorías cuando la página carga y permite al usuario expandirlas o visitar las parentelas insertando un chevron. El único problema es que algunas interacciones vuelven a reescribir la navegación por completo, por lo que el JS tiene que volver a aplicar sus clases para mantener las subcategorías colapsadas (como al interactuar con el icono de hamburguesa en la parte superior, o en el móvil, por ejemplo).

Claro, eso es lo que estoy haciendo. Simplemente no lo “entendí” de inmediato.
Solo es un problema ahora mientras estoy construyendo un sitio nuevo, ya que sigo agregando categorías y subcategorías. Una vez que el desarrollo esté terminado, las cosas serán prácticamente estáticas.

1 me gusta