Barra de navegación de categorías de encabezado

|||
|-|-|-|
| :discourse2: | Resumen | Header Categories Navbar es un componente simple que agrega un menú de enlaces de categorías principales al encabezado del sitio, con desbordamiento de desplazamiento horizontal agregado cuando sea necesario.
| :eyeglasses:|Vista previa| Vista previa en Theme Creator |
| : hammer_and_wrench:|Repositorio| https://github.com/discourse/discourse-categories-navbar |
| : question:|Guía de instalación|Cómo instalar un tema o componente de tema|
| : open_book:|¿Nuevo en Temas de Discourse?| Guía para principiantes sobre el uso de Temas de Discourse

Instalar este componente de tema

Características

Este componente de tema agrega un menú de enlaces de categorías principales al encabezado del sitio:

Ajustes

Nombre Descripción
ocultar menú desplegable de categoría Oculta el menú desplegable de categoría de la navegación de la lista de temas
ocultar toda la navegación de migas de pan Oculta todas las migas de pan de la navegación de la lista de temas
ocultar al desplazarse por el tema Cuando está habilitado, la navegación se ocultará en el escritorio cuando el título del tema esté acoplado al encabezado

:discourse2: ¿Alojado por nosotros? Los componentes de tema están disponibles para su uso en nuestros planes Estándar, Business y Enterprise.

20 Me gusta

Esto es genial, ¡me encanta, Kris! Combinará maravillosamente con la #barra lateral, permitiendo que los gatos principales en la parte superior y una breve selección personalizada en la barra.

He notado dos pequeños problemas de UX que realmente podrían darle un impulso si se abordan:

UX: Resaltado de selección de categoría

Cuando estás en una lista de categorías, la categoría correcta tiene un bonito y sutil subrayado.

Sin embargo, esto no persiste si se ingresa un Tema o una subcategoría.

Sería genial si persistiera en ambas situaciones.

UX: Desplazamiento / desbordamiento en dispositivos móviles

Hay un pequeño y agradable fundido / flecha sutil visible cuando hay desbordamiento de las categorías en el escritorio.

Es mucho más probable que haya desbordamiento en dispositivos móviles, pero en mi dispositivo (Chrome / Android) estas sutiles señales no están presentes, y no está claro que el desplazamiento sea posible.

También podría ayudar que la barra de categorías sea un poco más alta en los dispositivos móviles para facilitar el desplazamiento.

6 Me gusta

Otro par de problemas de UX que se aplican principalmente a dispositivos móviles:

Conflicto de migas de pan del tema móvil

En las vistas de temas móviles, la navegación de migas de pan choca con la barra de navegación de categorías:

Categoría resaltada no visible

Además, la categoría seleccionada no se desplaza automáticamente, lo que significa que no es evidente que esté seleccionada a menos que el usuario desplace la barra de navegación. Esto es realmente vital.

¿Solo para escritorio?

Me pregunto si aún no está listo para dispositivos móviles y sería muy útil tener una opción para aplicarlo solo a escritorio (al menos por ahora).

4 Me gusta

¡Gracias por tus rápidos comentarios! He fusionado algunas actualizaciones que deberían abordar estos problemas.

3 Me gusta

¡Genial! Muy contento de dar feedback cuando se escucha. He notado que han tenido que hacer bastantes adiciones.

Me lo tomaré como un pequeño regalo de Navidad :regalo: mutuo :ojos_sonrientes:.

Han arreglado esto cuando se ingresa a una subcategoría. ¡Maravilloso!

Sin embargo, no se aplica cuando se ingresa a un tema. ¿Es eso deliberado? Personalmente, creo que tendría sentido que la categoría permaneciera resaltada mientras el usuario está “dentro” de ella, lo que incluye los temas y no solo las vistas de descubrimiento de categorías.

Además, cuando ingreso a otra página (como /admin), la categoría permanece seleccionada. Sería mejor si no se seleccionara ninguna categoría en ese caso.

Ahora puedo ver el desvanecimiento en el móvil, pero no una flecha / chevron. Si es posible, esto sería de gran ayuda, ya que el desvanecimiento es bastante sutil:

Escritorio: image

Móvil: image

Solicitud #1 - UX

Ocultar la barra de navegación al desplazarse en un tema. ¡Todo se vuelve un poco abarrotado!
image

Además, podría ser mejor en el escritorio tener la barra de navegación ubicada donde están las migas de pan / etiquetas en esa imagen en lugar de debajo de ellas.

Solicitud #2 - Característica

¿Podrían agregar una clase CSS a cada píldora de navegación para que sea fácil ocultar algunas si es necesario?

Lo pregunto porque tengo un par de categorías principales (privadas) que son solo principales para habilitar subcategorías, y abarrotan la navegación general de una manera indeseable.

Las he ocultado por ahora usando su href, ¡pero eso es, por supuesto, bastante arriesgado!

Solicitud #3 - UX

Una opción para ordenar las categorías de la barra lateral alfabéticamente.

Mientras implemento esto, he eliminado las categorías principales de la lista predeterminada de categorías de la barra lateral. Esto significa que mis usuarios ahora solo tienen una lista de 1-5 subcategorías que son relevantes para ellos.

Sin embargo, están un poco desordenadas y sin un orden lógico, ya que el orden en /Categorías para las subcategorías no tiene mucho sentido. ¡Sería muy útil que estas subcategorías fueran alfabéticas para ayudar con esto!

4 Me gusta

Los colores están un poco apagados cuando se seleccionan

  • paletas claras y oscuras por defecto

¿Ideas?

3 Me gusta

¡Gracias por informar! Esto debería solucionarlo:

2 Me gusta

Funciona perfectamente. ¡Gracias!

2 Me gusta

¡Hola! Antes que nada, me gustaría señalar que este es un componente muy útil del tema y quiero agradecerles por el trabajo realizado :raised_hands:
En mi instancia, este componente causó un error, verifiqué la compatibilidad con otros plugins y componentes del tema y en este momento aún no he encontrado un conflicto. ¿Podría ser el propio componente la causa?

Habilitar este componente distorsiona la presentación del contenido.
Aquí hay un video:


Para detectar un error, debe hacer clic en cualquier publicación de la página de las últimas publicaciones /latest, la publicación se abrirá en modo estándar, luego deberá volver a la página de las últimas publicaciones.

1 me gusta

@Aizada_M - No puedo reproducir esto. ¿Te sucede al previsualizar desde el componente?

2 Me gusta

¡Saludos! Disculpa la larga respuesta :raised_hands:
No usé la vista previa, la probé con el componente habilitado.

1 me gusta

Esto funciona el 100% de las veces cuando hago clic en el nombre de la categoría debajo del título del tema.

1 me gusta

He notado que el texto en la barra de navegación de categorías principales cambió repentinamente a font-up-1 (mientras que creo que antes era font-down-1). Esto es bastante discordante y desagradable, ya que es el mismo que el de todas las demás “nav pills”.

Lo he anulado con este CSS, que es mucho más agradable:

// corrige el tamaño del texto de la barra de navegación del encabezado
.custom-categories-navbar .nav-pills li a {
    font-size: var(--font-0);
}

Prefiero font-0 en realidad, ya que es lo suficientemente diferente y un poco más fácil de usar.

1 me gusta

El CSS principal no cambió y el componente no establece el tamaño de fuente. :thinking:
¿Quizás tenías CSS personalizado antes?

2 Me gusta

4 publicaciones se dividieron en un nuevo tema: Estilo móvil roto de la barra de navegación de categorías del encabezado

¡Me encanta este TC, gracias! ¡Sería genial poder personalizar qué elementos aparecen y cuáles no!

3 Me gusta

Me encanta, pero el componente de tema parece roto en la última versión de Discourse.

EDITAR: funciona bien, pero necesitaba desactivar los iconos de “chat” y “Dark-Light Toggle” en la cabecera.

2 Me gusta

Funciona para mí con el chat activo :slight_smile:

3 Me gusta

Sí, es por mi logo. Si lo recorto un poco, funciona con el chat y el selector de modo claro/oscuro. Por ahora estoy usando:

.d-header #site-logo {
max-height: 30px;
}

2 Me gusta

Hola, acabo de ver un error, puedes reproducirlo así. En móvil:

1- Haz clic en una categoría en la cabecera
2 - Haz clic en una publicación de la categoría y desplázate hasta el final
3 - Haz clic en la misma categoría en la cabecera

Desaparecerá toda la cabecera de la categoría. Lo acabo de probar en mi foro y en la demo.

EDITAR:
Es lo mismo si vas a una categoría y actualizas (f5) la página. Desaparecerá toda la categoría.

EDITAR:
¿Hay alguna solución? Gracias.

4 Me gusta