Estilo del botón Ocultar detalles

:information_source: Resumen Hace que los [details] sean más obvios y clickables
:eyeglasses: Vista previa a través de Theme Creator
:hammer_and_wrench: Repositorio Ger / Component - Better Hide Details · GitLab
: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

Descripción

Este componente hace más aparente que el encabezado de [details] funciona como un botón. Los detalles anidados tienen un color más intenso por cada nivel y queda claro dónde termina cada elemento.

Capturas de pantalla

Con el componente de tema Estilo de Botón Ocultar Detalles

Sin el componente de tema Estilo de Botón Ocultar Detalles
Esto es lo mismo sin que el componente esté activo en una instalación normal:

Fuente utilizada en el ejemplo
[details=Línea de título]
Contenido
[details=Título anidado cerrado]
Contenido anidado
[/details]
[details=Título anidado]
Más contenido anidado
[/details]
[/details]
[details=Segundo detalle]
Más contenido
[/details]

Texto

[details=Detalles adicionales]
Aún más contenido
[/details]

(↑ En cuanto al formato de meta de Discourse para ocultar detalles, no estoy completamente seguro de qué afecta a la tematización en esta instalación o si podría ser una característica próxima).

Características

  • Deja claro dónde empieza/termina un [details] y que se puede hacer clic en él
  • El [details] actualmente seleccionado se resalta visualmente al presionar TAB.
  • Se manejan varios casos extremos como anidamiento, [details] sucesivos múltiples
  • Aparece en vivo en la vista previa del editor
  • Visualización básica en las secuencias “Respuestas recientes”, etc.
  • Utiliza el color Terciario del esquema de colores
  • Flecha separada para títulos de resumen de varias líneas

Observaciones

  • Lo he probado con todos los temas de la instancia de Discourse de la que soy participante y funcionó allí
  • Utiliza parcialmente características CSS más recientes, por lo que los colores podrían no funcionar correctamente en navegadores antiguos
  • Si Discourse cambia la forma en que se estructuran o estilizan los [details] en el futuro, este componente de tema probablemente se romperá.
5 Me gusta

Es uno de los experimentos de diseño
Puedes leer más al respecto en Details in topic styling changes - Feedback

3 Me gusta

:heartpulse: Sería mejor si hubiera una configuración para el color de fondo.