Bonjour Don,
Tout d’abord, quel thème époustouflant ! J’ai récemment déployé FKB Pro pour ma communauté éducative locale, Jiwa.now, et l’interface utilisateur basée sur des cartes est magnifique et très professionnelle.
En testant sur mobile, j’ai remarqué un problème d’expérience utilisateur concernant les zones cliquables des cartes de sujets. Actuellement, les zones cliquables semblent incohérentes. Par exemple, les utilisateurs peuvent cliquer sur les bords extrêmes de la carte pour accéder à un sujet, mais cliquer sur d’autres zones vides (comme à droite de la rangée des avatars ou au milieu du pied de page) ne produit aucun effet.
Cette interaction aléatoire « ça passe ou ça casse » déroute les utilisateurs et entraîne souvent des clics accidentels lorsqu’ils tentent simplement de faire défiler ou de balayer le flux.
Une suggestion pour les futures mises à jour : Il serait bénéfique pour l’expérience utilisateur que le thème améliore ce point par défaut en rendant uniquement le contenu principal (Titre, Image et Extrait) cliquable pour accéder au sujet, tout en désactivant le fond de la carte pour éviter les clics accidentels lors du défilement.
En attendant, afin de rendre l’expérience tactile sur mobile 100 % fiable pour mes utilisateurs, j’ai écrit un extrait CSS utilisant une approche de « liste blanche » avec pointer-events. Cela neutralise complètement le clic sur le fond et réactive spécifiquement les clics uniquement sur les éléments interactifs réels.
J’ai pensé partager cela ici pour toute personne souhaitant affiner ses zones tactiles, et peut-être que cela pourrait servir de référence utile aux développeurs :
/* Correctif pour les conflits de clic/tactile sur mobile (Approche de liste blanche intelligente) */
/* 1. Neutraliser l'arrière-plan entier de la carte pour éviter les clics lors du défilement */
.topic-list-item {
pointer-events: none !important;
}
/* 2. Réactiver tous les liens et boutons natifs (Avatars, Tags, Titres) */
.topic-list-item a,
.topic-list-item button {
pointer-events: auto !important;
}
/* 3. Réactiver les clics sur les images */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
pointer-events: auto !important;
cursor: pointer !important;
}
/* 4. Réactiver toute la zone des statistiques du pied de page */
.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. Éliminer les éléments pseudo-stylisés de liens étirés qui se chevauchent */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
pointer-events: none !important;
display: none !important;
}
Merci !
Leo