Veuillez partager votre CSS ! Cela faciliterait la correction du TC.
Voici une méthode plutôt bidouillée pour le faire (dans common/css, PAS dans /mobile/css)
@use "lib/viewport";
@include viewport.until(md) {
.d-header:not(:has(.extra-info-wrapper.topic-info-visible)):not(:has(.extra-info-wrapper .topic-link)):not(.header-topic-info-visible) .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
}
Désolé, je n’ai pas encore eu le temps de maintenir ce composant parfaitement à jour, mais oui, le passage des vues mobile/bureau a effectivement rompu certaines hypothèses que le composant de thème original faisait.
@Lilly, merci de m’avoir poussé à avancer sur ce point. Une position absolue ferait l’affaire pour l’instant… Le réordre des éléments dans ce composant repose simplement sur une solution CSS Grid.
Salut à tous, juste un petit rappel : Lilly a effectué beaucoup de travail pour nettoyer tout cela et mettre à jour le contenu. Je viens de fusionner ses modifications, donc tout devrait être prêt maintenant.
Salut @featheredtoast, j’ai une PR ici pour corriger le problème d’en-tête avec le thème Horizon sur les tailles de fenêtre d’affichage des téléphones pliables et certaines tablettes.
Je te laisse jeter un œil et la fusionner :
Ça a l’air bien — essayons, merci @Lilly !
Lorsque je fais défiler vers le haut dans un sujet, de sorte que l’en-tête change (pour afficher le nom du sujet et les catégories), ce nouvel en-tête ne comporte pas d’icône hamburger. Avec l’icône hamburger à gauche lorsqu’elle est présente, cela signifie que l’icône du forum change de position. Je me demande s’il serait possible d’avoir une option pour placer l’icône hamburger à droite de l’icône du forum. Cela signifierait que l’icône du forum resterait au même endroit pour les deux types d’en-tête. Merci.
P.S. Je viens de remarquer que sur ordinateur, sans le composant de thème, l’icône hamburger reste affichée en permanence. Peut-être que cela pourrait être une option pour mobile également.
personnellement, je ne suis pas en faveur de ce changement (peut-être que @featheredtoast pensera différemment) mais si vous en avez besoin, vous pouvez simplement ajouter ce CSS dans un autre composant de thème sur votre forum pour remplacer l’ordre des éléments.
.d-header {
display: grid;
grid-template-areas: 'logo left-menu custom-header-icon-link-1 custom-header-icon-link-2 custom-header-icon-link-3 custom-header-icon-link-4 custom-header-icon-link-5 extra-info chat header-buttons search right-menu'!important;
}
résultat :
l’icône hamburger ne devrait pas s’afficher dans l’en-tête défilant sur mobile afin de maximiser l’espace de l’en-tête pour les titres de sujet plus longs
Je partage le même avis que @Lilly ici : l’objectif était de faire en sorte que le menu hamburger à gauche ressemble à celui des autres applications… Le saut n’est pas quelque chose que j’ai optimisé, car l’expérience par défaut le faisait déjà.
Une fois qu’il est en grille comme elle l’a montré, il est facile de mettre à jour les positions de tous les éléments avec un minimum d’intervention de la part du composant thème de base ici.
Ouvert aux PR s’il y a suffisamment de demande, mais c’est la première fois que j’entends une telle requête pour le moment.
Vraiment ?
Sur desktop, il n’y a pas de « saut », car (si ma mémoire est bonne) le menu hamburger reste toujours à gauche de l’icône du forum.
Sur mobile, il n’y a pas de saut non plus, car tout sauf l’icône du forum est remplacé.
J’ai commencé à utiliser votre composant de thème (merci de l’avoir partagé !) et j’ai simplement désactivé l’icône principale sur mobile pour rendre cela compatible avec notre philosophie UI/UX, qui consiste à garder l’interface aussi épurée que possible.

