[PHPBB3] Afficher la liste des sujets en mode Grid

Salut à toutes et à tous,
voici une astuce permettant d'afficher la liste des sujets traditionnelle en mode Grid:

https://forum.forumactif.com/t410438-affichage-des-sujets-en-grid#3417470

---

L'astuce est optimisée avec l'affichage des avatars et de la participation au sujet,
Activer l'affichage des avatars:
Afficher les avatars dans la colonne "Derniers messages :
Affichage/Page d'acceuil/ Structure et hiérarchie/Hiérarchie


Afficher les avatars dans la colonne "Derniers messages" : Cocher = Oui


Gestion des images:

Affichage/Images et couleurs/Gestion des images/Mode avançé

Mini icônes

Recherchez cette ligne et assurez d'avoir une image à l'extéme droite:
Mini sujet - Participation :

---

Les aperçus imagés:

Au clic sur le texte "Afficher la liste des sujets" :



Le mode Grid disparaitra et laissera la place à la listes des sujets :




Le petit plus sera au clic sur "Aperçu du message:" , vous aurez l'aperçu d'une partie du message.

Au cas ou il n'y aurait pas de texte a afficher (seulement des images) , le texte suivant s'affichera: "Pas de texte à afficher"
que vous pourrez modifier dans le script à ce niveau:

Code:


if(apercu<1){apercu="Pas de texte à afficher";}


Au clic sur le texte"Masquer la liste des sujets", la liste des sujets disparaitra et laissera la place au mode Grid.




On va juste modifier le template topics_grid_box :
Affichage/Templates/
Général/topics_grid_box

Supprimer tout le contenu et remplacez par:

Code:

<style>
.M14_topics_list_descript_grid,.M14_importe h2.topic-title.hierarchy a.topictitle
{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
max-width:90%;
display:inline-block;
}
.M14_topics_list_descript_grid::first-letter{text-transform: capitalize;}
</style>
<div class="forumbg announcement">

      <div class="inner">
                  <span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header"style="text-align:center">
                      
                          <span class="M14_click"style="color:white;">Afficher la liste des sujets</span><span class="M14_click_hide"style="display:none; color:white;">Masquer la liste des sujets</span>
                      
                  </li>
                  <span class="corners-bottom"><span></span></span>
                  </div>
</div>
<div class="forumbg announcement M14_load_topic_list"style="display:none;">

      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
                                  <dt>Sujets</dt>
                             
               <dd class="posts">REPONSES</dd>
               <dd class="views">VUES</dd>
               <dd class="lastpost"><span>DERNIERS MESSAGES</span></dd>
            </dl>
         </li>
      </ul>
                  <ul class="topiclist topics bg_none M14_load_topic_list M14_importe"style="display:none;">
              
      </ul>
                  <span class="corners-bottom"><span></span></span></div>
</div>


<!-- BEGIN topics_grid_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
<div class="forumbg announcement grid">
   <div class="inner">
      <span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dt>
                        {topics_grid_box.row.L_TITLE}
               </dt>
            </dl>
         </li>
      </ul>
      <span class="corners-bottom"><span></span></span>
   </div>
</div>

<div class="grid-section">
   <!-- END header_table -->

   <!-- BEGIN header_row -->
   <strong>{topics_grid_box.row.L_TITLE}</strong>
   <!-- END header_row -->

   <!-- BEGIN topic -->

   <!-- BEGIN table_sticky -->
</div>

<div class="forumbg grid">
   <div class="inner">
      <span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dd class="dterm" style="padding-left:0;">
                        {topics_grid_box.row.topic.table_sticky.L_TITLE}
               </dd>
            </dl>
         </li>
      </ul>
      <span class="corners-bottom"><span></span></span>
   </div>
</div>


<div class="grid-section">
   <!-- END table_sticky -->

   <!-- BEGIN line_sticky -->
   <div class="sticky-separator forumbg"></div>
   <!-- END line_sticky -->

   <div class="topic-card {topics_grid_box.row.ROW_ALT_CLASS}">
      <a href="{topics_grid_box.row.U_VIEW_TOPIC}">
         <div class="cover-image" style="--cover-image: url('{topics_grid_box.row.U_FB_IMAGE}');">
            <div class="posts-icon {topics_grid_box.row.FOLDER_CLASSNAME} {topics_grid_box.row.TOPIC_READ_STATUS}" style="background-image:url('{topics_grid_box.row.TOPIC_FOLDER_IMG}');" title="{topics_grid_box.row.L_TOPIC_FOLDER_ALT}"></div>
            <div class="stats">
               <span title="{L_VIEWS}" data-tooltip="{L_VIEWS}">
                  <img src="{ILLIWEB_URL}icon-eye.svg"> {topics_grid_box.row.VIEWS}
               </span>
               <span title="{L_REPLIES}" data-tooltip="{L_REPLIES}">
                  <img src="{ILLIWEB_URL}icon-bubble.svg"> {topics_grid_box.row.REPLIES}
               </span>
            </div>
            <div class="topic-type {topics_grid_box.row.FOLDER_CLASSNAME}">
                    {topics_grid_box.row.TOPIC_TYPE}
            </div>
            <div class="author-avatar" title="{topics_grid_box.row.L_CREATED_ON_BY}">
                    {topics_grid_box.row.TOPIC_AUTHOR_AVATAR}
            </div>
         </div>
      </a>
      <div class="card-content row1">
         <div>
            <span class="participate-check">{topics_grid_box.row.PARTICIPATE_POST_IMG}</span>
            <div class="topic-title-container">
               <!-- BEGIN single_selection -->
               <input type="radio" name="{topics_grid_box.FIELDNAME}" value="{topics_grid_box.row.FID}" {topics_grid_box.row.L_SELECT} />
               <!-- END single_selection -->
               <h2 class="topic-title hierarchy">
                  <a href="{topics_grid_box.row.U_VIEW_TOPIC}" class="topictitle">
                            {topics_grid_box.row.TOPIC_TITLE}
                  </a>
               </h2>
            </div>
         </div>
         <div class="description">
                {topics_grid_box.row.FIRST_POST_TEXT_110}
         </div>
         <div class="card-footer">
            <div class="avatar-footer">
               <!-- BEGIN avatar -->
               <span class="lastpost-avatar">{topics_grid_box.row.topic.avatar.LAST_POST_AVATAR}</span>
               <!-- END avatar -->
                                  <span class="M14_grid_last_author"> {topics_grid_box.row.LAST_POST_AUTHOR}</span>
                    {topics_grid_box.row.NEWEST_POST_IMG}
            </div>
            <div class="time" title="{L_LASTPOST}">
                                  <span class="M14_grid_last_date">  {topics_grid_box.row.LAST_POST_TIME}</span> <span class="M14_grid_last_img">{topics_grid_box.row.LAST_POST_IMG}</span>
            </div>
         </div>
      </div>
   </div>
   <!-- END topic -->

   <!-- BEGIN no_topics -->
   <div class="posts-section posts-empty row1">
      <strong>{topics_grid_box.row.L_NO_TOPICS}</strong>
   </div>
   <!-- END no_topics -->

   <!-- BEGIN bottom -->
</div>

<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_grid_box -->

Pensez a enregistrer puis à valider en cliquant respectivement sur puis

Voir cette page pour être certain d'avoir validé votre template:

https://www.milouze14.net/h2-diverses-aides


Au début du template, vous aurez un style:

Code:

<style>
.M14_topics_list_descript_grid,.M14_importe h2.topic-title.hierarchy a.topictitle
{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
max-width:90%;
display:inline-block;
}
.M14_topics_list_descript_grid::first-letter{text-transform: capitalize;}
</style>

Ce dernier sert simplement à minimiser les titres des sujets afin qu'ils ne dépassent pas .


Il nous reste plus qu'à déposer un script qui va déposer chaque sujet comme la liste des sujets traditionnelle.




Modules/HTML&JAVASCRIPT/Gestion des codes Javascript Créer un nouveau javascript
Mettre un titre explicite.

Sur les sous-forums



Deposez ceci:

Code:


$(function(){
var grid=$('.grid-section').length;
if(!grid)return;
var open=$('.M14_load_topic_list');
var recept=$('.M14_importe');
var grid=$('.grid,.grid-section');
$('.topic-card').each(function(){
var folder=$(this).find('.posts-icon').css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
var icon=$(this).find('.topic-type').text();
var icontitle=$(this).find('.posts-icon').attr('title');
var link=$(this).find('.topic-title.hierarchy a[href^="/t"]').attr('href');  
var particip=$(this).find('.participate-check').html();
var texte=$(this).find('.topic-title.hierarchy a[href^="/t"]').text();
var authoravatar=$(this).find('.author-avatar img').attr('src');
var author=$(this).find('.author-avatar').attr('title');
var mots = author.split("par");
var result= mots[1];  
var vue=$(this).find('.stats span:eq(0)').text();
var reponse=$(this).find('.stats span:eq(1)').text();
var lastavatar=$(this).find('.card-footer .lastpost-avatar img').attr('src');
var apercu=$(this).find('.description').text();
var lastdate=$(this).find('.card-footer .M14_grid_last_date').text();
var lastauthor=$(this).find('.card-footer .M14_grid_last_author').html();  
var lastimg=$(this).find('.card-footer .M14_grid_last_img').html();
if(apercu<1){apercu="Pas de texte à afficher";}
recept.append('<li class="row row1"><dl class="icon"style="background-image:url('+folder+');"title="'+icontitle+'">
<dd class="dterm">'+particip+'<strong style="text-transform:uppercase;">'+icon+'</strong> <div class="topic-title-container"><h2 class="topic-title hierarchy"><a href="'+link+'"class="topictitle"title="'+texte+'">'+texte+'</a></h2></div><br />
<span class="span-tab">par <strong>'+result+'</strong> <img src="'+authoravatar+'"style="width:18px;height:18px;vertical-align:middle;"/></span>
<br /><strong class="M14_toggle_descript"style="cursor:pointer;"title="Cliquez pour afficher">Aperçu du message:</strong><br />
<div class="M14_topics_list_descript_grid"style="display:none">  '+apercu+'</div></dd><dd class="posts">'+reponse+'</dd><dd class="views">'+vue+'</span></dd>                                <dd class="lastpost"><span class="lastpost-avatar"><img src="'+lastavatar+'"/></span><div style="float:left;margin-left:15px;">'+lastauthor+'&nbsp;'+lastimg+'<br>'+lastdate+'</span></div></dd></dl></li>');
$('.M14_click').click(function(){
    $(this).hide(); $(this).next().show();
    $('.M14_load_topic_list').show();
    grid.hide();
  
    open.show();
  });
  $('.M14_click_hide').click(function(){
    $(this).hide();
       $('.M14_load_topic_list').hide();
    grid.show();
    $(this).prev().show();
    open.hide();});
              

});
  
  $('.M14_toggle_descript').click(function(){
$(this).closest('dd').find('.M14_topics_list_descript_grid').toggle();
  });
 

});





Pensez à cliquer sur le bouton Valider

Et voilou les ami(e)s