Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

La date/heure actuelle est Ven 7 Mai 2021 - 8:35

2 résultats trouvés pour fdfdfd

Probleme de notifications dans la barre de nav modernBB

Bonjour Smile

Normalement avec le deuxième lien que j'ai donné, les codes fournis permettent d'ouvrir une petite fenêtre avec la liste des notifications reçues (comme ici en gros quand on clique sur l'encart notifications en haut à droite), c'est ça qui ne marche pas, en plus de ne pas avoir l'indication du nombre de notifications non lues.

Pour les codes, ils sont dans les liens, en, libre d'accès, je n'ai rien touché de plus, mais les voici:

Le javascript
Spoiler:
$(function(){

 function majNotification(){
   // On récupére le contenu des notifications de la toolbar
   var contentNotif = $('#fa_notifications')[0].outerHTML;
   contentNotif += $('#fa_notifications + #notif_list')[0].outerHTML;

   if(firstTime){
     // Si on arrive sur la page la première fois,
     // on ajoute une classe sur le li qui contient le lien des notifs
     // Et on remplace le contenu par celui récupéré plus haut
     $('.navbar.navlinks').find('a.mainmenu[href="/profile?mode=editprofile&page_profil=notifications"]').parent('li').addClass('link-notifs').html(contentNotif);

     // On indique qu'on a déjà vérifié la toolbar une fois
     firstTime = false;
   }else{
     // Si on a déjà vérifié la toolbar une fois
     // dans ce cas, on se contente de mettre les notifs à jour
     $('.navbar.navlinks').find('.link-notifs').html(contentNotif);
   }

 }

 // Au chargement de la page, on indique qu'on n'a pas encore vérifié la toolbar
 var firstTime = true;

 // Au chargement de la page, on attend 1 seconde (1500 ms), on appelle notre fonction
 setTimeout(function(){
   majNotification();
 }, 1000);
 // Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
 setInterval(function(){
   majNotification();
 }, 30000);

 $('body')
   // Au clic sur le lien des notifications dans la barre de navigation
   // On lui ajoute une classe pour déplier la liste des notifs
   .on('click', '.navbar .link-notifs #fa_notifications', function(evt){
     evt.preventDefault();
     $(this).parent().toggleClass('notification');
   });

});



Le CSS
Spoiler:
body{
margin-top:0 !important;
}

.headerbar{
 overflow: inherit;
}

.is-sticky#headerbar-top.w-toolbar {
   top: 0px !important;
}
#fa_toolbar,
#fa_toolbar_hidden{
 display:none;
}

.navbar > li{
 position: relative;
}

.navbar #fa_notifications {
   color: #fff;
   cursor: pointer;
   line-height: 30px;
   padding: 0 5px
}

.navbar #fa_notifications.unread{
 color: red;
}

.navbar #fa_notifications:hover{
 color: #000;
}

.navbar #notif_list{
 background-color: #fdfdfd;
   border: none;
   border-radius: 5px;
   box-shadow: 0 0 9px rgba(0,0,0,0.3), 0 0 1px 1px rgba(0,0,0,0.2);
   color: #333;
   display: none;
   font-size: 1.3rem;
   list-style-type: none;
   margin: 0;
   padding: 10px;
   position: absolute;
   text-align: left;
   top: 42px;
   width: 200px;
   z-index: 999;
}

.navbar #notif_list li{
 margin: 4px 0;
 opacity: .5!important;
}

.navbar .notification #notif_list {
   display: block;
}

.navbar #notif_list .content a{
 color: #000;
 font-weight: bold;
 padding: 0;
}

.navbar #notif_list .see_all a{
 background: #333;
 border: 1px solid #333;
 color: #fdfdfd;
}

.navbar #notif_list .see_all a:hover{
 background: #fdfdfd;
 color: #333;
}

.navbar #notif_list li.see_all{
   opacity: 1!important;
}

.navbar #notif_list li.see_all,
.navbar #notif_list li.unread {
   opacity: 1!important;
}
par Nalex57
le Dim 19 Juil 2020 - 12:41
 
Rechercher dans: Corbeille & Titres non explicites
Sujet: Probleme de notifications dans la barre de nav modernBB
Réponses: 5
Vues: 1221

Installation du SCSS/SASS dans notre stylesheet.

Bonjour à vous,

Je viens vers vous aujourd'hui afin de demander s'il serait possible pour l'avenir de nos forums, en tant qu'administrateur ayant accès au panneau d'administration, comme aux membres sachant un peu coder, d'avoir la possibilité d'installer les principes simples du scss/sass. Je ne parle évidemment pas du fait d'importer/exporter des codes (bien que pour nos fiches html cela pourrait être une idée), mais bien le principe d'appeler des variables et ainsi ne nommer qu'une seule fois les choses.

Exemple simple :

Je souhaite implanter un background : #fdfdfd;. Au lieu d'avoir à répéter cette commande et incroyablement alourdir ma fiche de style, il me suffirait de l'appeler une seule et unique fois en appelant la variable nommée. Cela permettrait d'alléger énormément nos fiches de styles mais aussi nos fiches html et nos codes de manière générale, en nous évitant de répéter des codes encore et encore. Evidemment, je cite l'exemple du background mais lors de créations de div et de boîtes multiples, cela pourrait nous être aussi très utile d'avoir à écrire une seule fois le nom de la variable que la copier/coller ou la réécrire à chaque fois.

Exemple plus concret

$backgroundisred:red;

Ce serait ce que vous mettriez au début de votre fiche css et lorsque vous remplissez votre css, à chaque background souhaité, vous ajouteriez : background:$backgroundisred;. Lors de vos mises à jour, vous n'aurez donc à changer que le $backgroundisred:red; par $backgroundisred:blue; et le résultat serait que toutes vos classes possédant le backgroundisred de modifieraient automatiquement d'un background rouge à bleu, sans que vous ayez à fouiller chaque class pour vérifier que tout est bien intégré. Je fais mention du background mais cela peut avoir bien d'autres utilités pour vos polices etc.



Pour les personnes souhaitant rester sur une méthode de CSS, le SASS/SCSS ne changerait rien pour eux, puisque le SCSS prend en compte le CSS, mais l'inverse ne se vaut malheureusement pas. Certains développeurs utilisent sur forumactif une base :root mais cela ne facilite pas les choses pour autant et ne règle finalement pas tous les soucis que le préprocesseur SASS pourrait régler (je parle aussi d'imbrication et de façon de traiter nos class ^^).

L'idée ne serait donc pas de faire du JavaScript dans notre stylesheet mais bien de pouvoir créer, au minimum, des variables que l'on crée aussi dans notre stylesheet, pour que nous n'ayons qu'à l'écrire une fois et ensuite appeler la variable. Le SCSS permet aussi, au delà de la création de variable, d'imbriquer efficacement nos codes et donc nous faire gagner des lignes et du temps et optimiser au mieux notre code, on y gagnerait beaucoup en lisibilité et en maintient (mais ce n'est que mon avis). Cela nous éviterait d'avoir à nous répéter dans nos codes et c'est aussi ce que je recherche dans la démarche, la répétition pour traiter les class et id alourdit beaucoup la lecture, ce qu'évite le SCSS. Je conseille assez vivement, par conséquent, la documentation fournit au début du topic, elle est en anglais mais elle peut être trouvée aussi en français.

Je me permets d'éditer aussi car j'ai lu les actuels sondages pouvant concerner de près ou de loin cet actuel sondage et je pensais donc que ça pourrait aussi aider aux soucis relever ici : https://forum.forumactif.com/t334703-administration-des-feuilles-de-style-css-annexes puisqu'au final un des problème qui est revenu, c'est la longueur de la stylesheet, le SCSS aiderait donc déjà énormément à réduire le nombre de lignes et donc être plus efficace.

En vous remerciant par avance.
par IvyDTyler
le Mer 4 Mar 2020 - 14:32
 
Rechercher dans: Suggestions refusées
Sujet: Installation du SCSS/SASS dans notre stylesheet.
Réponses: 23
Vues: 2379

Revenir en haut

Sauter vers: