Tarjetas de tema

[Discourse]

	Resumen	Topic Cards rediseña la lista de temas para que se muestre como tarjetas con una miniatura
	Vista previa	Vista previa en el Creador de Temas de Discourse
: hammer_and_wrench:	Repositorio	https://github.com/discourse/discourse-topic-cards
: open_book:	¿Nuevo en Temas de Discourse?	Guía para principiantes sobre el uso de Temas de Discourse

Instalar este componente de tema

Como este es un componente de tema #oficial mantenido por el equipo de Discourse, se pueden solicitar #soporte, #errores, #experiencia de usuario y #características en las categorías correspondientes aquí en Meta, y etiquetarlas con la etiqueta del componente de tema apropiada. Haz clic en un enlace a continuación para comenzar uno.

 Soporte  Error  UX  Característica

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

Características

Este componente se inspira en Miniaturas de Temas, simplifica su uso, añade extractos y clics en tarjetas completas, y añade algo de magia CSS adicional.

• Hacer que la tarjeta completa sea clickeable (excepto el avatar del autor original)
• Mostrar el extracto
• Mostrar una miniatura del tema, si está disponible
• Mostrar la fecha de publicación
• Eliminar algunos metadatos y hacer que los “me gusta” sean más prominentes

Escritorio

Móvil

Ajustes

Traducción	Predeterminado
published	Publicado

¿Alojado por nosotros? Los componentes de tema están disponibles para su uso en nuestros planes Estándar, 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 Louis)]

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;
      }
   }
}