Composant de thème pour les en-têtes de catégories Discourse

Voici la PR pour prendre en charge les logos de catégorie en mode sombre :

Ce bug m’a aussi un peu dérangé. Un peu de CSS personnalisé fait l’affaire :

// laisser le lien Lire la suite des en-têtes de catégorie utiliser la même couleur que le texte du résumé

.category-about-url a {
  color: inherit;

}
2 « J'aime »

Mon souhait restant pour le lien « en savoir plus » : l’afficher uniquement s’il y a réellement plus de contenu. J’ai des pages de catégorie À propos longues et d’autres courtes, et je préférerais ne pas proposer de lien vers du contenu supplémentaire inexistant.

(Je n’ai aucune idée si c’est réalisable. Cela pourrait être beaucoup demander à un TC.)

1 « J'aime »

Lorsque la description complète de la catégorie est affichée, je rencontre également ce problème sur Theme Creator et sur mon instance de développement. Je suis en train d’examiner la situation. Je soupçonne que cela est dû au fait que la route change mais que la variable suivie ne change pas.

MISE À JOUR : J’ai ajouté une fonctionnalité d’expansion/réduction pour les descriptions de catégories ici. @nathank J’ai également corrigé le bug dans :

Avec une petite aide de Ask Discourse pour l’utilisation de willDestroy avec le service de routage.

2 « J'aime »

Wow, Nate ! :open_mouth: 55 commits et une PR en une soirée… incroyable.
J’attendrai une fusion et j’ai hâte de l’essayer !

1 « J'aime »

Une fin de matinée pour moi, en fait :wink:. Je vais voir s’il est possible de vérifier si la description contient plus de texte, comme vous l’avez suggéré. J’ai moi-même ressenti ce besoin lors de mes tests.

2 « J'aime »

C’est une addition fantastique ! :heart:

Juste un petit point de retour : Il serait peut-être judicieux d’ajouter une icône en forme de chevron dans le coin supérieur droit ou sur le bord droit de l’en-tête de catégorie pour indiquer la fonctionnalité d’expansion/réduction aux utilisateurs. Mais c’est un excellent début, et pour l’instant, utiliser un emoji dans le texte du lien


comme indicateur fait l’affaire :

2 « J'aime »

PR a été fusionné :git_merged: !

Compris :+1: . Je vais jeter un œil.

3 « J'aime »

Nate, la fonctionnalité en savoir plus/en réduire est excellente, merci !

S’il existe un moyen de conditionner ce lien à l’existence de plus de texte, ce serait formidable, mais je pourrais aussi simplement écrire des descriptions plus longues :rire :

Je vois cependant quelques problèmes que vous n’avez peut-être pas eu le temps de repérer :

  • les liens de catégorie et d’étiquette n’affichent pas leurs icônes SVG
  • l’image de catégorie n’apparaît pas, j’ai donc l’icône par défaut du site
(capture d'écran)

Une petite chose que j’ai réussi à contourner : les liens dans le texte À propos n’héritaient pas de la couleur du texte, comme le lien en savoir plus mentionné précédemment. Ce CSS stylise les liens textuels sans affecter les liens de catégorie et d’étiquette :

// stylisation des liens textuels, pour exclure les liens de catégorie et d'étiquette
.category-title-header .category-title-description 
a:not([data-type="tag"], [data-type="category"]) {
  color: inherit;
  text-decoration: underline;
}
(captures d'écran)

image
image

Je suis vraiment impressionné par les mises à jour, et j’espère que mes problèmes de SVG et d’icônes ne sont qu’une simple correction.

Intéressant. Savez-vous si c’était déjà le cas auparavant ?

Je vais regarder. J’ai aussi rencontré ce problème. Essayez de désactiver le paramètre afficher le logo du site en attendant, cela semble résoudre le problème.

Merci. Était-ce le cas auparavant et un changement s’est-il produit ?

Essayez de désactiver le paramètre show site logo en attendant, cela semble résoudre le problème.

Cela fonctionne - merci ! J’aurais dû expérimenter davantage avec les paramètres.

Quant aux icônes de lien SVG et aux couleurs des liens textuels, je ne peux pas dire ce qu’ils auraient pu faire auparavant - je n’ai jamais eu de liens dans le court résumé du texte “À propos”, mais il y en a maintenant dans le “lire la suite” développé.

(J’ai partagé ce CSS de couleur de lien au cas où il vous serait utile, à vous ou à quelqu’un d’autre, mais je sais que ce type de modification de style n’est pas nécessairement la responsabilité du composant.)

1 « J'aime »

Nate, des réflexions sur le problème des icônes SVG de catégorie/lien de remplacement ?

image image
Je ne sais pas s’il y a des différences dans la façon dont ils doivent être codés dans l’en-tête par rapport au sujet, mais ce qui est généré est assez différent :

Comparaison des liens de catégorie

Lien de catégorie dans l’en-tête :
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>Wild Speculations</span>
</a>

Lien de catégorie dans le sujet :
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square" aria-label="Wild Speculations">
  <span class="hashtag-category-square hashtag-color--category-5"></span>
  <span>Wild Speculations</span>
</a>

et

Comparaison des liens de tag

Lien de tag dans l’en-tête :
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>ai</span>
</a>

Lien de tag dans le sujet :
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag" aria-label="ai">
  <svg class="fa d-icon d-icon-tag svg-icon hashtag-color--tag-5 svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <use href="#tag"></use>
  </svg>
  <span>ai</span>
</a>

J’ai été occupé ces derniers jours (je m’en occuperai demain). Je soupçonne que cela est inclus dans la description de la catégorie. Si vous utilisez la description complète, cela se produit-il toujours ?

J’apprécie que vous fassiez du bénévolat, et je ne veux pas vous harceler. J’ai regardé pour voir s’il y avait quelque chose que je pouvais résoudre moi-même. (Il n’y a rien. :flushed_face:)

Mais oui, cela se produit toujours avec Afficher la description complète de la catégorie activé.

1 « J'aime »

J’essaierai de voir s’il y a quelque chose que je puisse faire. Le dernier recours est d’utiliser une certaine logique (qui peut être compliquée) pour les ajuster en fonction des couleurs (qui peuvent ne pas tenir compte des icônes). Je suis ouvert aux suggestions si quelqu’un a une meilleure façon.

@ToddZ Si vous regardez cet exemple du composant officiel Category Banners (que je pense que Meta utilise), il a également ce problème.

Je vois…! Et quelqu’un mentionne le problème :

J’ai installé Category Banners pour vérifier que les icônes de catégorie fonctionnent – mais elles ne fonctionnaient pas. Les icônes de catégorie et d’étiquette obtiennent le placeholder, tout comme avec Category Headers. Et c’est la même chose quel que soit le point de sortie choisi dans les paramètres.

S’il y a un moyen de les faire traiter normalement, ce serait formidable, mais je ne voudrais pas que vous ayez recours à une solution de contournement complexe.

1 « J'aime »

J’ai juste testé la compatibilité avec le thème Horizon. Dans l’ensemble, cela fonctionne, mais le seul problème est que la sortie du plugin actuellement utilisée par le composant de thème des en-têtes de catégorie se trouve dans le conteneur list-controls sur le thème Horizon. Par conséquent, l’ensemble de l’en-tête de catégorie reste fixe.

La solution suggérée est de changer la sortie du plugin ou d’ajouter une option pour choisir une sortie de plugin différente à l’extérieur du conteneur list-controls, par exemple la sortie discovery-list-controls-above.

Je peux créer une PR si vous le souhaitez @NateDhaliwal

1 « J'aime »

Intéressant. Merci de l’avoir soulevé ! Je vais examiner cela.

1 « J'aime »