Catégories d'en-tête pour la barre de navigation

|||
|-|-|-|
| :discourse2: | Résumé | Header Categories Navbar est un composant simple qui ajoute un menu de liens de catégories parentes à l’en-tête du site, avec un débordement de défilement horizontal ajouté si/quand nécessaire.
| : eyeglasses:|Aperçu| Aperçu sur Theme Creator |
| : hammer_and_wrench:|Référentiel| https://github.com/discourse/discourse-categories-navbar |
| : question:|Guide d’installation|Comment installer un thème ou un composant de thème|
| : open_book:|Nouveau aux thèmes Discourse ?| Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Fonctionnalités

Ce composant de thème ajoute un menu de liens de catégories parentes à l’en-tête du site :

Paramètres

Nom Description
masquer le menu déroulant des catégories Masque le menu déroulant des catégories dans la navigation de la liste des sujets
masquer toute la navigation par fil d’Ariane Masque tous les fils d’Ariane de la navigation de la liste des sujets
masquer lors du défilement du sujet Lorsque activé, la barre de navigation sera masquée sur ordinateur lorsque le titre du sujet sera ancré à l’en-tête

:discourse2: Hébergé par nous ? Les composants de thème sont disponibles pour utilisation sur nos plans Standard, Business et Enterprise.

20 « J'aime »

C’est vraiment génial - j’adore ça, Kris ! Cela se combinera magnifiquement avec la sidebar, permettant aux chats principaux en haut et une courte sélection personnalisée sur la barre.

J’ai remarqué deux petits problèmes d’UX qui pourraient vraiment l’améliorer si on les traitait :

UX : mise en surbrillance de la sélection de catégorie

Lorsque vous êtes sur une liste de catégories, la bonne catégorie a un joli soulignement subtil.

Cependant, cela ne persiste pas si un sujet ou une sous-catégorie est entré.

Ce serait bien si cela persistait dans ces deux situations.

UX : défilement / dépassement sur mobile

Il y a un joli petit fondu / une flèche subtile visible lorsqu’il y a un dépassement des catégories sur ordinateur.

Le dépassement est beaucoup plus probable sur mobile, mais sur mon appareil (Chrome / Android), ces indices subtils ne sont pas présents - et il n’est pas clair que le défilement soit possible.

Il pourrait également être utile d’avoir la barre de catégories un peu plus haute sur mobile pour faciliter le défilement.

6 « J'aime »

Quelques autres problèmes d’UX s’appliquant principalement au mobile :

Chevauchement du fil d’Ariane du sujet mobile

Dans les vues de sujets mobiles, le fil d’Ariane entre en conflit avec la barre de navigation des catégories :

Catégorie mise en surbrillance non visible

De plus, la catégorie sélectionnée n’est pas automatiquement mise en évidence - cela signifie qu’elle n’est pas apparente à moins que l’utilisateur ne fasse défiler la barre de navigation. C’est vraiment essentiel.

Uniquement pour ordinateur de bureau ?

Je me demande si ce n’est pas encore prêt pour le mobile, et il serait très utile d’avoir un paramètre pour ne l’appliquer qu’à l’ordinateur de bureau (du moins pour l’instant).

4 « J'aime »

Merci pour vos commentaires rapides ! J’ai intégré quelques mises à jour qui devraient résoudre ces problèmes.

3 « J'aime »

Brillant - très heureux de donner mon avis quand il est écouté ! Je note que vous avez dû y apporter pas mal d’ajouts.

Je prendrai cela comme un joli petit cadeau de Noël :gift: les uns aux autres :heart_eyes:.

Vous avez corrigé cela lorsqu’une sous-catégorie a été entrée - merveilleux !

Cependant, cela ne s’applique pas lorsqu’un sujet est entré - est-ce intentionnel ? Personnellement, je pense qu’il serait logique que la catégorie reste mise en surbrillance pendant que l’utilisateur est “dedans”, ce qui inclut les sujets et pas seulement les vues de découverte de catégories.

De plus, lorsque j’entre dans une autre page (comme /admin), la catégorie reste sélectionnée. Il serait préférable qu’aucune catégorie ne soit sélectionnée dans ce cas.

Je peux voir le fondu sur mobile maintenant, mais pas une flèche / un chevron. Si possible, ce serait très utile car le fondu est assez subtil :

Bureau : image

Mobile : image

Demande #1 - UX

Masquer la barre de navigation lors du défilement dans un sujet. Tout devient un peu chargé !
image

De plus, il serait peut-être préférable sur le bureau d’avoir la barre de navigation située là où se trouvent le fil d’Ariane / les balises sur cette image au lieu d’en dessous.

Demande #2 - Fonctionnalité

Pourriez-vous s’il vous plaît ajouter une classe CSS à chaque pilier de navigation afin qu’il soit facile d’en masquer certains si nécessaire ?

Je demande car j’ai quelques catégories parentes (privées) qui ne sont que des parents afin d’activer les sous-catégories, et elles encombrent la navigation générale de manière indésirable.

Je les ai cachées pour l’instant en utilisant leur href, mais c’est bien sûr assez risqué !

Demande #3 - UX

Une option pour trier les catégories de la barre latérale par ordre alphabétique.

Comme je mets cela en œuvre, j’ai supprimé les catégories parentes de la liste par défaut des catégories de la barre latérale. Cela signifie que mes utilisateurs n’ont plus qu’une liste de 1 à 5 sous-catégories qui leur sont pertinentes.

Cependant, elles sont un peu mélangées et dans aucun ordre logique car l’ordre sur /Catégories pour les sous-catégories n’a pas vraiment de sens. Il serait très utile que ces sous-catégories soient alphabétiques pour aider à cela !!

4 « J'aime »

Les couleurs sont légèrement décalées lorsqu’elles sont sélectionnées

  • palettes claires et sombres par défaut

Des idées ?

3 « J'aime »

Merci d’avoir signalé ! Ceci devrait résoudre le problème :

2 « J'aime »

Fonctionne parfaitement. Merci !

2 « J'aime »

Bonjour ! Tout d’abord, je tiens à souligner qu’il s’agit d’un composant très utile pour le sujet et je vous remercie pour le travail accompli :raised_hands:
Sur mon instance, ce composant a provoqué une erreur. J’ai vérifié la compatibilité avec d’autres plugins et composants de thème et, à ce stade, je n’ai pas encore trouvé de conflit. Le composant lui-même pourrait-il être la cause ?

L’activation de ce composant déforme la présentation du contenu.
Voici une vidéo :


Pour détecter une erreur, vous devez cliquer sur n’importe quel message de la page des derniers messages /latest, le message s’ouvrira en mode standard, puis vous devrez revenir à la page des derniers messages.

1 « J'aime »

@Aizada_M - Je n’arrive pas à reproduire cela. Est-ce que cela vous arrive lorsque vous prévisualisez depuis le composant ?

2 « J'aime »

Salutations ! Désolé pour la longue réponse :raised_hands:
Je n’ai pas utilisé l’aperçu, je l’ai testé avec le composant activé.

1 « J'aime »

Cela fonctionne 100 % du temps lorsque je clique sur le nom de la catégorie sous le titre du sujet.

1 « J'aime »

J’ai remarqué que le texte dans la barre de navigation des catégories principales est soudainement passé à font-up-1 (alors qu’il était auparavant font-down-1, je crois). C’est assez choquant et désagréable, car c’est le même que toutes les autres pilules de navigation.

Je l’ai remplacé par ce CSS, qui est beaucoup plus agréable :

// corrige la taille du texte de la barre de navigation de l'en-tête
.custom-categories-navbar .nav-pills li a {
    font-size: var(--font-0);
}

Je préfère en fait font-0 car il est suffisamment différent et un peu plus facile à utiliser.

1 « J'aime »

Le CSS principal n’a pas changé et le composant ne définit pas la taille de la police. :thinking:
Peut-être aviez-vous du CSS personnalisé auparavant ?

2 « J'aime »

4 messages ont été déplacées vers un nouveau sujet : Style mobile cassé de la barre de navigation des catégories d’en-tête

J’adore ce TC, merci ! Ce serait génial de pouvoir personnaliser les éléments qui apparaissent ou non !

3 « J'aime »

J’adore, mais le composant de thème semble cassé dans la dernière version de Discourse

EDIT : cela fonctionne bien, mais il fallait désactiver les icônes « chat » et « Dark-Light Toggle » dans l’en-tête

2 « J'aime »

Ça fonctionne pour moi avec le chat actif :slight_smile:

3 « J'aime »

Oui, c’est à cause de mon logo. Si je le coupe un peu, ça fonctionne avec le chat et le sélecteur clair/foncé. J’utilise :

.d-header #site-logo {
max-height: 30px;
}

pour l’instant

2 « J'aime »

Salut, je viens de voir un bug, vous pouvez le reproduire comme ça. Sur mobile :

1- Cliquez sur une catégorie dans l’en-tête
2 - Cliquez sur un article dans la catégorie et faites défiler jusqu’à la fin
3 - Cliquez sur la même catégorie dans l’en-tête

Tout l’en-tête de catégorie disparaîtra. Je viens de l’essayer sur mon forum et sur la démo

EDIT :
c’est pareil si vous allez dans une catégorie et que vous rafraîchissez (f5) la page. Toutes les catégories disparaîtront.

EDIT :
Y a-t-il une solution ? Merci

4 « J'aime »