La balise n'est pas cliquable dans la liste des sujets sur mobile

Étapes de reproduction (tout sujet avec des tags sur Meta) :

  • bureau :
    • la catégorie et les tags sont cliquables dans la liste des sujets et le titre du sujet
  • mobile :
    • la catégorie est tappable dans la liste des sujets (changement récent, je crois) et dans le titre du sujet
    • les tags ne sont tappables que dans le titre du sujet

Cela a déjà été discuté (Opening the category in the topic-list on mobile - #2 by codinghorror, Extra padding makes it hard for users to click on tag and category under topic title - #8 by awesomerobot), la raison pour laquelle la vue de la liste des sujets sur mobile ne permet pas de taper sur la catégorie et les tags est la petite taille des éléments sur mobile, mais en même temps, il a toujours été possible de taper sur la catégorie et les tags dans le titre du sujet, où les éléments sont de la même taille et l’espace entre eux est encore plus étroit.

Personnellement, je ne trouve pas ces éléments trop petits sur mobile. En fait, je tape fréquemment sur la catégorie et les tags dans la liste des sujets, pour me retrouver à la place dans le titre du sujet, devant répéter la même action, ce qui m’amène finalement à la vue de la catégorie/tag.

3 « J'aime »

Salut @md-misko :wave:

Je peux reproduire le problème.

Il y a bien des liens sur les tags dans la vue mobile, mais cliquer dessus ne fonctionne pas.
Avoir le curseur et cliquer dessus ouvre parfois le sujet ci-dessous :

4 « J'aime »

Je pense que tout le changement par @awesomerobot est remplaçable par du CSS. Essayez peut-être un composant de thème sur votre site pendant quelques semaines et revenez avec la modification CSS que vous recommandez ?

1 « J'aime »

Sam, faites-vous référence à ceci :

J’ai déjà essayé cela dans un composant de thème en utilisant le CSS ci-dessus, mais cela n’a pas semblé fonctionner.

Mon serveur de production n’est pas encore mis à jour vers la dernière version et les catégories et les tags ne sont pas cliquables là-bas.

Mais j’ai aussi essayé cela sur staging en utilisant la dernière version et quelque chose a dû changer récemment, car la catégorie est cliquable maintenant, mais les tags ne le sont pas.

Pour des raisons de cohérence, seriez-vous d’accord pour dire que les deux éléments remplissent des fonctions similaires et devraient fonctionner de la même manière dès la sortie de la boîte ?

Bien sûr, cela ne me dérangerait pas de corriger cela en utilisant le CSS, mais cela ne semble pas fonctionner pour moi (j’ai essayé à la fois sur la production et sur staging).

Hmm, il semble que quelque chose ait régressé… Ce que je vois maintenant sur iOS, c’est que les catégories mènent à la page de catégorie et que les tags sont une zone morte (ils ne mènent donc même pas au sujet). Je peux examiner cela. Ce CSS est également obsolète… pour le moment, ce serait (je mettrai à jour ce post) :

.topic-list .topic-item-stats__category-tags { 
  .discourse-tag,
  .badge-wrapper {
    pointer-events: all; 
  }
}

Je comprends tout à fait le désir de cohérence, mais il est très facile d’appuyer accidentellement sur une catégorie ou un tag au lieu d’un sujet, ou d’appuyer sur la mauvaise catégorie/tag… et c’est une expérience particulièrement mauvaise dans la liste des sujets où entrer dans un sujet est l’action principale.

La taille minimale recommandée pour un élément tactile sur un appareil mobile est généralement d’environ 45 pixels carrés, et nous devrions presque doubler la hauteur des catégories et des tags pour y parvenir. C’est possible si les catégories et les tags sont limités à une seule ligne, mais de nombreux sites ont suffisamment de contenu ici pour qu’ils reviennent à la ligne… et un espacement comme celui-ci ne serait pas idéal :

Je pourrais imaginer de repenser les catégories et les tags pour utiliser une sorte de style plus proche des boutons afin de garantir des tailles tactiles appropriées, mais ce serait un changement majeur que nous voudrions implémenter dans tout Discourse.

2 « J'aime »

Merci pour le CSS mis à jour, il fonctionne sur la dernière version.

Étrangement, ce n’est pas du tout mon expérience sur mobile. Peut-être est-ce dû à mon utilisation de la main droite, mais j’ai toujours trouvé beaucoup plus difficile d’appuyer sur le titre du sujet que sur tout autre élément.

J’utilise principalement mon pouce droit pour naviguer et il est presque impossible d’appuyer accidentellement sur la catégorie et même sur les étiquettes la plupart du temps, mais appuyer sur le titre lui-même l’est parfois (en raison de l’alignement à gauche du texte et du retour à la ligne dû à la largeur étroite de l’écran, il y a principalement de l’espace négatif à droite).

Heureusement, le Composant de thème de sujet cliquable a considérablement amélioré la navigation sur mobile pour moi, où j’utilise maintenant presque exclusivement l’espace négatif dans la liste des sujets pour naviguer vers le sujet lui-même, et j’utilise les éléments de catégorie et d’étiquette pour filtrer rapidement vers la vue de catégorie ou d’étiquette (pour être surpris, encore et encore, que cela ne fonctionne pas :upside_down_face:).

Je ne suis pas sûr que cela soit lié à la taille de l’écran, mais mon mobile a un écran de moins de 6 pouces et je n’ai jamais eu de problèmes pour cibler ces éléments.

Et lorsque vous êtes dans le sujet lui-même, il y a encore moins d’espacement entre le titre du sujet et les éléments de catégorie et d’étiquette, et appuyer dessus a toujours été activé là.

2 « J'aime »