Notification toolbar et petit bug version mobile de la PA

[Dellou]

Détails techniques

Version du forum : ModernBB
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 : Depuis toujours
Lien du forum :

Description du problème

Bonjour forumactif !
Je reviens vers vous pour deux petits soucis distincts...
Alors voilà, comme vu sur le screen plus haut, la version mobile n'affiche pas la PA dans son entièreté, en tout cas pas en width:100%....... et je me doute que il y ait un soucis avec le wrap ? Mais si je modifie ce dernier pour que ce soit nickel sur mobile, ça ne l'est plus sur ordi... j'ai essayé plein de choses, pour le moment sans succès... Quelqu'un aurait-il une idée ?

Pour mon autre soucis, aucun rapport, je voulais juste savoir s'il était possible que le mot "Notification" soit modifié par une img sgv (ou par une image png) ? Et si non, s'il était possible qu'au lieu de cliquer sur "Notification" pour ouvrir la fenêtre des notifications, on puisse appuyer sur le nombre de notifications actuelles >>> "Notification (1)" pouvoir appuyer sur le 1 et non sur Notification (actuellement on est obligé d'appuyer sur le mot, appuyer sur le chiffre ne fait rien ouvrir) ? Je me doute que c'est avec de la Java mais je ne m'y connais absolument pas et en farfouillant je ne trouve rien de compréhensible/qui répondent à cette envie  

Merci encore par avance si quelqu'un à des idées!

[Dellou]

Bon j'ai un peu avancé sur mon premier problème mais ce n'est pas encore trop ça, j'ai fait comme ça :

Code:


  @media screen and (min-width: 481px) {
        .wrap{
width: 100%;
    max-width: 1000px;
    padding: initial;
    margin: initial;}
}
 @media screen and (min-width: 1025px) {
        .wrap {width:initial!important;
    padding:initial;
    max-width:initial;
    margin:initial;
  }
  }

Ca fonctionne bien sur mon écran d'ordi, mais...  sur téléphone, c'est encore coupé :
https://cdn.discordapp.com/attachments/612052483874750487/1129778470608703559/IMG_3035.png

Et il semble y avoir un margin étrange
https://i.imgur.com/xSJoRha.png

Puis du coup, inévitablement ça impacte mes longueurs de catégories/post... mais à la limite je pense que ça, je pourrais les resize au cas par cas.....?

[Dellou]

up!

[Dellou]

up!

[Toryudo]

Bonjour !

Pour ModernBB, ça va être assez compliqué de "défaire" le CSS actuel.
Comme indiqué par Pinguino sur le sujet https://forum.forumactif.com/t407756-nouveau-la-version-modernbb-des-forums-forumactif-est-maintenant-responsive :

Enfin, les personnalisations CSS apportées par les utilisateurs peuvent entraîner des conflits ou des problèmes d'affichage du forum sur mobile. Si vous êtes dans ce cas, une astuce simple et (normalement) efficace consiste à retirer la ligne ci-dessous dans le template overall_header (si le template n'est pas modifié). Le forum devrait alors retrouver son apparence classique.

Code:

<meta name="viewport" content="width=device-width, initial-scale=1">

Ce sera peut-être la bonne solution pour vous ?
Au moins pour avoir un visuel unique à gérer, c'est trop compliqué sinon !


A propos des notifications maintenant, je commence par une petite remarque : d'après les "Conditions générales d'utilisation", vous n'avez normalement pas le droit de retirer/masquer les logos forumactif de la toolbar. Je vous donne le lien vers les conditions et le petit passage qui le mentionne : https://www.forumactif.com/conditions-generales

A l'exception de ce qui est rendu possible par la gestion des crédits, il est formellement interdit de supprimer, de masquer, ou de rendre illisible par quelque moyen que ce soit les mentions obligatoires et copyrights figurant sur les Forums (notamment dans la barre d'outil et le pied de page du forum), ainsi que les contenus sponsorisés ou les publicités. Ces éléments peuvent être retirés par le biais de la gestion des crédits uniquement.

Il faudra enlever le display: none sur le #fa_left pour que le logo soit à nouveau visible (mais vous pourrez le replacer un peu si vous voulez, le tout étant qu'il reste visible).


Pour votre question maintenant, vous pouvez modifier le texte "Notification" par une image, oui !
Et vous pouvez aussi ajouter du CSS pour pouvoir cliquer sur le nombre de notification (du CSS pour cette fois, oui).
En fait, d'après ce que je vois, tel que le script est écrit, il s'active uniquement quand on clique sur l'élément qui contient le texte "Notification". Si on clique sur le nombre de notification, on ne clique plus sur le texte lui-même, mais sur #notif_unread qui se trouve "devant". La solution, c'est donc d'ajouter un CSS pour décrire à l’élément #notif_unread sa façon de se comporter quand on le cible et qu'on clique dessus. Pour lui dire qu'il ne peut plus être la cible d'évènements lors d'un clic, on l'écrit comme ça :

Code:

#fa_notifications #notif_unread {
  pointer-events: none;
}

A partir de là, le nombre de notification n'est plus cliquable, c'est donc le lien "en dessous" qui reprend la main.
... bon, je ne suis pas sûr d'être clair, mais voilà.

Pour l'image maintenant, vous pouvez aussi remplacer le texte par une image avec du JavaScript cette fois.
Celui-ci sera à placer "Sur toutes les pages" :

Code:

$(function(){ $(function(){
    $('#fa_notifications').html('<img src="https://2img.net/i/fa/modernbb/logo-simple.png" alt="Notifications" />');
}); });

Par contre, même problème que le nombre de notification : si on clique sur l'image, on ne clique plus sur le texte "Notification", on clique sur l'image qui est "devant". Alors il faut également ajouter ce CSS pour résoudre le problème :

Code:

#fa_notifications img {
  pointer-events: none;
}

Et normalement, tout est bon !

[Dellou]

Bonjour !!
Déjà, merci beaucoup pour votre aide !
Je ne savais pas du tout pour le logo, merci pour le rappel et je m'en excuse, c'est réparé de mon côté !
Et ne vous inquiétiez pas, vos explications sont très clair et j'en apprend beaucoup, je ne connaissais pas du tout le pointer-events et je comprend la problématique pour les notifications !

Alors...
Pour la bannière : malheureusement, j'avais déjà vu ce post et je l'ai déjà retiré ! Du coup mon problème persiste... (si ce n'est ce soucis qui est révolu : Puis du coup, inévitablement ça impacte mes longueurs de catégories/post... mais à la limite je pense que ça, je pourrais les resize au cas par cas.....?) J'ai toujours le même rendu que sur le screen !

Pour les notifications :
C'est parfait!! Merci beaucoup en plus de bien expliquer, ça fonctionne ! J'ai juste un petit et dernier soucis, on ne voit plus le nombre de notification (1) puisque bah... Je pense que #fa_notifications comprend également le notif_unread qui est en dessous du coup ? Ca rend ainsi :
https://cdn.discordapp.com/attachments/410410920657944596/1130639035732348989/image.png
On ne voit que le (1) par la page mais sinon il est disparu même en cliquant sur l'image... peut-être pourrait-on le sortir de son bloc ? Je ne sais pas trop, si vous avez une idée...

En tout cas, merci encore !!!

[Toryudo]

Bonjour !

Je vais me concentrer sur le problème de notification dans un premier temps, on essayera de voir plus tard le problème d'affichage (je vous avoue, ce sera sans doute plus compliqué à trouver). Donc si vous voulez quand même conserver le (1) par exemple, on va changer le script par celui-ci :

Code:

$(function(){ $(function(){
  const image = document.createElement('img');
  image.src = 'https://2img.net/i/fa/modernbb/logo-simple.png';
  image.alt = 'Notifications';

  var fa_notif = document.getElementById('fa_notifications');
  var fa_notif_text = fa_notif.childNodes[0];
  fa_notif_text.nodeValue = '';
  fa_notif.prepend(image);
}); });


De cette façon, on ne change que le texte et on garde les éléments enfants intacts, donc le #notif_unread est conservé.
Est-ce que ça va mieux comme ça ?

[Dellou]

Wow !!! Quand j'ai l'impression de commencer à comprendre le javascript et que je vois ça je comprend que j'en suis bien loin hahaha c'est parfait et ça fonctionne nickel merci infiniment !! J'ai réussit à avoir le rendu désiré Merci !!!

Pour la bannière je me doute arg

[Dellou]

Okay update pour les notifications je dois être dumb   de fou désolée mais...
en gros quand jappuie sur l'image et non sur le nombre, pas de soucis, ça fonctionne et ça s'ouvre :
https://cdn.discordapp.com/attachments/410410920657944596/1130860541359952033/image.png
Mais il suffit qu'il n'y ait plus le nombre et on ne peut plus l'ouvrir du tout ?
https://cdn.discordapp.com/attachments/410410920657944596/1130860486041292860/image.png

Bêtement j'ai voulu faire

Code:

#notif_unread {
  pointer-events: none;
}

#fa_notifications img {
  pointer-events:auto!important;}


 Suis-je à coté de la plaque ?

[Toryudo]

D'après les différents tests que j'ai faits, la page commence à "dézoomer" à partir de 980px.
Une solution... la plus simple possible, ce serait de faire en sorte que votre bannière, l'iframe et tout ce qu'il contient, fasse donc 980px de width. Ainsi, il s'adapterait correctement au reste du forum et ne serait plus coupé, quelle que soit la taille de l'écran.

... je sais, c'est un peu nul comme solution, mais je ne sais pas comprendre pourquoi la page décide qu'à partir de 980px, elle "oblige à zoomer" plutôt que continue de rétrécir. Ce n'est pas du JavaScript qui fait ça, apparemment pas du CSS non plus (ou alors, c'est la combinaison de beaucoup de choses complexes)... donc si un iframe de 980px à la place de ses 1125px actuellement vous convient, vous pouvez tenter de partir là-dessus !


Pour le bouton notification, ça ne fonctionne pas avec ceci ?

Code:

#notif_unread {
  pointer-events: none;
}
#fa_notifications img {
  pointer-events: none;
}

[Dellou]

Merci beaucoup ! Je comprend que ce soit compliqué, je ne comprend pas non plus pourquoi... Je vais voir si je me dévoue à réduire tout ça ou si je m'y fait à cette bannière coupé haha merci encore pour tout le temps que vous prenez pour m'aider ! Surtout sur quelque chose d'aussi fastidieux

Et pour les notifications, malheureusement non  
Justement j'aimerais que l'image FA que j'ai utilisé, puisse s'ouvrir même une fois que les nombres ont disparu (mais où, évidemment, il a des notifications dedans!)
Par exemple ici :
https://cdn.discordapp.com/attachments/410410920657944596/1130953236677922846/image.png
Je clic sur l'image FA, ça fonctionne puis après je touche l'écran autre part, faisant évidemment disparaitre la page et les nombre..... Mais je veux revoir les notifications (que je n'ai pas effacé en les supprimant avec la croix donc!) et là, impossible de l'ouvrir !

[Toryudo]

Alors, je vais essayer d'être clair.
Visuellement, voici le rendu de la zone :



Le carré gris (il est un peu masqué par la note en noir, mais on le voit derrière), c'est l'image que vous avez choisie.
La zone jaune, c'est la zone de #fa_notifications où le clic fonctionnera (ce n'est pas totalement vrai, mais c'est l'idée).

Le script de base des notifications est ainsi fait que si vous ne cliquez pas précisément dans la zone représentée en jaune, ça ne déclenche pas l'ouverture des notifications.
Conclusion : le contenu (l'image) est décalé par rapport au #fa_notifications. De plus, la zone fait 0px de hauteur, donc tel que c'est écrit, vous ne pourrez jamais cliquer dessus, elle est trop petite. C'est en fait tout le CSS de décalage qui pose problème ici.

Il faut donc faire le placement différemment. Comme ça, je dirais qu'il faut :
- que a#fa_notifications soit de la même taille que #fa_notifications img (width et height)
- si vous devez mettre des margin, mettez-les plutôt sur a#fa_notifications, pas sur le #fa_notifications img
- si vous devez mettre un padding sur #fa_notifications img, il faut faire en sorte de calculer la différence pour augmenter le width et height du a#fa_notifications (parce qu'un width 100px combiné avec un padding 8px sur un même élément, on se retrouve avec un élément qui fait 100 + 8 (padding gauche) + 8 (padding droite) = 116px)

Ça devrait être mieux ensuite !

[Dellou]

Bonsoir !
Alors j'ai suivis vos conseils, mais ce n'est toujours pas ça... j'ai remarqué que ça ne s'ouvre qu'en appuyant sur le background et non sur l'image (en rouge, le background clicable délimité par ses width/height, donc on ne peut cliquer que sur les côtés...Est-ce cela ? Mais du coup pourquoi, ça semble sur l'image... mais c'est plutot en dessous...)... Qu'est ce que je rate  
Image 1 : https://cdn.discordapp.com/attachments/410410920657944596/1130978095768281168/image.png
Image 2 : https://cdn.discordapp.com/attachments/410410920657944596/1130978192300187809/image.png

Le problème aussi, c'est que du coup, mon bric à brac me permettait de mettre le nombre au dessus de l'image, comme ceci :
https://cdn.discordapp.com/attachments/410410920657944596/1130860541359952033/image.png
Du coup, maintenant : https://cdn.discordapp.com/attachments/410410920657944596/1130978724024692806/image.png

Je vous envoie mon CSS concerné au cas où pour le côté pratique

Code:


a#fa_notifications {
  color:#c64b60!important;
  font-family:open sans!important;
  text-transform:lowercase!important;font-style:italic;
  width: 48px!important;
    height: 48px!important;
  
}

#fa_toolbar #fa_right #fa_notifications #notif_unread {margin-left:initial;}

#fa_notifications img {
width: 30px!important;
    height: 30px!important;  
    background: #D7DADD;
    border-radius: 5px;
    padding: 9px;

}


span#notif_unread {

    color: #fff!important;
    font-family: karla!important;
    font-weight: 800;
    background: #434A52;
    border-radius: 100%;
    font-size: 8px;
    padding: 4px 5px;
    text-transform: lowercase;
    margin-left: 20px!important;}
 
  #notif_unread {padding: 4px 6px!important;
}

li.see_all {top:2px!important;font-size:9px!important;text-transform:lowercase!important;height:20px!important;}


#fa_right a[href$="login"],
#fa_right a[href$="register"] {
    display: none!important;
}
a#fa_hide {display: none!important;}
 
a#fa_welcome {display:none!important;}

#fa_search {
    display:none!important;
}
 
#fa_share {
    display:none!important;
}

#fa_right {
    border-radius: 0 0 40px 40px;  
    padding-left: 5px;
  padding-bottom: 2px;
    padding-right: 13px;
  float: left;
}
#fa_toolbar #fa_right #notif_list li .contentText a {
    color: #434A52!important;
    text-decoration: none!important;
    vertical-align: baseline;
    font-family: Karla!important;
    font-style: normal;
    font-weight: 800;
    line-height: 178%;
    text-transform: uppercase;}

  #fa_toolbar #fa_right #notif_list li.see_all {
  background: #434A52!important;
    padding: 8px!important;
    border-radius: 0px 0px 5px 5px!important;
    border: 1px solid #434A52!important;
    font-size: 11px!important;
    text-transform: uppercase!important;
    height: 35px!important;
    font-family: Karla!important;
    font-weight: 700;
    letter-spacing: 1.12px;
}
#fa_toolbar #fa_right #notif_list li a.delete {
    float: right;
  height: 2.4em; color:#434a52;
    width: 22px;
  opacity: 0.7;}
#fa_toolbar #fa_right #notif_list{
    border: none;
    font-size: 1.3rem;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 999;
    box-shadow: initial;
    top: 52px;
margin-left: -50%; }


#fa_right a.rightHeaderLink{
      color: #c5c5c5!important;
    font-family: 'Karla',sans-serif!important;
    font-size: 11px!important;
    font-style: inherit;
    margin-right: 45px!important;
    margin-top: -19px!important;
    text-transform: lowercase!important;
}
a#fa_show {right:400px!important;}

ul#notif_list {
background: #ECECEC!important;
    border: 1px solid #CED2D6!important;
    margin-top: 5px!important;
position:absolute!important;}


li.see_all {top:2px!important;font-size:9px!important;text-transform:lowercase!important;height:20px!important;}
#fa_toolbar #fa_right #notif_list li hr {border:none!important;}

#fa_toolbar #fa_right #notif_list li.see_all a {white-space: nowrap;font-size;11px!important;}


div.fa_notification, div.fa_notification .content { margin-left:200px;}

#fa_right #fa_notifications {
margin-top: -5px!important;
  margin-left: 100px;
    width: 39px!important;
    height: 30px!important;}

#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications {background:initial;}

#fa_toolbar #fa_right #notif_list li.unread {
  background-color: #e4e6e9;
    border: 1px solid #c1c1c1;
}

[Toryudo]

Bonjour !

Alors, effectivement, ce n'est pas facile.
J'ai fait des tests avec votre CSS, et voici les modifications que je propose sur les trois éléments suivants (peut-être encore à retoucher un peu, mais c'est l'idée qui compte) :

Code:

#fa_right #fa_notifications{
  margin-top: -5px !important;
  margin-left: 100px;
  width: 38px !important;
  height: 36px !important;
}

#fa_notifications img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px !important;
  height: 30px !important;
  background: #D7DADD;
  border-radius: 5px;
  padding: 8px;
  pointer-events: none;
}

span#notif_unread {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff !important;
  font-family: karla !important;
  font-weight: 800;
  background: #434A52;
  border-radius: 100%;
  font-size: 8px;
  padding: 4px;
  text-transform: lowercase;
  line-height: 9px;
  pointer-events: none;
}

En gros, on va passer par un positionnement avec des position: absolute sur les éléments #fa_notifications img et span#notif_unread. Voilà à quoi ça ressemble :


La zone rouge est un peu plus grande. On positionne le span#notif_unread de façon "absolue" en haut (top: 0) à droite (right: 0) relativement à la zone rouge. On positionne #fa_notifications img de façon "absolue" en bas (bottom: 0) à gauche (left: 0) relativement à la zone rouge. De cette façon, on s'est débarrassé des margin, et peu importe comment on bougera #fa_right #fa_notifications, tout suivra et tout restera dans la zone rouge, donc dans la zone où le clic va fonctionner.
J'ai retouché un peu son width et height, ce qui permet de déplacer le span#notif_unread par rapport au #fa_notifications img, tout simplement parce qu'il suit la taille et son positionnement relativement à la zone rouge. Ce n'est pas forcément intuitif, mais en affichant le background en rouge comme vous faites, je pense que ça vous aidera à comprendre.

[Dellou]

O U I Olalala merci beaucoup !!!!
J'ai affiché en rouge du coup, puis j'ai modifié quelques top/right, pour leur trouver leur place et ça fonctionne nickel !! De plus, en parallèle de tout ça, j'ai pu modifier la PA et le forum pour qu'il ne dépasse pas 980px, bref et dans tous ça vos explications étaient très claires, j'ai appris beaucoup de choses, merci énormément pour votre patience !! Passez une très belle journée !!

[Dellou]

Arg   Je pensais que le sujet était résolu, mais voilà, pour les notifications, tout vas bien.... jusqu'à ce que j'aille dans les sujets du forum ! Pouf, l'image disparait et fait apparaître le texte alors que c'est bien coché sur toutes les pages  

Image :
https://cdn.discordapp.com/attachments/410410920657944596/1131259002228056136/image.png

Qu'est-ce que quoi  

[Toryudo]

Alors ça, c'est potentiellement signe qu'un autre script plante et empêche le script que je vous ai fourni de fonctionner (parce que le JavaScript, une fois qu'il a planté sur une ligne, il ne continue pas la suite... et la plupart du temps, tous les scripts qui seront affichés "Sur toutes les pages" sont regroupés en un seul).

Pour l'instant, quand je regarde dans la console en tant qu'invité... c'est mon script qui plante
Pour un invité, le #fa_notifications n'existe pas, donc ma faute, il faudrait plutôt écrire le script comme ça pour être propre :

Code:

$(function(){ $(function(){
  var fa_notif = document.getElementById('fa_notifications');
  if (fa_notif){
    const image = document.createElement('img');
    image.src = 'https://i.imgur.com/inanFDf.png';
    image.alt = 'Notifications';

    var fa_notif_text = fa_notif.childNodes[0];
    fa_notif_text.nodeValue = '';
    fa_notif.prepend(image);
  }
}); });

Par contre, même avec ça corrigé, je pense que ça continuera de ne pas marcher et je ne verrai pas parce que je n'ai pas de compte sur votre forum. Vous pourriez me créer un compte et me donner identifiant / mot de passe par MP ? Comme ça, je regarde si ça change en tant que membre, s'il y a plus d'erreurs et si je vois d'où ça vient.

[Dellou]

Ah ! Merci beaucoup !!! C'est modifié
Et oui bien sûr ! Voici :

[Toryudo]

On va régler les problèmes les uns après les autres, ça finira bien par passer.
Alors, le premier que je vois, c'est dans le Template viewtopic_body. Comme vous avez touché au Template et supprimé tout ce qui concernait les .postprofile-avatar, il y a un script dans le Template qui ne fonctionne plus (et qui ne sert plus non plus je dirais). Il faut supprimer ce morceau de code, sinon il plante :

Code:

   $('.post').each(function() {
      if($(this).find('.postprofile-avatar').html() !== undefined) {
         if (!$(this).find('.postprofile-avatar').html().length) {
            $(this).find('.postprofile-rank').css('border-bottom', 'none');
            $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
         }
      }
   });

[Dellou]

Ouiiiiiiiii c'était ça! Ca fonctionne nickel à présent ! Merci beaucoup, cette fois-ci ça devrait être la bonne haha je met le sujet en résolu ! Merci encore pour tout le temps que vous avez pris pour le sujet, fiouf

Passez une belle soirée!