[PHPBB3] Adaptation like dans liste des sujets

**photoclic** · **photoclic** Lun 18 Oct 2021 - 23:51

Version du forum :
PHPBB3
Templates modifiés :
oui
Navigateur :
Chrome

Bonjour à tous les milouziens

Je viens de découvrir et d'adopter cet excellent nouveau script:
https://www.milouze14.com/t33149-phpbb3-afficher-le-nombre-likes-dans-la-liste-des-sujets

Mais sur mon forum, les like ont été traités différemment par rapport au système classique, donc une adaptation semble nécessaire.

Dans le html j'ai modifié l'image et retiré le mot 'J'aime car inutile sur mon forum et adapté les textes des infobulles.

Concernant le script, serait-il possible :
. De mettre en place ce système uniquement sur les forums /f1,/f4, /f5,/f19
. D'exclure ce système dans les notes, annonces et annonces globales...
. D'exclure le système quand le nombre est à zéro.

Dans ce cas, est-il utile d'avoir l'affichage "En cas où aucun like" et son css?

Il me semble aussi que lorsque je clique pour afficher le nombre de like, l'infobulle "Afficher les like pour ce sujet" reste toujours affichée.

Autres modifications sur la css que j'ai essayé d'adapter :
. est-il possible d'avoir le nombre de like dans un fond blanc rond?

Le css actuel:

Code:: /******DEBUT LES LIKES******/ /*L AFFICHAGE EN CAS OU AUCUN LIKE*/ .M14_liked_not { color:#fff; font-size: 10px; background-color:#666; border-radius: 3px; cursor: pointer; padding:2px 10px 2px 2px; display:none; position: absolute; height: 16px; line-height: 16px; margin-top: -24px; margin-left: -3px; } /*LE BLOC COMPLET DES LIKES transition: all 0.5s ease-in;*/ .M14_liked_listbox { float: left; cursor: pointer; padding: 0px 6px 2px 7px; } /*ON DONNE UNE APPARENCE A L IMAGE*/ .M14_liked_listbox img { height: 18px; position: relative; top: 8px; } /*LES CHIFFRES*/ .M14_liked_listbox_num { color: red; display: inline-block; font-size: 10px; min-width: 15px; text-align: center; } /******FIN LES LIKES******/

Philippe, je t'ai mis en admin si tu veux voir.
Et c'est dans le forum "Les Best" qu'il y a le plus de "like".

Merci pour ton aide.

**Milouze14** · **Milouze14** Mar 19 Oct 2021 - 7:13

Hello Serge,
Tout est en place sur ton fofo Serge:

Alors pour tes demandes respectives:

De mettre en place ce système uniquement sur les forums /f1,/f4, /f5,/f19

On dépose ces conditions, je te donnerais le script complet ensuite

. :

Code:: if($('a.nav[href^="/f1-"],a.nav[href^="/f4-"],a.nav[href^="/f5-"],a.nav[href^="/f19-"]').length) { };

D'exclure ce système dans les notes, annonces et annonces globales...

Sur ton forum, les annonces notes etc sont séparées par un tableau,il faut juste ajouter ceci dans ta feuille de style avec un hack important:

Code:: /*ON MASQUE LES LIKES SUR LES ANNONCES ETC ETC*/ .forumbg.announcement.M14_Annonc .M14_liked_listbox{display:none!important;}

D'exclure le système quand le nombre est à zéro.

Par contre ce sera le côté négatif car cela voudrait dire qu'il faut faire une requête sur l'ensemble des sujets de la liste donc je ne pense pas que ton fofo ait besoin de cela.

Je viens de le mentionner sur l'astuce d'ailleurs car j'étais certain de l'avoir noté!!

Dans ce cas, est-il utile d'avoir l'affichage "En cas où aucun like" et son css?

J'ai donc revu le script que lorsque il n'y a pas de like,
le bouton disparait mais toujours au clic

. est-il possible d'avoir le nombre de like dans un fond blanc rond?

Alors, j'ai déposé un display none et un stylede rond blanc:

Code:: /*LES CHIFFRES*/ .M14_liked_listbox_num { color: red; display: none; font-size: 10px; text-align: center; background-color:#fff; width: 16px; height: 16px; border-radius: 16px; position: absolute; margin-top: 8px; margin-left:8px; }

Le display none consiste a afficher ce rond seulement au clic, donc c'est dans le script que ce dernier sera affiché:
A deux reprises:

Code:: .find('.M14_liked_listbox_num').show()

Il me semble aussi que lorsque je clique pour afficher le nombre de like, l'infobulle "Afficher les like pour ce sujet" reste toujours affichée.

J'ai directement placé l'infobulle sur l'image Serge, à priori à réglè le soucis

.



Les modifications a apporter:
Dans ton template, remplaces donc:

Code:: <div class="M14_liked_listbox"> <img class="M14_liked_listbox_img"src="/users/1113/13/79/99/smiles/2735733692.gif" title="Afficher les Bests pour ce sujet"/><span class="M14_liked_listbox_num"></span> </div>

Penses à enregistrer puis à valider en cliquant respectivement sur puis

La css compléte pour les likes et la masquage sur les annonces notes etc etc:

Code:: /******DEBUT LES LIKES******/ /*ON MASQUE LES LIKES SUR LES ANNONCES ETC ETC*/ .forumbg.announcement.M14_Annonc .M14_liked_listbox{display:none!important;} /*LE BLOC COMPLET DES LIKES*/ .M14_liked_listbox { float: left; cursor: pointer; padding: 0px 6px 2px 7px; display:none; } /*ON DONNE UNE APPARENCE A L IMAGE*/ .M14_liked_listbox img { height: 18px; position: relative; top: 8px; } /*LES RONDS OU SE TROUVENT LES RETOURS DE LIKES*/ .M14_liked_listbox_num { color: red; display: none; font-size: 10px; text-align: center; background-color:#fff; width: 16px; height: 16px; border-radius: 16px; position: absolute; margin-top: 8px; margin-left:8px; } /******FIN LES LIKES******/

Puis le script avec l'affichage sur les forums 1, 4 ,5 et 19:

Code:: $(function(){ if($('a.nav[href^="/f1-"],a.nav[href^="/f4-"],a.nav[href^="/f5-"],a.nav[href^="/f19-"]').length) { $('.M14_liked_listbox').show();}; }); $(function(){ $('.M14_liked_listbox').show().each(function(){var num=0;var $this=$(this); var link=$(this).closest('dd').find('a.topictitle[href^="/t"]').attr('href'); var pagin=$(this).closest('dd').find('.M14_paGin .pagination a[href^="/t"]').length; var paginlink=$(this).closest('td').find('.M14_paGin .pagination a[href^="/t"]:last').attr('href'); if(pagin===0){ $this.click(function(){$(this).unbind(); $.get(link , function(data){ num+=$(data).find('p.fa_like_list').find('a[href^="/u"]').length; if(num){$this.addClass('M14_liked_best').find('.M14_liked_listbox_num').show().text(num);} else{$this.remove();} });});}});}); $(function(){ $('.M14_liked_listbox').show().each(function(){var $this=$(this);var num=0;var numb=0; var pagin=$(this).closest('dd').find('.M14_paGin .pagination a[href^="/t"]').length; var paginlink=$(this).closest('dd').find('.M14_paGin .pagination a[href^="/t"]:last').attr('href'); if(pagin){$this.click(function(){$(this).unbind();var result=0;$.get(paginlink,function(data){ num+=$(data).find('p.fa_like_list').find('a[href^="/u"]').length; $(data).find('.M14_paginTopIc').find('a[href^="/t"]:not(:eq(1)) ').each(function(){ var link=$(this).attr('href'); $.get(link , function(data){numb+=$(data).find('p.fa_like_list:not(:first)').find('a[href^="/u"]').length; var result=num+numb;if(result>=1){$this.addClass('M14_liked_best').find('.M14_liked_listbox_num').show().text(result);} else{$this.remove();} });});});});}}); });