Hola Don,
¡En primer lugar, un tema absolutamente impresionante! Recientemente implementé FKB Pro para mi comunidad local de educación, Jiwa.now, y la interfaz basada en tarjetas se ve preciosa y muy profesional.
Mientras probaba en dispositivos móviles, noté un problema de experiencia de usuario (UX) relacionado con las áreas clicables de las tarjetas de temas. Actualmente, las zonas clicables parecen inconsistentes. Por ejemplo, los usuarios pueden hacer clic en los bordes extremos de la tarjeta para entrar a un tema, pero hacer clic en otras áreas vacías (como a la derecha de la fila de avatares o en el medio del pie de página) no hace nada.
Esta interacción de «acierto o fallo» confunde a los usuarios y a menudo provoca clics accidentales cuando simplemente intentan deslizar y desplazarse por el feed.
Una sugerencia para futuras actualizaciones: Sería una mejora de UX si el tema pudiera refinar esto por defecto, haciendo que solo el contenido principal (título, imagen y extracto) sea clicable para entrar al tema, mientras se deshabilita el fondo de la tarjeta para evitar clics accidentales al deslizar.
Mientras tanto, para garantizar que la experiencia táctil en móviles sea 100% fiable para mis usuarios, escribí un fragmento de CSS utilizando un enfoque de «lista blanca» con pointer-events. Esto neutraliza por completo los clics en el fondo y reactiva específicamente los clics solo en los elementos interactivos reales.
Pensé en compartirlo aquí para cualquiera que busque refinar sus objetivos táctiles, y quizás podría ser una referencia útil para desarrolladores:
/* Solución para conflictos de clic/toque en tarjetas móviles (Enfoque de lista blanca inteligente) */
/* 1. Neutralizar todo el fondo de la tarjeta para evitar clics al deslizar */
.topic-list-item {
pointer-events: none !important;
}
/* 2. Reactivar todos los enlaces y botones nativos (avatares, etiquetas, títulos) */
.topic-list-item a,
.topic-list-item button {
pointer-events: auto !important;
}
/* 3. Reactivar clics en imágenes */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
pointer-events: auto !important;
cursor: pointer !important;
}
/* 4. Reactivar toda el área de estadísticas del pie de página */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
pointer-events: auto !important;
}
/* 5. Eliminar cualquier pseudoelemento de enlace estirado superpuesto */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
pointer-events: none !important;
display: none !important;
}
¡Gracias!
Leo