Afficher « et XY autres groupes » au lieu de « ... » sur le profil utilisateur

UX
,
1

Dans notre communauté, nous avons constaté que la découvrabilité de la liste de tous les groupes de tous les utilisateurs était assez mauvaise – le lien sur le « … » peut facilement être manqué. Surtout pour les utilisateurs ayant une visibilité limitée, il peut être facile de le manquer.
Serait-il possible d’ajouter une étiquette plus explicite à ce lien ?

4 « J'aime »
2

Vous ne pourrez probablement pas obtenir le nombre « XY » sans un codage plus poussé, mais l’ajout de ce CSS personnalisé devrait améliorer votre situation :

dd.groups:last-child > a::after {
  content: 'et plus';
}

group_css

Je n’ai pas testé ce CSS de manière exhaustive sur l’ensemble du site, mais après un contrôle ponctuel, il semble agir uniquement sur le lien des groupes de la page de profil. Veuillez m’indiquer s’il apparaît quelque part où il ne devrait pas.

(De plus, je suis d’accord que la découvrabilité de ... n’est pas idéale, et un changement dans ce sens dans le cœur du système serait le bienvenu.)

1 « J'aime »
3

En effet, même écrire « et plus encore » serait une amélioration, même si cela semble assez étrange sans supprimer les points.\n\nIl semble qu’ils ne fassent pas partie d’un message de localisation, mais qu’ils soient codés en dur ici :\ndiscourse/app/assets/javascripts/discourse/app/templates/user/collapsed-info.gjs at main · discourse/discourse · GitHub

1 « J'aime »
4

Qu’en est-il de ceci ?

  • D’abord, nous ajoutons une virgule après le dernier lien nommé
  • Ensuite, nous masquons les ...
  • Ensuite, nous insérons le texte and more – et nous le reculons un peu car l’espace pour les ... est techniquement toujours là
  • (Ajout également de sélecteurs plus spécifiques pour éviter d’éventuels conflits ailleurs)
.user-main .about .secondary dd.groups span:last-of-type::after {
  content: ",";
}

.user-main .about .secondary dd.groups:last-child > a {
  visibility: hidden;
}


.user-main .about .secondary dd.groups:last-child > a::after {
  visibility: visible;
  margin-left: -.8rem;
  content: "and more";
}

image

Il existe probablement une manière plus élégante de supprimer complètement les ... du flux, mais la marge négative semble fonctionner correctement.

1 « J'aime »