🔥 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)
1 me gusta

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