🔥 Critica mi Componente de Tema: Tarjetas de Tema Avanzadas

Hola chicos

Descargo de responsabilidad: Ninguna IA resultó herida al crear este componente de tema :smiley:

Sí, chicos, soy culpable de codificar descaradamente una copia del componente de tema Topic Cards. Por lo tanto, un gran saludo a los autores y colaboradores originales por el gran trabajo.

Si bien al principio fue un fork, más del 80% del código y la estructura fueron reescritos por completo. Agregamos muchas funciones nuevas y, a primera vista, todas las diversas configuraciones pueden ser bastante abrumadoras.

Advanced Topic Cards - Lanzamiento Preliminar

Con nuestra reescritura obtienes:

  • Control más granular sobre dónde se muestran las tarjetas de temas
  • Dos diseños diferentes de tarjetas de temas
  • Carrusel de tarjetas destacadas en la parte superior de la página “Latest” (Más reciente)

Para una lista completa, desplácese hacia abajo :down_arrow:

Siéntanse libres de probarlo, ejecutarlo, copiarlo y criticarlo aquí en el hilo. Estoy realmente emocionado de recibir comentarios sobre el resultado:

Problemas Conocidos:

  • Configuración de TC redundante: Algunas de las características relativas a la miniatura y la altura de la tarjeta son redundantes/ya no son de valor
  • A la vista de escritorio le falta el desplazamiento horizontal mediante touchpad/rueda del ratón (Embla proporciona un complemento para eso, no lo hemos hecho)
  • Los botones de acción no están tan “pulidos”, necesitan una mejor revisión visual

Resumen de las mejoras y características:

  • Diseños por categoría y por dispositivo
    Configure las tarjetas por separado para escritorio y móvil como lista (imagen a la izquierda, contenido a la derecha) o rejilla (grid, imagen arriba, contenido abajo). Puede elegir exactamente qué categorías usan qué diseño en cada plataforma.

  • Herencia de diseño de subcategorías
    Opción de heredar los diseños de tarjetas de una categoría principal para no tener que configurar cada subcategoría manualmente.

  • Carrusel de temas destacados en la página de inicio (Embla)
    Un carrusel de temas destacados que puede colocar en rutas de descubrimiento (inicio/más reciente/superior/categorías), impulsado por Embla Carousel, con configuraciones para diapositivas por vista, bucle, alineación, comportamiento de arrastre y más.

  • Carrusel de subcategorías en las páginas de categorías
    Convierta la lista de subcategorías en una página de categoría en un carrusel horizontal, con controles sobre qué categorías principales y cuántos hijos se requieren antes de que se muestre.

  • Opciones de personalización visual

    • Marcadores de posición de miniaturas (icono de Font Awesome) cuando un tema no tiene imagen

    • Preajustes de radio de borde de tarjeta

    • Opciones de tamaño de fuente del título de la tarjeta (utilizando los tokens de fuente de Discourse)

    • Alturas fijas opcionales de tarjeta/rejilla y controles de tamaño de miniatura

  • Componentes de tarjeta más ricos
    Nueva estructura de tarjeta con:

    • Línea de autor (Byline) (avatar del OP + nombre de usuario + fecha de publicación opcional)

    • Botones de acción (Detalles + CTA de enlace destacado)

    • Etiquetas en línea (insignia de categoría + etiquetas dentro del cuerpo de la tarjeta)

  • Compatible con otros componentes de tema/complementos:

    • Complemento de calendario y eventos: Mostrar fecha del evento después del título
    • Componente de tema de portafolio de usuario: Mostrar
  • Características planificadas:

    • Control más detallado para el carrusel de temas destacados: Outlets de complementos adicionales, rutas de página, etc.
    • Expandir/Contraer Carrusel de tarjetas de temas destacados (+ expansión automática basada en temas nuevos/no leídos)
3 Me gusta

¡Muchas gracias por compartir, esto es fantástico!

2 Me gusta

¡Muy bien! ¡Gran trabajo! :+1:

Observaciones:

  • No funciona en rutas de descubrimiento sin categoría como /latest o selecciones de etiquetas sin categoría.

  • Las imágenes no siempre se alinean bien

image

incluso cuando no hay imágenes

image

  • El carrusel es MUY agradable, pero ¿no debería ser un componente separado?

  • Sería bueno poder excluir los temas sin imagen del carrusel.

3 Me gusta

¡Gracias por los comentarios!

Las imágenes se ven realmente raras, lo mismo ocurre con el texto del extracto del tema que se corta.

¿Sería mejor desde la perspectiva de UX UI añadir relleno alrededor de las imágenes en el diseño de lista?

Ese es un punto justo. Aunque mi intención era básicamente compartir los mismos estilos CSS para el carrusel y las tarjetas de temas normales.

:+1:

2 Me gusta