Derniers sujets*
» [AWESOMEBB]Supprimer le mot invité
par Milouze14 Lun 19 Juil 2021 - 19:03

» [MODERNBB]Supprimer le mot invité
par Milouze14 Lun 19 Juil 2021 - 18:53

» [AWESOMEBB]Modifier les icônes de la réponse rapide
par Milouze14 Sam 17 Juil 2021 - 19:37

» [MODERNBB]Afficher des commentaires sous forme de vignettes
par Milouze14 Lun 12 Juil 2021 - 8:37

» [AWESOMEBB]Afficher des commentaires sous forme de vignettes
par Milouze14 Mer 7 Juil 2021 - 19:25

» [PHPBB2]Afficher des commentaires sous forme de vignettes
par Milouze14 Lun 5 Juil 2021 - 19:35

» [PHPBB3]Afficher des commentaires sous forme de vignettes
par photoclic Jeu 1 Juil 2021 - 23:28

» [PHPBB2] Afficher l'id/ami et brouillon dans le Welcome de la toolbar
par Ptite_Perle Jeu 24 Juin 2021 - 18:29

» [TOUTES VERSIONS] Utiliser les variables utilisateur/forum
par Milouze14 Mer 23 Juin 2021 - 7:01

» [TOUTES VERSIONS] Changer les boutons Nouveau MP et Répondre au MP par du texte
par Constellation Mer 16 Juin 2021 - 0:53

» [PHPBB2] Afficher le posteur du sujet dans les réponses
par Constellation Jeu 10 Juin 2021 - 23:45

» [PHPBB2] Afficher les brouillons en attente sur toutes les pages etc etc
par Constellation Jeu 10 Juin 2021 - 23:43

» [PHPBB2]Supprimer le tag "Re" sur les messages
par Constellation Jeu 10 Juin 2021 - 2:37

» [TOUTES VERSIONS] Ajouter le texte bienvenu et le Pseudo dans l'onglet du navigateur
par Constellation Jeu 10 Juin 2021 - 2:31

» [TOUTES VERSIONS] Afficher la partie profil de la toolbar en bas à gauche avec effet slide
par Constellation Jeu 10 Juin 2021 - 2:27

» [TOUTES VERSIONS] Modifier les textes des MPs nons lus
par Constellation Jeu 10 Juin 2021 - 2:25

» [TOUTES VERSIONS]Afficher la date de la dernière visite au survol du Pseudo seulement pour les admins
par Constellation Jeu 10 Juin 2021 - 2:23

» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par Constellation Jeu 10 Juin 2021 - 2:20

» [PHPBB3] Supprimer la ligne Cacher sa présence en ligne
par Chéryl Sam 29 Mai 2021 - 19:40

» [TOUTES VERSIONS] Masquer le bouton j'aime pas ou j'aime a un membre
par fred9545 Sam 29 Mai 2021 - 11:51

Les statistiques du forum
Nous avons 480 membres enregistrés

L'utilisateur enregistré le plus récent est Spo0kyCat

Nos membres ont posté un total de 26586 messages dans 1349 sujets

[PHPBB2]Afficher des commentaires sous forme de vignettes

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

Message n°10
Milouze14
Milouze14
Fondateur

https://www.milouze14.com

MessageMilouze14 Lun 5 Juil 2021 - 19:35

Hello les ami(e)s,

voici une astuce (template non modifié) bien sympa.

Astuce incompatible avec les doubles post:
https://forum.forumactif.com/t405404-fusionner-agreger-les-multi-messages-double-post#3380145

Le code html devra être déposé dans un sujet ou tous les membres peuvent répondre via la réponse rapide.

La réponse rapide étant désactivée pour les invités, ces derniers ne pourront donc pas en profiter.


Si cette dernière est absente le formulaire ne s'affichera pas.


On aura un contenu qui sera envoyé seulement si le membre aura tapé X caractères (défini dans le script) .

Pour l'exemple j'ai défini 15 caractères.
Code:

//Le nombre minimum de caracteres
var num=15;

Le zéro (0) correspond au nombre de caractères tapés et à coté le nombre restant.
Une fois les 15 caractères atteint, ces deux parties laisseront la place à un texte
mentionnant que le membre peut envoyer son commentaire (modifiable dans le script):

Code:
//LE TEXTE SI LE COMMENTAIRE PEUT ETRE ENVOYE
var textinfo="Vous pouvez envoyer votre commentaire";

Le membre aura le choix de poster en anonyme et
dans ce cas il cochera la case et un avatar par défaut lui sera attribué.



Cet avatar est modifiable dans le script:
Code:
//LE LIEN DE L AVATAR PAR DEFAUT
var img="https://i.servimg.com/u/f20/20/11/87/27/chat10.png";
Dans le cas ou le membre ne coche pas cette case, son avatar sera donc affiché.

Pour les membres du staff, il pourront soit éditer ou supprimer la vignettes,
les membres verront juste les vignettes.

Toutes les vignettes auront l'id du message, c'est à dire qu'à la publication du message on pointera vers ce dernier.

Pour que cette astuce fonctionne, il est impératif d'activer le premier message:

Le nombre de vignettes sera comptabilisées par page.

Général/Messages et Emails/Configuration/Messages

Toujours afficher le 1er message dans les sujets:
Cocher Oui
Et que la réponse rapide soit activée:
Général/Messages et Emails/Configuration/Messages


Autoriser les Réponses rapides : cocher oui




Les aperçus imagés :
[PHPBB2]Afficher des commentaires sous forme de vignettes 133

[PHPBB2]Afficher des commentaires sous forme de vignettes 220

Pour le staff on reprend les images du bouton "Editer" et "Supprimer"

[PHPBB2]Afficher des commentaires sous forme de vignettes 313

Le script est optimisé pour le tag du membre:

[PHPBB2]Afficher des commentaires sous forme de vignettes 410



Allez hop le script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher  Sur les sujets


Déposer ceci:

Code:

$(function(){
  
//Si sujet verrouille
var verrou=$('img[alt^="Ce sujet est verrouillé"]').length;
//Si reponse rapide  absente
var quick=$('form[id="quick_reply"]').length;  
var log=_userdata["session_logged_in"];
//SI VERROUILLE ALOOS ON CACHE LE FORMULAIRE
if((verrou)||(log==0)||(quick==0)){$('.M14_formulaire').hide();}
//SI DECONNECTE ON REMPLACE LE CONTENU DES VIGNETTES PAR UN LOGIN/REGISTER
if(log==0){$('.M14_vignette_topic').addClass('InvitE').html('<span class="M14_vignette_reg_log">Vous devez être <a href="/register" class="link">inscrit</a> et <a href="/login"class="link">connecté</a> pour voir ce commentaire</span>');  }
    var user=_userdata["username"];
    //le texte affiché dans le conteneur
    var texta="votre commentaire doit contenir au moins";
    //Le nombre minimum de caracteres
    var num=15;
    var btn=$('#M14_formulaire_Go');
    $('.M14_formulaire_caractere_info').text('Reste:'+num+'');
    $('#M14_formulaire_Comment').attr('placeholder','Bonjour '+user+',\n'+texta+' '+num+' caractéres.');  
    $('#M14_formulaire_Comment').keyup(function(){
    var a=$(this).val().length;
    var result=num-a;
    //LE TEXTE SI LE COMMENTAIRE PEUT ETRE ENVOYE
    var textinfo="Vous pouvez envoyer votre commentaire";
    $('.M14_formulaire_caractere_info').text('Reste:'+result+'');
    if(a>=num)
    {
    $('.M14_formulaire_Titre,.M14_formulaire_caractere_info').css('opacity','0');
    $('input[id="M14_formulaire_Go"]').slideDown();
       $('.M14_formulaire_caractere').attr('title','Envoyer votre commentaire').text(textinfo);
    }
    if(a<num)
    {
    $('.M14_formulaire_Titre,.M14_formulaire_caractere_info').css('opacity','1');
      $('input[id="M14_formulaire_Go"]').slideUp();
       $('.M14_formulaire_caractere').attr('title','Nombre de caractéres').text(a);
    }
    });
    
    $(btn).click(function(){
    var avatar=_userdata["avatar"];
    var pseudo='@"'+_userdata["username"]+'"';
    var commentaire=$('#M14_formulaire_Comment').val();
      //Si pseudo non renseigne
    if($('input[name="M14_formulaire_Anonyme"]').is(':checked')){
    var b=$('input[id="M14_formulaire_Anonyme_hide"]').val();
    //LE LIEN DE L AVATAR PAR DEFAUT
    var img="https://i.servimg.com/u/f20/20/11/87/27/chat10.png";
    var avatar='<img src="'+img+'">';
    var pseudo=$('input#M14_formulaire_Anonyme_hide').val();
        }
        var aujourdhui=new Date();
        var annee=aujourdhui.getFullYear();
        var mois=aujourdhui.getMonth();
        var jour=aujourdhui.getDate();
        var joursemaine=aujourdhui.getDay();
        var tab_mois=new Array("janv.","fév.","mars.","avril.","mai","juin","juil.","aout","sept.","oct.","nov.","déc.");
        var heure=aujourdhui.getHours();
    if (heure<10) {heure = "0" + heure}
        var minutes=aujourdhui.getMinutes();
    if (minutes<10) {minutes = "0" + minutes}
        var fullHeure=heure+' h '+minutes;
        var fullDate='a publié ce commentaire le '+jour+' '+tab_mois[mois]+' '+annee+' à '+fullHeure;
        $editor = $('.sceditor-container');
    if ($editor.hasClass('wysiwygMode')) $editor.removeClass('wysiwygMode').addClass('sourceMode') ;
    $('#quick_reply textarea ').val('<div class="M14_vignette_topic"><a class="M14_vignette_ancre"style="position: relative;top: -30px; width: 1px;"></a><div class="M14_vignette_topic_comment"><div class="M14_vignette_topic_Img">'+avatar+'</div><div class="M14_vignette_topic_Haut"><span class="M14_vignette_topic_Titre">'+pseudo+'</span><span class="M14_vignette_topic_Date">'+fullDate+'</span></div><div class="M14_vignette_topic_Commentaire">'+commentaire+'</div></div>\n</div>');
        $("#quick_reply input[name='post'][value='Envoyer']").click()})
    });

    $(function(){    
    $('.M14_vignette_topic_Titre').each(function(){var $this=$(this);
    var not=$(this).find('a[href^="/u"]').length;
    if(!not){$this.addClass('no_pseudo');}});
    var staff=$('a[href^="/modcp?mode=delete"]').length;
    var a=$(this).find('.M14_vignette_topic').length;
    $(this).find('.M14_vignette_topic').each(function(){
    $(this).closest('tr[class*="post--"]').addClass('M14_post_none').next().addClass('M14_post_none');
    var link=$(this).closest('tr[class*="post--"]').find('.name a').attr('id');
    $(this).find('.M14_vignette_ancre').attr('id',link).attr('name',link);  
    var d=$(this);
    if(staff)
    {
    var b=$(this).closest('tr[class*="post--"]').find('a[href$="mode=editpost"]').attr('href');
    var bimg=$(this).closest('tr[class*="post--"]').find('a[href$="mode=editpost"] img').attr('src');  
    var c=$(this).closest('tr[class*="post--"]').find('a[href$="mode=delete"]').attr('href');
    var cimg=$(this).closest('tr[class*="post--"]').find('a[href$="mode=delete"] img').attr('src');
    $('.M14_recept_comment').append(d);d.before('<a href="'+b+'"><img src="'+bimg+'"/></a>  <a href="'+c+'"><img src="'+cimg+'"/></a>');}
    $('.M14_recept_comment').append(d);});
    var w=$('tr[class*="post--"]:first').find('.M14_vignette_topic').length;
    if(w==0){$('.M14_formulaire_affiche').attr('title','Aucun commentaire').html('( 0 )');  }
    if(w==1){$('.M14_formulaire_affiche').attr('title','1 commentaire').html('( '+w+' )');  }
    if(w>1){$('.M14_formulaire_affiche').attr('title',''+w+' commentaires').html('( '+w+' )');  }
    });

Penser a cliquer sur le bouton Valid

La css a été optimisée afin d'avoir un affichage concret.


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:

/*LE CONTENEUR DES VIGNETTES*/
.M14_recept_comment
{
width:100%;
position: relative;
}
/********DEBUT DES VIGNETTES********/
/*LA VIGNETTE*/
.M14_vignette_topic
{
margin-top:5px;
margin-bottom: 3px;
border:1px solid #666;
padding: 2px;
height: 100px;
width: 90%;
}

/*LA DATE*/
.M14_vignette_topic_Date
{font-size:11px; margin-left:10px;color:#666!important;}
/*LA PARTIE COMMENTAIRE*/
.M14_vignette_topic_Commentaire
{
  color:#666!important;
  font-size:11px!important;
  padding: 2px;
  white-space: pre-wrap;
  height:50px;
  width:85%;
  overflow-y:auto;
  border:1px dotted #666;
}

/*LE CONTENEUR DE L AVATAR*/
.M14_vignette_topic_Img{position: absolute;margin-top:13px;}
/* L AVATAR*/
.M14_vignette_topic_Img img{width:60px!important;height:60px!important;border-radius:100%;}
/*ON DECALE DE 70 PX LES BLOCS DE DROITE EN FONCTION DE L AVATAR*/
.M14_vignette_topic_Haut,.M14_vignette_topic_Commentaire{margin-left:70px;}
/*LE PSEUDO*/
.M14_vignette_topic_Titre:not(.no_pseudo) a[href^="/u"]{color:#666;font-size:11px; }
/*SI ANONYME*/
.M14_vignette_topic_Titre.no_pseudo{color:red;font-style:italic;font-size:11px;}
/*ON CENTRE LA VIGNETTE POUR LES INVITES*/
.M14_vignette_topic.InvitE{text-align: center;}
/*COULEUR ET APPARENCE DU TEXTE/LIEN DANS LA VIGNETTE POUR LES INVITES*/
.M14_vignette_reg_log{color:red!important;line-height: 100px;}
.M14_vignette_reg_log a.link{color:red!important;text-decoration:none!important;}
/********FIN DES VIGNETTES********/
/*ON MASQUE LES MESSAGES*/
.M14_post_none{display:none!important;}
/*LE FORMULAIRE*/
.M14_formulaire
{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20px 20px;
}
/*LE COMPTEUR DE CARACTERES*/
.M14_formulaire_caractere
{
position: absolute;
color: #666 !important;
font-size: 11px !important;
font-family: Muli;
font-weight: 700;
text-transform: uppercase;
}
.M14_formulaire_caractere_info
{
  position: absolute;
color: #666 !important;
font-size: 11px !important;
font-family: Muli;
font-weight: 700;
text-transform: uppercase;
  margin-left:25px;
}
/*LE TITRE DU FORMULAIRE*/
.M14_formulaire_Titre
{
color:#666!important;
font-size:11px!important;
font-family: Muli;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
/*LE NOMBRE DE VIGNETTES A COTE DU TITRE*/
span.M14_formulaire_affiche
{
margin-left:5px;
font-size: 11px;
color:#666!important;
cursor:pointer;
}
/*LE CONTENU */
#M14_formulaire_Comment
{
color:#000!important;
font-weight:bold;
font-size:11px!important;
border: 1px solid #eee;
height: 100px;
margin: 5px 0;
padding: 10px;
width: 95%;
}
 
/*LE BOUTON ENVOYER*/
#M14_formulaire_Go{display:none;float:right;}
/*LA LIGNE DES BOUTONS*/
.M14_formulaire_btn
{
width:80%;
color: #666;;
font-size:11px;
font-weight: 700;
letter-spacing: 2px;
padding: 3px;
text-transform: uppercase;
}
.M14_formulaire_btn input[type="checkbox"]
{
height: 20px;
 
padding: 3px;
 
}

Penser a cliquer sur le bouton [PHPBB2]Afficher des commentaires sous forme de vignettes Sans_t10





Il manque l'essentiel le code html que vous allez déposer dans votre premier message (formulaire) :

Code:

<div class="M14_formulaire">
<span class="M14_formulaire_caractere">0</span><span class="M14_formulaire_caractere_info"></span>
<div class="M14_formulaire_Titre"> Laisser un commentaire <span class="M14_formulaire_affiche"></span></div><br />
<textarea id="M14_formulaire_Comment"></textarea><br>
<span class="M14_formulaire_btn"><input type="checkbox" name="M14_formulaire_Anonyme"> Poster en anonyme<input type="button" class="button2" id="M14_formulaire_Go" value="Envoyer" title="Envoyer le commentaire"></span><br />
<input type="hidden" id="M14_formulaire_Anonyme_hide" value="Anonyme"></div>
<div class="M14_recept_comment"></div>



Voila, c'est tout pour le moment  clin oeil .
Un soucis direction l'entraide hinhin
https://www.milouze14.com/f14-entraide-forumactif

fred9545 et tritri aiment ce message

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

Sujets similaires internes ( 0 )
Aucun sujet

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà Milouzien ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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