Nous avons modifié le CSS concernant la largeur des publications et sommes arrivés à ce qui suit (basé sur ce code par @Alex_P), qui fonctionne pour presque tout :
/* Alterne les arrière-plans des publications de sujet et augmente la largeur des publications */
// Ajuste les tailles de couleur pour un espace d'écran inférieur à 1260px de 60px
@media screen and (max-width: 1150px)
{
// Ajoute de la couleur aux publications paires plus 60px
div.topic-post:nth-child(2n), div.small-action:nth-child(2n)
{
background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}));
}
// Ajoute de la couleur aux publications impaires plus 60px
div.topic-post:nth-child(2n+1), div.small-action:nth-child(2n+1)
{
background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}));
}
// ajuste la taille de l'action de 61px
div.small-action
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
// ajuste la taille de la notification de 61px
div.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
}
// Ajuste les tailles de couleur pour un espace d'écran supérieur à 1260px de 180px, ajuste les autres éléments de 120px
@media screen and (min-width: 1150px)
{
// commande héritée inutilisée
.topic-post:not(.d-toc-post)
{
//width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
// ajuste la taille de l'écran de 120px
.topic-body
{
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
// ajuste la taille du statut de 120px
.topic-status-info, .onscreen-post
{
max-width: calc(758px + #{120px});
}
// ajuste la taille de la réponse de 120px*2
#reply-control
{
max-width: calc(1475px + (#{120px} * 2));
}
// ajuste la taille de la fenêtre contextuelle du compositeur de 120px*2
.composer-popup-container
{
max-width: calc(1500px + (#{120px} * 2));
}
// ajuste la taille de la fenêtre contextuelle du compositeur de 120px (notez qu'elle ne correspondra pas exactement, mais le défaut non plus)
.composer-popup
{
max-width: calc(724px + #{120px});
}
// ajuste la taille de l'action de 135px
div.small-action
{
max-width: calc(758px + #{135px});
}
// ajuste la taille de la notification de 135px
div.post-notice
{
max-width: calc(758px + #{135px});
}
// Ajoute de la couleur aux publications paires plus 180px
div.topic-post:nth-child(2n)
{
background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}));
}
// Ajoute de la couleur aux publications impaires plus 180px
div.topic-post:nth-child(2n+1)
{
background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}));
}
// Ajoute de la couleur aux actions paires plus 180px
div.small-action:nth-child(2n)
{
background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}));
}
// Ajoute de la couleur aux actions impaires plus 180px
div.small-action:nth-child(2n+1)
{
background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}));
}
}
Cependant, deux choses ne fonctionnent pas : l’animation de lueur bleue sur les nouvelles publications, que nous avons simplement désactivée, et les notifications de publication, ou les boîtes bleues qui apparaissent lorsqu’un événement spécial se produit (comme la première publication d’un utilisateur sur le site ou après une longue période).
Nous avons donc également ajouté le code suivant pour tester indépendamment avant de le combiner dans nos cas larges et compressés ci-dessus :
/* Les notifications de publication nécessitent une attention particulière et posent encore des problèmes */
// Ajuste les tailles de notification de publication pour les écrans de moins de 1150px
@media screen and (max-width: 1150px)
{
// ajuste la taille de la notification de 35px
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{35px});
}
}
// Ajuste les tailles de notification de publication pour les écrans de plus de 1150px
@media screen and (min-width: 1150px)
{
// ajuste la taille de la notification de 180px
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px});
}
}
Cela fonctionne en grande partie comme prévu - cependant, nous ne pouvons pas étendre les notifications de publication au-delà du reste de la publication, comme on peut le voir ici :
Tout le reste est de la largeur souhaitée, mais les notifications de publication ne peuvent pas s’étendre davantage (le bord droit du « post » lui-même est là où elles s’arrêtent - c’est facilement visible si vous regardez la bordure orange sur la publication ci-dessous).
Bien que ce comportement, avec le contenu de la publication s’arrêtant un peu avant le bord de la boîte colorée, soit exactement ce que nous voulons, il laisse une partie disgracieuse de la couleur d’arrière-plan visible à côté des notifications de publication bleues, et nous ne trouvons aucun bon moyen d’avoir cet élément unique qui s’étende au-delà de la publication elle-même.
Tous les conseils sur la meilleure façon d’y parvenir seraient grandement appréciés !
(Points bonus si vous avez une suggestion facile pour ajouter un rembourrage coloré similaire sur le côté gauche de la publication, à gauche de l’avatar - nous avons trop d’autres choses pour y jeter un œil en ce moment, mais si ce serait trivial à faire, un indice pour commencer aiderait vraiment.)