code pour les notifications

[truthuntold]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 11/07
Lien du forum : https://thetruthuntold.forumactif.com/

Description du problème

Bonjour à tous
Je me permets de venir vers vous car nous avons un petit problème avec la barre d'accueil de notre forum, nous aimerions beaucoup placer les notifications avec les autres "icones" de notre barre de navigation mais il y a un truc que l'on doit faire de travers car elle ne se retrouve pas placer au bon endroit et nous ne savons pas comment bien la placer... nous aurions besoin d'un peu d'aide de vos connaissances si c'est possible s'il vous plaît.

en image plus haut, vous pourrez retrouver ce que l'on cherche à faire.. et juste ici, sur notre forum test, ce que l'on a. https://colormeblue.forumactif.com/ (on y est presque juste le placement est défaillant...)

voici nos codes au besoin !

overall header:

css barre de navigation:

css de notification:

merci d'avance  

[truthuntold]

Un petit up s’il vous plaît

[Oka.mi]

Bonjour,

Voici un sujet qui devrait vous aider : Mettre les notification (toolbar) dans barre de navigation

Dans votre cas, on adapterait le script pour écrire un chemin différent, puisque vous souhaitez un emplacement différent.

Code:

$(function () {
  var checkExist = setInterval(function () {
      $(".summer_navbar_navlinks a[href*='/login']").after($("#fa_notifications"));

      const targetNode = document.getElementById('notif_list');
      const config = {
        attributes: true
      };
      const callback = function (mutationList, observer) {
        var calcul = $('#fa_notifications').offset().left + $('#fa_notifications').width() - $('#wrap').width() + 10;

        for (const mutation of mutationList) {
            if (mutation.type === 'attributes') {
              $('#notif_list').css('margin-left', calcul);

            }
        }
      };
      const observer = new MutationObserver(callback);
      observer.observe(targetNode, config);
      clearInterval(checkExist);
  }, 100);
});

Pour obtenir le rendu montré sur votre capture d'écran, on fait donc en sorte que les notifications atterrissent après le bouton login/logout
(comme le lien ne fait pas que contenir /login, j'utilise un sélecteur *= qui cible tout lien contenant "/login")

https://www.w3schools.com/cssref/css_selectors.asp
https://api.jquery.com/after/

Bon ici il y a une petite particularité en plus chez vous, qui a complexifié considérablement la chose, au niveau de votre barre de navigation. Je vous passe les détails mais en gros, cela a créé un souci dans le calcul de la position (réalisé par le script de la Toolbar de FA) de la bulle de notifications "notif_list", qui a fait qu'il a fallu trouver une solution un peu plus technique. En gros, sans le passage ajouté de la ligne 5 à la ligne 20, la bulle se placerait au milieu de la page, ce qui fait qu'elle aurait eu un affichage décalé par rapport au bouton notifications.

La technique utilisée https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
Pour cette partie-là, pensez à envoyer des pastilles pour la gorge à @Toryudo, puisque c'est lui qui a passé +30 minutes à potasser dessus.

Une fois le script installé, et si vous avez suivi la procédure indiquée dans l'autre sujet, les notifications sont à la place prévue. Il ne reste donc plus que les personnalisations css :
On ajoute un width 100% sur le fa_notifications pour qu'elle puisse occuper l'espace qu'il faut.
On corrige la couleur de fond de la fa_toolbar, qui est chargée puisqu'on exploite son "notifications", mais on n'a pas besoin de la voir dans le cas présent.
Puis on ajuste la position de la bulle de notif en hauteur (ce qui est faisable en css, ouf ! le left et le right aussi normalement mais ce n'est pas aussi simple avec le script...).

Code:

#fa_left, #fa_search, #fa_share, #fa_welcome, #fa_hide {
    display: none !important;
}

#fa_notifications {
  width: 100%;
  font-weight: bold;
}

#fa_toolbar {
  background-color: transparent;
}

#notif_list {
  top: 40px;
  position: fixed !important;
}

Voilà, pour le reste, ce sera du fignolage.

Une dernière chose, dans votre template overall_header, ligne 288, vous avez la ligne

Code:

<ul class="linklist navlinks{NAVBAR_BORDERLESS}" style="display:none;"><li>{GENERATED_NAV_BAR}</li></ul>

Je vous conseille de mettre plutôt la ligne en commentaire, comme ceci

Code:

<!-- <ul class="linklist navlinks{NAVBAR_BORDERLESS}"><li>{GENERATED_NAV_BAR}</li></ul> -->

Car actuellement, certes on ne voit pas la barre originale car elle est en display:none mais elle est quand-même chargée, ce qui consomme de la ressource, certes pas beaucoup, mais comme vous ne vous en servez pas, autant ne pas la charger ! Et le jour où vous en aurez à nouveau besoin, il suffira de retirer le <!-- du début et le --> de la fin.

[truthuntold]

C'est parfait, merci énormément à vous deux.
c'est tout beau maintenant et fonctionnel.