Submenús de encabezado

[LeoDavidson]

Parece que ahora hay un error cuando el modo Fijo (mostrar siempre el menú, incluso al desplazarse hacia abajo) está activado.

Esto lo veo con Discourse 2.9.0.beta8, y también lo he reproducido fácilmente usando el sitio de vista previa del tema oficial de Discourse. Creo que lo noté por primera vez hace unas 2 semanas, pero no estoy completamente seguro de cuándo empezó a suceder.

Para reproducirlo:

• Activa el modo Fijo en la configuración del componente del tema.
• Haz clic en un hilo con muchas respuestas.
• (Si es la primera vez que lees el hilo y estás en la parte superior, desplázate hacia abajo unas cuantas respuestas, vuelve a la lista de hilos y haz clic de nuevo en el hilo, para que te lleve de vuelta a la publicación en la que estabas).

La cantidad de relleno necesaria en la parte superior de la página se calcula mal, lo que hace que la parte superior de la publicación y el nombre de la persona que la escribió queden ocultos bajo la cabecera y cortados.

Tienes que desplazarte un poco hacia arriba cada vez que haces clic en un hilo, solo para ver de quién estás leyendo la publicación.

Ves esto al entrar en el hilo:

Cuando deberías ver algo como esto:

Lo realmente extraño es que no siempre ocurre, y presionar Ctrl-F5 a menudo lo soluciona. Pero vuelve a ocurrir un tiempo después.

Editar el CSS para aumentar la cantidad de relleno que añade a main-outlet de alguna manera soluciona las cosas, pero luego obtienes mucho espacio en blanco en la parte superior de las listas de temas. Parece que las listas de temas y los hilos necesitan un relleno diferente, o tal vez uno de ellos está añadiendo el relleno dos veces o algún relleno extra de otro lugar.

(Edición: A veces la página no se puede desplazar lo suficiente hacia arriba para ver el problema. Por ejemplo, cuando vas a la última publicación de un hilo y es una corta, no hay forma de que la cabecera se superponga al nombre del autor allí, incluso si te desplazas hacia abajo tanto como puedas manualmente. Eso puede explicar algunas situaciones en las que las cosas parecen funcionar. Prueba con una ventana del navegador que no sea muy alta para reproducir el error de la manera más fiable).

[Tris20 (Tristan)]

¿Hay alguna forma de evitar que esto aparezca en la pantalla de inicio de sesión? Puedo hacerlo con el siguiente CSS, pero esto aún presenta el submenú del encabezado por un segundo y luego lo oculta.

.static-login .top-menu {
	display: none;
}
.static-login .d-header-wrap {
	display: none;
}

¿Hay una mejor manera de evitar que esto aparezca durante la página static-login?

[awesomerobot (Kris)]

Esta y otros temas no funcionarán en la vista del rastreador; la vista del rastreador no carga la mayor parte de JavaScript de Discourse.

[davidkingham]

Hola Kris, este componente podría actualizarse para usarse con el chat y la barra lateral. Con la configuración fixed_mode activada, el chat y la barra lateral no se mueven hacia abajo y quedan detrás del d-header.

El CSS a continuación parece solucionar las cosas muy bien, excepto que no funciona bien con Category Banners, ya que parece estar empujando el #main-outlet hacia abajo otros 40px en las páginas de categorías. ¡Gracias!

.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
    margin-top: 40px !important;
}

[awesomerobot (Kris)]

¡Gracias por señalarlo! Acabo de agregar algunas correcciones aquí:

UX: update fixed styling for sidebar & chat

[davidkingham]

¡Genial, gracias Kris! ¿Alguna idea de por qué #main-outlet baja 40px?

#main-outlet {
   padding-top: calc(1.8em + 40px);
}

[awesomerobot (Kris)]

Ah, lo pasé por alto; eso se puede eliminar y se hará una vez que se fusione esta PR: UX: remove old main-outlet adjustment by awesomerobot · Pull Request #19 · discourse/discourse-header-submenus · GitHub

Actualización: ya se fusionó, por lo que el espacio extra desaparecerá si actualizas el componente.

[P2W (Mike Riddick)]

¿Dónde encontraría un tipo los nombres de los iconos?

[awesomerobot (Kris)]

Creo que todo lo que aparece aquí está disponible para su uso: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Aunque algunos iconos requieren un paso adicional… para los iconos que no usamos en Discourse por defecto, los nombres de los iconos deben añadirse a la configuración del tema Svg icons.

Si realmente quieres ser específico, todos los iconos que usamos en Discourse por defecto se enumeran aquí: discourse/lib/svg_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub

Y todos los iconos disponibles para su uso en temas (a través de la configuración svg icons) se encuentran en este directorio: discourse/vendor/assets/svg-icons at main · discourse/discourse · GitHub

Ver los archivos SVG en GitHub no es realmente útil, porque verás un gran cuadro blanco:

pero puedes hacer clic en el botón “raw” y ver el código fuente de la página, el nombre del icono es el id del symbol

[P2W (Mike Riddick)]

Eres genial, muchas gracias

[davidkingham]

Gracias Kris, eso lo solucionó. Sin embargo, he notado un par de problemas más. .topic-navigation necesita ser bajado 40px, y .topic-post.sticky-avatar .topic-avatar parece calcularse incorrectamente al desplazarse hacia abajo, y termina detrás del d-header. Además, es posible expandir el compositor y la ventana de chat demasiado alto y perder los controles detrás del d-header también. ¡Creo que eso cubre todo!

Editar: una cosa más, cuando visitas un enlace de anclaje, el encabezado también está debajo del encabezado.

[satonotdead]

¿Alguien ha descubierto esto? Me gusta el enfoque de no usar espacio adicional y reutilizar los recursos que ya están en la pantalla.

¡Es realmente genial que al pasar el cursor sobre el logo se pueda navegar al blog, a la documentación o a la wiki!

[alxndr (Alexander)]

Para que conste, la “configuración del tema de iconos SVG” mencionada por Kris se encuentra actualmente en Admin > Configuración > Otro > hacia la parte inferior hay subconjunto de iconos svg (…¿creo que esto es correcto?).

[davidkingham]

Hay un pequeño problema de z-index con la nueva lightbox Glimmer, 1001 simplemente la pone encima de la lightbox porque la lightbox está en 1000.

[awesomerobot (Kris)]

Problema clásico de z-index, se solucionará la próxima vez que se actualice Discourse

UX: increase experimental lightbox z-index

[clement]

Gracias por este buen plugin.

Me pregunto si hay una forma de no mostrar los submenús del encabezado cuando no se ha iniciado sesión.

O, (¿como idea de desarrollo?) quizás sea mejor, ¿qué tal tener elementos de menú que enlacen a grupos (niveles de confianza u otros)?
Es fácil de pedir, lo sé…

Gracias
C.

[Kieran_Berryman]

No creo que esto esté en ningún otro lugar, disculpas si es así. Me encanta usar submenús de encabezado, pero tengo muchos encabezados superiores y, como resultado, se ve bastante mal en el móvil. Me gustaría que mis encabezados no se salieran de la pantalla y me hicieran desplazarme. ¿Es esto posible?

[Kieran_Berryman]

Okay, resolví mi problema compilando todos los enlaces más importantes como submenús en un encabezado superior “Navegacional” en el móvil.