Tarjetas de tema

[Discourse]

	Resumen	Tarjetas de tema reestilizan la lista de temas para mostrarlos como tarjetas con una miniatura
	Vista previa	Vista previa en Discourse Theme Creator
	Repositorio	https://github.com/discourse/discourse-topic-cards
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

Instala este componente de tema

Dado que este es un componente de tema #oficial mantenido por el equipo de Discourse, las solicitudes de #soporte, #contribuir:errores, #contribuir:ux y #contribuir:funciones pueden realizarse en las categorías respectivas aquí en Meta, y etiquetadas con la etiqueta adecuada del componente de tema. Haz clic en un enlace a continuación para comenzar.

 Soporte  Error  UX  Función

Este componente de tema puede causar conflictos con otras personalizaciones de la lista de temas

Características

Este componente se inspira en Miniaturas de tema, simplifica el uso, agrega extractos y clics en toda la tarjeta, y añade un poco de magia CSS adicional.

• Haz que toda la tarjeta sea clickeable (excepto el avatar del autor original)
• Muestra el extracto
• Muestra una miniatura del tema, si está disponible
• Muestra la fecha de publicación
• Recorta algunos metadatos y destaca más los “me gusta”

Escritorio

Móvil

Configuración

Traducción	Predeterminado
published	Publicado

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

[Moin]

La línea azul vertical cubre partes del texto

(Parece no depender del navegador/dispositivo, probé Edge/Windows, Chrome/Android y Firefox/Android)

[frold]

funcionó directamente en Chrome en Windows y en Chrome en iPhone 8

[chapoi]

@Moin

La línea azul vertical cubre partes del texto

Correcto, lo olvidé. Lo arreglaré. Gracias.

[jayme]

¿Cómo elimino las pestañas “respuestas” y “actividad” debajo del botón “+ Nuevo tema”?
Hace que mi tema se vea muy corto y se ve mal, jaja

[Lilly (Lillian)]

Hola @jayme, parece que esas pestañas no forman parte de este componente y probablemente fueron puestas por otro componente o plugin de tema. Cuando cargo un foro de prueba con este componente, esas pestañas no existen, ni aparecen en las capturas de pantalla en el OP. Es posible que tengas que deshabilitar otros componentes para encontrar cuál es, y luego, si no hay una configuración para esas pestañas, es posible que tengas que deshabilitarlo.

[chapoi]

Border/box-shadow no funciona bien con las tarjetas, así que tuve que improvisar un poco para obtener una indicación de reemplazo

UX: replace border with text colour on select with keyboard

[Moin]

@chapoi

así que tuve que improvisar un poco para obtener una indicación de reemplazo

De alguna manera, ahora no veo ningún indicador

[chapoi]

¿Estás usando los comandos j/k para navegar?

[Moin]

No, solo usé Tab. Bueno, en realidad usé mi tablet. Después de usar el botón de retroceder, la publicación suele resaltarse. Eso no sucedió aquí. Solo probé esto en la computadora para la grabación.

[derak (Cristian Deraco)]

¡componente de tema impresionante!

[Gonerdot]

Intenté instalar este componente en muchos temas, pero se ve un poco torcido en todas partes. ¿Qué estoy haciendo mal?

[chapoi]

Hmmm… difícil de decir. Parece que de alguna manera la altura de las tarjetas está limitada y el contenido es más grande de lo habitual.

¿Puedes verificar primero si no se debe a un conflicto con otros componentes o temas? Veo que también tienes habilitada la barra lateral derecha y eso podría afectar algunos cálculos de tamaño, tal vez.

¿Puedes verificar eso y avisarme?

[Gonerdot]

Desactivé todos los demás componentes, pero el problema no se resolvió.

[chapoi]

¡Raro! ¿Puedo echar un vistazo al foro en el que lo has instalado?

[Gonerdot]

bearblog.ru

Pero necesitas cambiar el tema a dracula en la configuración de tu perfil.

[chapoi]

¡Gracias, echaré un vistazo!

[Gonerdot]

Me parece que el problema se puede solucionar limitando el número de caracteres en la vista previa, pero no sé cómo hacerlo.

[chapoi]

Entonces, las tarjetas de tema necesitan una altura máxima, de lo contrario, obtienes problemas como:

No puedo decir por qué la tuya no encaja bien, porque en el ejemplo del creador de temas también puedo usar títulos de varias líneas y aún así encaja:

Podría tener algo que ver con el tamaño de fuente, la familia de fuentes o la altura de línea. Desafortunadamente, eso requerirá algunos ajustes individuales, y no es algo para lo que pueda aplicar una solución general.

Una posible solución es, como dijiste, limitar el título a que solo ocupe 1 línea, lo que podrías hacer agregando este css:

.topic-card {
  .link-top-line {
      max-width: 100%;
      overflow: hidden;
      
     .title {
        display: block;
        white-space: no-wrap;
      }
   }
}