Cependant, la nouvelle fonctionnalité « dernière visite » de la version 2.8 est considérée comme une petite action, et elle se retrouve donc prise dans ces couleurs de message alternées :
Où la barre « dernière visite » ne serait pas comptée comme un enfant aux fins de nth-child pour déterminer la couleur de son arrière-plan.
Ma première idée a été d’utiliser JavaScript pour simplement ajouter une nouvelle div après toute barre de dernière visite, ce qui fonctionne comme souhaité :
<script type="text/discourse-plugin" version="0.8">
var addedElement;
api.onPageChange(() =>{
addedElement = false;
//window.onload = lastPostFix();
});
async function lastPostFix()
{
var elements = document.getElementsByClassName('topic-post-visited');
var newElement = document.createElement("div");
newElement.classList.add('small-action');
while(elements.length > 0 && !addedElement)
{
elements[0].parentNode.insertBefore(newElement, elements[0].nextSibling);
addedElement = true;
}
}
</script>
Cependant, lorsque vous faites défiler vers le haut ou vers le bas, cela semble causer un tas de problèmes, allant de messages qui refusent simplement de se charger à d’énormes espaces vides en passant par ce qui se passe dans la troisième image :
Bien que cela le rende plus fin, ce n’est pas vraiment le problème ici - l’exemple que j’ai donné comme idéal a été réalisé par moi en modifiant le CSS, ce qui est fondamentalement trivial - le problème est que la coloration de fond de nos publications est effectuée via un sélecteur nth-child et que l’élément .small-action.topic-post-visited compte comme un enfant et bascule donc nth-child quand nous ne le voulons pas.
Où la couleur claire est utilisée comme arrière-plan pour le dernier élément visité, faisant que la publication juste au-dessus et juste en dessous soient toutes deux de notre couleur plus foncée.
Contraste avec notre idéal, où l’alternance des couleurs ignore ce nouvel élément :
Nous obtenons également un comportement amusant lorsque vous faites défiler suffisamment loin pour que la barre se décharge : les publications clignotent toutes en alternance alors que le site redécide ce qui doit être coloré comme quoi lorsque la barre « dernière visite » disparaît.
C’est incroyablement peu idéal et, compte tenu des couleurs alternées qui ont plus de valeur pour nous que l’indicateur de dernière visite, nous aimerions beaucoup un moyen de résoudre ce problème correctement ou simplement de désactiver la fonctionnalité entièrement.
Alors, en supposant que l’absence de réponses signifie que c’est impossible, comment désactivons-nous complètement la fonctionnalité ? Cela ne vaut pas la peine d’avoir tous nos messages qui clignotent en couleurs pour une barre temporaire.
Cela ne fonctionnera pas avec :nth-child ou :nth-of-type. Ceux-ci ne font que compter les éléments enfants, donc ils ne sont pas spécifiques à une classe et il n’y a aucun moyen de filtrer par classe.
Ce dont vous aurez réellement besoin, c’est de :nth-child(2n of .topic-post), mais cela n’est pris en charge que par Safari pour le moment.
Mais vous pouvez essayer quelque chose comme ceci.
En-tête
Cela ajoutera cette classe .every-second à chaque deuxième publication, en excluant les petites actions, donc uniquement les publications de sujet. Ensuite, vous pourrez facilement la cibler avec du CSS.
Il est possible d’obtenir le même effet en utilisant uniquement CSS, mais c’est un peu une bidouille et cela ne fonctionnera que dans le flux de messages. Cela ne fonctionnera pas dans la liste des sujets. Du Javascript sera nécessaire car seul Safary sélectionne la syntaxe :nth-child( of <selector>) et d’après ce que je peux dire, il n’y a aucun attribut qui puisse être ciblé pour appliquer l’effet.
@orangeandblack5, vous devez cibler l’élément article à l’intérieur des messages. Notez que l’attribut id suit le modèle id=post_N où N est le numéro du message dans le flux.
Je peux essayer, mais en incluant de petites actions cette semaine - j’espérais une solution CSS pure si possible, mais oui, nous n’avons pas eu plus de succès avec ça non plus.
Fait amusant : toutes les petites actions ne sont pas créées de la même manière !
J’ai pensé essayer l’idée du CSS pur, et malheureusement, bien que certaines petites actions (comme verrouiller, déverrouiller ou épingler un fil) comptent comme un post complet et obtiennent leur propre ID unique que nous pourrions utiliser pour les colorer, ce n’est pas le cas de toutes.
Notez que cela affecte également la correction JS fournie par @Don - Je vais voir si je peux trouver un moyen de contourner cela, mais mes connaissances en JS sont beaucoup plus rudimentaires qu’en CSS.
