Sous-menus d'en-tête

[LeoDavidson]

Il semble y avoir un bug maintenant lorsque le mode Fixe (toujours afficher le menu, même en faisant défiler vers le bas) est activé.

Je constate cela avec Discourse 2.9.0.beta8, et je l’ai également reproduit facilement en utilisant le site de prévisualisation du thème officiel de Discourse. Je pense l’avoir remarqué pour la première fois il y a environ 2 semaines, mais je ne suis pas entièrement sûr quand cela a commencé.

Pour reproduire :

• Activez le mode Fixe dans les paramètres du composant de thème.
• Cliquez sur un fil de discussion avec de nombreuses réponses.
• (Si c’est la première fois que vous lisez le fil, et que vous êtes tout en haut, faites défiler quelques réponses, revenez à la liste des fils, puis cliquez à nouveau sur le fil, de sorte que vous soyez ramené au message sur lequel vous étiez.)

La quantité de marge nécessaire en haut de la page est mal calculée, ce qui fait que le haut du message, et le nom de la personne qui l’a écrit, sont sous l’en-tête et coupés.

Vous devez faire défiler un peu vers le haut à chaque fois que vous cliquez sur un fil de discussion, juste pour voir qui a écrit le message que vous lisez.

Vous voyez ceci en entrant dans le fil de discussion :

Lorsque vous devriez voir quelque chose comme ceci :

Ce qui est vraiment étrange, c’est que cela n’arrive pas toujours, et appuyer sur Ctrl-F5 le corrige souvent. Mais cela se reproduit un peu plus tard.

Modifier le CSS pour augmenter la quantité de marge qu’il ajoute à main-outlet résout plus ou moins le problème, mais vous obtenez alors beaucoup d’espace vide en haut des listes de sujets. Il semble que les listes de sujets et les fils de discussion nécessitent des marges différentes, ou peut-être que l’un d’eux ajoute la marge deux fois ou une marge supplémentaire provenant d’ailleurs ?

(Edit : Parfois, la page ne peut pas défiler assez loin vers le haut pour voir le problème. Par exemple, lorsque vous allez au dernier message d’un fil de discussion et qu’il est court, il n’y a aucun moyen pour l’en-tête de chevaucher le nom de l’auteur là-bas, même si vous faites défiler autant que vous le pouvez manuellement. Cela peut expliquer certaines situations où les choses semblent fonctionner. Testez avec une fenêtre de navigateur qui n’est pas très haute pour la manière la plus fiable de reproduire le bug.)

[Tris20 (Tristan)]

Existe-t-il un moyen d’empêcher cela de s’afficher sur l’écran de connexion ? Je peux le faire avec le CSS suivant, mais cela présente toujours le sous-menu d’en-tête pendant une seconde, puis le masque.

.static-login .top-menu {
	display: none;
}
.static-login .d-header-wrap {
	display: none;
}

Existe-t-il un meilleur moyen d’empêcher cela d’apparaître pendant la page static-login ?

[awesomerobot (Kris)]

Ce thème et d’autres ne fonctionneront pas dans la vue crawler ; la vue crawler ne charge pas la plupart des JavaScript de Discourse.

[davidkingham]

Salut Kris, ce composant pourrait bénéficier d’une mise à jour pour être utilisé avec le chat et la barre latérale. Lorsque le paramètre fixed_mode est activé, le chat et la barre latérale ne sont pas déplacés vers le bas et se retrouvent derrière l’en-tête d.

Le CSS ci-dessous semble bien régler les choses, sauf qu’il ne fonctionne pas bien avec Category Banners car il semble décaler le #main-outlet de 40px supplémentaires sur les pages de catégorie. Merci !

.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
    margin-top: 40px !important;
}

[awesomerobot (Kris)]

Merci d’avoir signalé cela ! Je viens d’ajouter quelques corrections ici :

UX: update fixed styling for sidebar & chat

[davidkingham]

Génial, merci Kris ! Une idée pourquoi le #main-outlet descend de 40px ?

#main-outlet {
   padding-top: calc(1.8em + 40px);
}

[awesomerobot (Kris)]

Ah, j’avais négligé cela — cela peut être supprimé, et le sera une fois que cette PR sera fusionnée : UX: remove old main-outlet adjustment by awesomerobot · Pull Request #19 · discourse/discourse-header-submenus · GitHub

Mise à jour : c’est maintenant fusionné, donc l’espace supplémentaire disparaîtra si vous mettez à jour le composant.

[P2W (Mike Riddick)]

Où un gars peut-il trouver les noms des icônes ?

[awesomerobot (Kris)]

Je pense que tout ce qui est listé ici est disponible : Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Bien que certaines icônes nécessitent une étape supplémentaire… pour les icônes que nous n’utilisons pas par défaut dans Discourse, les noms d’icônes doivent être ajoutés au paramètre de thème Svg icons.

Si vous voulez vraiment être précis, toutes les icônes que nous utilisons par défaut dans Discourse sont listées ici : discourse/lib/svg_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub

Et toutes les icônes disponibles pour une utilisation dans les thèmes (via le paramètre svg icons) se trouvent dans ce répertoire : discourse/vendor/assets/svg-icons at main · discourse/discourse · GitHub

Visualiser les fichiers SVG sur GitHub n’est pas vraiment utile, car vous verrez une grande boîte blanche :

mais vous pouvez cliquer sur le bouton “raw” et afficher le code source de la page, le nom de l’icône est l’id du symbol.

[P2W (Mike Riddick)]

Tu déchires, merci beaucoup

[davidkingham]

Merci Kris, ça a résolu le problème. J’ai cependant remarqué quelques autres soucis. .topic-navigation doit être décalé de 40px vers le bas, et .topic-post.sticky-avatar .topic-avatar semble être calculé incorrectement lorsque vous faites défiler vers le bas, et il finit derrière le d-header. De plus, il est possible d’agrandir le compositeur et la fenêtre de chat trop haut et de perdre les contrôles derrière le d-header également. Je pense que cela couvre tout !

Edit : encore une chose, lorsque vous visitez un lien d’ancre, le titre se trouve également sous l’en-tête.

[Canapin (Coin-coin le Canapin) A scindé ce sujet ()]

2 messages ont été déplacées vers un nouveau sujet : Le composant repousse le chat, cachant partiellement la zone de saisie du chat

[Canapin (Coin-coin le Canapin) A scindé ce sujet ()]

2 messages ont été fusionnées dans un sujet existant : Le composant repousse le chat, cachant partiellement la zone de saisie du chat

[satonotdead]

Quelqu’un a-t-il trouvé une solution ? J’aime l’approche qui consiste à ne pas utiliser d’espace supplémentaire et à réutiliser les ressources déjà présentes à l’écran.

C’est vraiment génial que le survol du logo permette de naviguer vers le blog, la documentation ou le wiki !

[alxndr (Alexander)]

Pour information, le « paramètre de thème des icônes SVG » mentionné par Kris se trouve actuellement dans Admin > Paramètres > Autre > vers le bas, il y a svg icon subset (…je pense que c’est correct ??).

[davidkingham]

Il y a un petit problème de z-index avec la nouvelle lightbox Glimmer, 1001 la place juste au-dessus de la lightbox car celle-ci est à 1000.

[awesomerobot (Kris)]

Problème classique de z-index, il sera résolu lors de la prochaine mise à jour de Discourse

UX: increase experimental lightbox z-index

[clement]

Merci pour ce joli plugin.

Je me demande s’il existe un moyen de ne pas afficher les sous-menus de l’en-tête lorsqu’on n’est pas connecté ?

Ou, (comme idée de développement ?) peut-être mieux, que diriez-vous d’avoir des éléments de menu affichés qui renvoient à des groupes (niveaux de confiance ou autres) ?
Facile à demander, je sais…

Merci
C.

[Kieran_Berryman]

Je ne pense pas que cela existe ailleurs, désolé si c’est le cas. J’adore utiliser les sous-menus d’en-tête, mais j’ai beaucoup d’en-têtes principaux, et le résultat est assez médiocre sur mobile. J’aimerais que mes en-têtes ne dépassent pas de l’écran et ne me obligent pas à faire défiler. Est-ce possible ?

[Kieran_Berryman]

J’ai en quelque sorte résolu mon problème en compilant tous les liens les plus importants en sous-menus dans un en-tête supérieur « Navigation » sur mobile.