Le bouton Répondre du pied de page du sujet peut casser le fil

Contribuer UX
11

Merci pour cela Don, je voulais faire cela depuis des années ! J’ai poussé votre idée un peu plus loin pour mes besoins. Comme mon site est un peu différent et que chaque catégorie est différente et pas seulement des discussions directes, j’ai choisi de changer complètement le texte du bouton de réponse. Ainsi, pour ma catégorie de critique d’images, je l’ai changé en “Donner une critique ou répondre”, en ajoutant “ou répondre”, je pense que cela contourne la préoccupation de Jakke. Merci de l’avoir soulevé Jakke, je l’avais initialement réglé sur “Donner une critique” uniquement, mais vous avez raison, cela ne fonctionne pas dans toutes les situations.

Je n’aime pas l’astuce font-size: 0;, mais je n’ai pas réussi à faire fonctionner l’astuce visibility:hidden avec cela pour une raison quelconque. De plus, j’ai essayé de régler la taille de la police sur 1em plutôt que sur px, mais cela n’a pas semblé fonctionner non plus. J’ai fini par utiliser une police légèrement plus grande pour que ce bouton se démarque, mais je préférerais utiliser em pour que la police s’adapte.

// Critique d'images
body.category-image-critiques-abstract-critiques,
body.category-image-critiques-avian-critiques,
body.category-image-critiques-flora-critiques,
body.category-image-critiques-human-fauna-critiques,
body.category-image-critiques-landscape-critiques,
body.category-image-critiques-macro-critiques,
body.category-image-critiques-night-critiques,
body.category-image-critiques-non-nature-critiques,
body.category-image-critiques-wildlife-critiques,
body.category-image-critiques-weekly-challenge {
  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label {
          // masquer le texte de réponse
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // Nouveau texte
          font-size: 18px;
          content: "Critiquer l'image ou répondre";
        }
      }
    }
  }
}

C’est particulièrement génial pour ma catégorie AMA où j’ai changé le bouton de réponse en “Poser une question”, parfait ! Cela aide également la personne qui fait l’AMA à comprendre qu’elle doit utiliser le petit bouton de réponse.

// AMA
body.category-learning-ama {
  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label {
          // masquer le texte de réponse
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // Nouveau texte
          font-size: 18px;
          content: "Poser une question";
        }
      }
    }
  }
}

J’ai également défini une couleur de fond pour le bouton de réponse afin qu’il se démarque un peu plus. Je n’ai pas encore trouvé comment le faire transiter correctement pour le survol, des idées à ce sujet seraient utiles…

.discourse-no-touch .topic-body .actions .fade-out {
    background: var(--primary-low);
}

image
image1880×1430 116 KB

Enfin, j’espère que mon bavardage aidera les autres !

2 « J'aime »