J’adore cette idée ! Je serais ravi de passer en revue et de fusionner une PR qui implémente cette fonctionnalité ![]()
J’adore vraiment cette idée
Je viens d’y jouer un peu. Je pense qu’il existe une bien meilleure façon de le faire, mais pour l’instant, cela fonctionne plutôt bien sur mon site. ![]()
J’utilise le composant Big Header - Little Header dans le code <head> du modèle pour y parvenir.
Malheureusement, sur iPhone, il y a une limitation car la barre de navigation du pied de page masque complètement la barre d’onglets Discourse. Je la cache donc.
J’ai mis à jour ce code !
Je partage donc le code ici (je ne suis pas sûr qu’il soit fusionnable) :
Placez ceci dans la section <head> mobile :
<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
var lastScrollTop = 0;
var body = $("body");
var scrollMax = 30;
$(window).scroll(function() {
var scroll = $(this).scrollTop();
if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
body.addClass("tab-bar-hidden");
} else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
body.removeClass("tab-bar-hidden");
}
lastScrollTop = scroll;
});
});
</script>
Placez ceci dans la section CSS mobile :
html:not(.anon) {
#topic-progress-wrapper,
#reply-control.draft {
bottom: 49px;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .1s ease-out;
}
.posts-filtered-notice {
transition: all .1s ease-out;
bottom: 49px;
}
}
body.tab-bar-hidden {
.d-tab-bar {
bottom: -49px;
transition: all .2s ease-in;
}
#topic-progress-wrapper:not(.docked),
#reply-control.draft {
bottom: 0;
transition: all .2s ease-in;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .2s ease-in;
}
.posts-filtered-notice {
transition: all .2s ease-in;
bottom: 0;
}
}
.d-tab-bar {
transition: all .1s ease-out;
}
body:not(.footer-nav-ipad) .footer-nav {
display: none;
}
Démo
Vraiment chouette ce que tu as créé !
Un petit composant pratique — merci !
Existe-t-il un moyen pour les utilisateurs individuels de le personnaliser ou de le masquer complètement ?
C’est super, @Don, merci ! Je viens de pousser ton code (avec de légères modifications) vers le composant.
Il n’existe pas d’option intégrée permettant aux utilisateurs individuels de personnaliser ou de masquer ce composant, mais il existe une astuce dans le cœur de Discourse que tu peux utiliser pour permettre aux utilisateurs de le masquer : tu peux créer une variante de ton thème principal qui n’inclut pas ce composant, puis rendre cette variante disponible pour que tes utilisateurs puissent la sélectionner dans Préférences → Interface.
Voici à quoi cela ressemblerait :
Les utilisateurs qui ne souhaitent pas ce composant peuvent choisir « Grey Amber (sans barre d’onglets) », qui est configuré exactement comme « Grey Amber », mais sans inclure le composant de la barre d’onglets.
Bonne idée ! Merci pour cela !
Merci @Osama, c’est génial ! ![]()
Je remarque un problème dans le CSS. La barre d’onglets de Discourse peut s’activer et repousser le compositeur vers le haut.
Je pense qu’elle ne devrait s’activer que sur #reply-control.draft et non sur tout #reply-control.
D’accord, cela devrait être corrigé maintenant. Merci de m’en avoir informé ! ![]()
Je voulais juste dire un grand merci pour cela, c’est une excellente ajout pour n’importe quel site Discourse. @discoverearth, as-tu réussi à le faire afficher en permanence à tous les utilisateurs ?
Je tente de configurer cela pour cliquer sur les onglets pendant que l’utilisateur navigue sur la plateforme. Dans ce cas d’usage, je souhaite mettre en place des boutons qui ouvrent les onglets des plugins Kanban, Calendrier et Vote.
Kanban :
Si je me trouve dans une catégorie ou une sous-catégorie et que j’ajoute ‘?board=default’ à l’URL, cela me redirige vers l’onglet Kanban (Tableau), donc cela devrait être possible. Le problème est que ce plugin utilise le chemin relatif par rapport à la racine, et non par rapport au chemin où se trouve actuellement l’utilisateur.
(Je devrai également trouver une solution de contournement pour la page d’accueil, car la logique d’URL y est différente).
Calendrier :
L’onglet Calendrier nécessite d’ajouter ‘/l/calendar’ à la fin de l’URL.
Cela semble possible, mais il faut également supprimer tout texte présent dans l’URL situé au-dessus de la catégorie ou sous-catégorie où se trouve l’utilisateur. Par exemple, si un utilisateur a navigué vers ‘latest’ ou ‘kanban’, cette partie de l’URL doit être supprimée avant d’ajouter ‘/l/calendar’ à la fin.
Quelqu’un a-t-il des idées sur la manière de procéder, car ce serait formidable de pouvoir utiliser cela avec ces plugins. Le sélecteur d’onglets est essentiellement masqué sur mobile, ce qui n’est pas idéal pour les sites qui utilisent intensivement des composants comme Kanban ou Calendrier.
Ce plugin est un beau travail, mais il ne peut pas être utilisé avec DiscourseHub (du moins sur iPhone) car il masque l’onglet de navigation à la même position. On ne peut alors plus changer de forum.
Ainsi, il n’est utile que pour les forums qui, d’une manière ou d’une autre, ne permettent pas DiscourseHub ou qui dégradent considérablement l’expérience utilisateur en obligeant à fermer complètement l’application après chaque visite sur un forum ![]()
Bien sûr, quelqu’un qui sait coder pourrait afficher cette barre d’onglets uniquement lors de l’utilisation d’un navigateur… mais enseigner à un utilisateur à utiliser une interface différente sur le même appareil est vraiment une mauvaise idée.
Avec ce composant :
Et avec DiscourseHub pur :
Sais-tu de quel forum il s’agit ? J’adore absolument son interface utilisateur ! ![]()
J’aimerais beaucoup pouvoir avoir le bouton des notifications avec le compteur rouge mentionné, comme pour le bouton du menu principal dans la version par défaut. Pourriez-vous me donner un indice sur la façon de le faire ? Je ne suis pas très fort en codage.
@nildarar, as-tu réussi à faire apparaître le nombre de notifications sur le bouton ? Merci.
Bonjour ! J’adore ce concept. Merci.
Une question : je préférerais utiliser la version contournée des icônes FontAwesome plutôt que les versions pleines, afin d’être plus cohérent avec d’autres parties de mon site web.
Existe-t-il un moyen de le spécifier ? Habituellement, utiliser le nom complet d’une icône — par exemple far fa-star (au lieu de simplement star) — permettrait de faire cette distinction. Mais chaque fois que j’essaie d’insérer le nom complet d’une icône comme ça, le composant n’affiche rien à sa place.
Y a-t-il un moyen de rendre cela possible ?
Cela semble vraiment génial. Y a-t-il un moyen de créer un onglet pour afficher le flux de suivi ? De cette façon, un utilisateur peut facilement voir un flux de toutes les personnes qu’il suit.
Est-il également possible pour une page spécifique
.user-main .about {
margin-bottom: 0;
color: var(--secondary);
display: none;
}
Juste pour la page du flux ?
Pour confirmer, vous faites référence au flux de suivi de Discourse Follow ? Si c’est le cas, définissez feed comme route (le troisième segment) dans le paramètre de l’onglet que vous souhaitez rediriger vers le flux de suivi.
Oui, je le suis. Merci !
Je pense que ce serait bien si nous pouvions ajouter un bouton « Nouveau sujet » juste au milieu de la barre. ![]()
Reddit en est un excellent exemple.
Vous le pouvez certainement. Essayez ce qui suit dans le troisième ou quatrième onglet de réglage pour obtenir l’effet du milieu.
Nouveau, plus, /nouveau-sujet




