code pour les notifications

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu code pour les notifications

Message par truthuntold Lun 11 Juil 2022 - 12:20

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 I love you
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. ::fleur::

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  I love you
avatar

truthuntold
Nouveau membre

Messages : 5
Inscrit(e) le : 09/07/2022

https://thetruthuntold.forumactif.com/
truthuntold a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pour les notifications

Message par truthuntold Mar 12 Juil 2022 - 11:52

Un petit up s’il vous plaît I love you
avatar

truthuntold
Nouveau membre

Messages : 5
Inscrit(e) le : 09/07/2022

https://thetruthuntold.forumactif.com/
truthuntold a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: code pour les notifications

Message par Oka.mi Mar 12 Juil 2022 - 14:10

Bonjour,

Voici un sujet qui devrait vous aider : résolu 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.


code pour les notifications 1213Donnez un titre explicite code pour les notifications VTzsyWB à votre sujet pour améliorer son référencement

Remerciez code pour les notifications 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP code pour les notifications FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2777
Inscrit(e) le : 06/01/2011

https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: code pour les notifications

Message par truthuntold Dim 17 Juil 2022 - 1:22

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

truthuntold
Nouveau membre

Messages : 5
Inscrit(e) le : 09/07/2022

https://thetruthuntold.forumactif.com/
truthuntold a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum