Abbiamo modificato il CSS relativo alla larghezza dei post, arrivando a quanto segue (basato su questo codice di @Alex_P), che funziona per quasi tutto:
/* Alterna gli sfondi dei post degli argomenti e aumenta la larghezza dei post */
// Regola le dimensioni del colore per uno spazio dello schermo inferiore a 1260px di larghezza di 60px
@media screen and (max-width: 1150px)
{
// Aggiunge colore ai post con numero pari più 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}));
}
// Aggiunge colore ai post con numero dispari più 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}));
}
// Regola le dimensioni dell'azione di 61px
div.small-action
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
// Regola le dimensioni dell'avviso di 61px
div.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
}
// Regola le dimensioni del colore per uno spazio dello schermo superiore a 1260px di larghezza di 180px, regola altri elementi di 120px
@media screen and (min-width: 1150px)
{
// Comando legacy non utilizzato
.topic-post:not(.d-toc-post)
{
//width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
// Regola le dimensioni dello schermo di 120px
.topic-body
{
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
// Regola le dimensioni dello stato di 120px
.topic-status-info, .onscreen-post
{
max-width: calc(758px + #{120px});
}
// Regola le dimensioni della risposta di 120px*2
#reply-control
{
max-width: calc(1475px + (#{120px} * 2));
}
// Regola le dimensioni del popup del compositore di 120px*2
.composer-popup-container
{
max-width: calc(1500px + (#{120px} * 2));
}
// Regola le dimensioni del popup del compositore di 120px (nota che non corrisponderà esattamente, ma nemmeno l'impostazione predefinita)
.composer-popup
{
max-width: calc(724px + #{120px});
}
// Regola le dimensioni dell'azione di 135px
div.small-action
{
max-width: calc(758px + #{135px});
}
// Regola le dimensioni dell'avviso di 135px
div.post-notice
{
max-width: calc(758px + #{135px});
}
// Aggiunge colore ai post con numero pari più 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}));
}
// Aggiunge colore ai post con numero dispari più 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}));
}
// Aggiunge colore alle azioni con numero pari più 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}));
}
// Aggiunge colore alle azioni con numero dispari più 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}));
}
}
Tuttavia, ci sono due cose che non funzionano: l’animazione dell’alone blu sui nuovi post, che abbiamo semplicemente disabilitato, e gli avvisi dei post, ovvero le caselle blu che appaiono quando succede qualcosa di speciale (come il primo post di un utente sul sito o dopo molto tempo).
Pertanto, abbiamo anche aggiunto il seguente codice per testarlo in modo indipendente prima di combinarlo nei nostri casi ampi e compressi sopra:
/* Gli avvisi dei post necessitano di un'attenzione speciale e ancora un po' si rompono */
// Regola le dimensioni degli avvisi dei post per schermi inferiori a 1150px
@media screen and (max-width: 1150px)
{
// Regola le dimensioni dell'avviso di 35px
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{35px});
}
}
// Regola le dimensioni degli avvisi dei post per schermi superiori a 1150px
@media screen and (min-width: 1150px)
{
// Regola le dimensioni dell'avviso di 180px
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px});
}
}
Questo funziona per lo più come previsto, tuttavia, non riusciamo a estendere gli avvisi dei post oltre il resto del post, come si vede qui:
Tutto il resto è stato reso della larghezza desiderata, ma agli avvisi dei post è impedito di estendersi ulteriormente (il bordo destro del “post” stesso è dove si fermano - questo è facilmente visibile se si guarda il bordo arancione sul post sottostante).
Mentre questo comportamento, con il contenuto del post che si ferma un po’ prima del bordo della casella colorata, è esattamente ciò che vogliamo, lascia un brutto pezzo di colore di sfondo visibile accanto agli avvisi blu dei post, e non riusciamo a trovare un buon modo per far estendere questo singolo elemento oltre il post stesso.
Qualsiasi suggerimento su come possiamo raggiungere al meglio questo obiettivo sarebbe molto apprezzato!
(Punti bonus se hai un suggerimento facile per aggiungere un riempimento colorato simile al lato sinistro del post, a sinistra dell’avatar - abbiamo troppe altre cose da guardare in questo momento, ma se fosse banale farlo, un puntatore da dove iniziare aiuterebbe molto.)