Dove la barra “ultima visita” non venga conteggiata come figlio ai fini di nth-child nel determinare di quale colore dovrebbe essere il suo sfondo.
La mia prima idea è stata di usare JavaScript per aggiungere semplicemente un nuovo div dopo qualsiasi barra dell’ultima visita, il che funziona come desiderato:
<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>
Tuttavia, quando scorri su o giù, ci sono un sacco di problemi che questo sembra causare, da post che semplicemente si rifiutano di caricarsi a enormi spazi vuoti a qualunque cosa stia succedendo nella terza immagine:
Sebbene ciò lo renda più sottile, non è questo il problema qui: l’esempio che ho fornito come ideale è stato realizzato da me modificando il CSS, il che è fondamentalmente banale: il problema è che il colore di sfondo dei nostri post viene gestito tramite un selettore nth-child e l’elemento .small-action.topic-post-visited conta come figlio e quindi attiva nth-child quando non vogliamo che lo faccia.
Dove il colore chiaro viene utilizzato come sfondo per l’ultimo elemento visitato, facendo sì che il post direttamente sopra e sotto siano entrambi del nostro colore più scuro.
Contrasto con il nostro ideale, dove l’alternanza dei colori ignora questo nuovo elemento:
Otteniamo anche un comportamento divertente quando scorri abbastanza lontano da scaricare la barra: i post lampeggiano avanti e indietro mentre il sito decide di nuovo cosa colorare come cosa quando la barra “ultima visita” scompare.
Questo è incredibilmente poco ideale e, considerando i colori alternati, vale più per noi dell’indicatore dell’ultima visita, vorremmo molto un modo per affrontare questo problema correttamente o semplicemente disabilitare completamente la funzionalità.
Non funzionerà con :nth-child o :nth-of-type. Questi contano solo gli elementi figli, quindi non sono specifici per la classe e non c’è modo di filtrare per classe.
In realtà avrai bisogno di :nth-child(2n of .topic-post), ma questo è supportato solo da Safari per ora.
Ma puoi provare qualcosa del genere.
Header
Aggiungerà questa classe .every-second a ogni secondo post escludendo le piccole azioni, quindi solo i post dell’argomento. Quindi puoi facilmente puntarlo con il CSS.
È possibile ottenere lo stesso effetto usando solo CSS, ma è un po’ una forzatura e funzionerà solo nello stream dei post. Non funzionerà nell’elenco degli argomenti. Sarà necessario Javascript poiché solo Safari seleziona la sintassi :nth-child( di <selettore>) e, per quanto ne so, non ci sono attributi che possano essere presi di mira per applicare l’effetto.
@orangeandblack5, devi selezionare l’elemento article all’interno dei post. Nota che l’attributo id segue il pattern id=post_N dove N è il numero del post nello stream.
Posso provarci, ma includendo piccole azioni questa settimana - speravo in una soluzione CSS pura, se possibile, ma anche noi non abbiamo avuto fortuna con quella.
Fatto divertente: non tutte le piccole azioni sono create uguali!
Ho pensato di provare l’idea del puro CSS e, sfortunatamente, mentre alcune piccole azioni (come bloccare, sbloccare o fissare un thread) contano come un post completo e ottengono il proprio ID univoco che potremmo usare per colorarle, non tutte lo fanno.
Nota che questo influisce anche sulla correzione JS fornita da @Don: vedrò se riesco a trovare un modo per aggirare questo problema, ma la mia conoscenza di JS è molto più rudimentale di quella di CSS.
