Séparer les Annonces/Annonces Globales des notes

[Junji]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis toujours, même si ce n'est pas un problème, surtout une envie de modifier l'esthétique du forum.

Description du problème

Hello,

Voilà, étant sur un forum ou nous avons très souvent des Annonces Globales, des annonces et des notes en pagaille dans certaines sections, on a souvent affaire à un gros bloc indigeste, et on aimerait pouvoir rendre le tout plus digeste.

J'avais trouvé ce topic qui date de 2015 ( https://forum.forumactif.com/t375183-separer-les-annonces-des-notes ) qui traitait exactement de ce qu'on voulait, mais il ne marche pas de mon côté.

Le code en question :

Code:

$(function(){
//LES ANNONCES GLOBALES
$('.topictitle:contains("[ Annonce globale ]:")').closest('tr').before('<tr> <th colspan="7"></th></tr>');
//LES ANNONCES
$('.topictitle strong:contains("Annonce:")').closest('tr').before('<tr> <th colspan="7"></th></tr>');
//LES POSTS IT
$('.topictitle strong:contains("Note:")').closest('tr').before('<tr> <th colspan="7"></th></tr>');
});

Voilà ce que j'obtiens :

Spoiler:

Mais moi ce que j'aimerais obtenir, cela ressemble plutôt à ceci :

Spoiler:

Alors je présume qu'il faut préciser dans le javascript qu'on veut seulement que l'action pour faire apparaitre le th colspan ne soit faite qu'une seule fois pour la première ligne, mais je ne sais pas comment m'y prendre.
De même, s'il était possible que la ligne de séparation soit plus fine que celle sur le screen, ça serait pas mal, mais là j'pense qu'il faudrait toucher aux templates, ce dont je n'ai pas forcement envie x) )

Quoi qu'il en soit, je vous remercie par avance si quelqu'un arrive à me trouver une solution !

[Invité]

Hello Junji,

alors effectivement, cela génère une ligne après chaque sujet important , que ce soit une annonce globale , annonce ou note.
Comme je suis l'auteur du script mentionné et afin de m'excuser,
je vais te donner un script qui va rechercher si il y une ou plusieurs:
Annonce globale.
Annonce.
Note.
On part pour exemple sur une annonce globale(ce sera identique pour les autres).

A partir de là il va mettre le nombre d'annonces globales (singulier / pluriel) au dessus et une ligne après la dernière (th)  et après une ligne avec Sujets:
Si une annonce globale,on met au singulier.



Si plusieurs annonces globales :



Ce sera l'identique pour les annonces et les notes à condition que l'orthographe n'a pas été modifié via le P.A.
Ensuite la hauteur sera modifiable via la css car la balise th qui vient se greffer aura cette class:

Code:

M14_th_separate

Exemple:

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

Ajoutes ceci:

Code:


th.M14_th_separate{height: 10px;line-height:10px;font-size: 8px;padding: 4px 0px 4px 0px;}


Penses à cliquer sur le bouton


Puis le script:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Codes Javascript

Activer la gestion des codes Javascript : Oui Non

Mets un titre explicite.
Coches sur les sous forums.


Déposes ceci:

Code:


$(function(){
var a=$('.topictitle:contains("Annonce globale:")').length;
var b=$('.topictitle strong:contains("Annonce:")').length;
var c=$('.topictitle strong:contains("Note:")').length;
if(a<2){$('.topictitle:contains("Annonce globale:"):first').closest('tr').before('<tr> <th class="M14_th_separate"colspan="7"> ( 1 ) Annonce globale</th></tr>');}
if(a>1){$('.topictitle:contains("Annonce globale:"):first').closest('tr').before('<tr> <th class="M14_th_separate"colspan="7">('+a+') Annonces globales</th></tr>');}
if(b<2){$('.topictitle strong:contains("Annonce:"):first').closest('tr').before('<tr> <th class="M14_th_separate"colspan="7">(1) Annonce</th></tr>');}
if(b>1){$('.topictitle strong:contains("Annonce:"):first').closest('tr').before('<tr> <th class="M14_th_separate"colspan="7">('+b+') Annonce(s)</th></tr>');}
if(c<2)
{
$('.topictitle strong:contains("Note:"):first').closest('tr').before('<tr> <th class="M14_th_separate"colspan="7">(1) Note</th></tr>');
$('.topictitle strong:contains("Note:")').last().closest('tr').after('<tr> <th class="M14_th_separate"colspan="7">Sujets</th></tr>');  
}
if(c>1)
{
$('.topictitle strong:contains("Note:"):first').closest('tr').before('<tr> <th class="M14_th_separate"colspan="7">('+c+') Notes</th></tr>');
$('.topictitle strong:contains("Note:")').last().closest('tr').after('<tr> <th class="M14_th_separate"colspan="7">Sujets</th></tr>');  
}
  
if((!b)&&(!c))
{
$('.topictitle:contains("Annonce globale:")').last().closest('tr').after('<tr> <th class="M14_th_separate"colspan="7">Sujets</th></tr>');
}
if(!c)
{
$('.topictitle strong:contains("Annonce:")').last().closest('tr').after('<tr> <th class="M14_th_separate"colspan="7">Sujets</th></tr>');
}
});




Penses a cliquer sur le bouton VALIDER



Si tu ne désires pas afficher le nombre et l'affichage singulier/pluriel et mettre une ligne après chaque sujet important.
Comme ceci:



Ce sera ce script:

Code:

$(function(){
var a=$('.topictitle:contains("Annonce globale:")').length;
var b=$('.topictitle strong:contains("Annonce:")').length;
var c=$('.topictitle strong:contains("Note:")').length;
if(a){$('.topictitle:contains("Annonce globale:")').last().closest('tr').after('<tr> <th class="M14_th_separate"colspan="7"></th></tr>');}
if(b){$('.topictitle strong:contains("Annonce:")').last().closest('tr').after('<tr> <th class="M14_th_separate"colspan="7"></th></tr>');}
if(c){$('.topictitle strong:contains("Note:")').last().closest('tr').after('<tr> <th class="M14_th_separate"colspan="7"></th></tr>');}
});

Et voilou.
a++

[Junji]

C'est génial, merci pour les explications et le code ! C'est exactement ce que je voulais !

Merci beaucoup !