Wo die “letzter Besuch”-Leiste nicht als Kind für die Zwecke von nth-child gezählt wird, um zu bestimmen, welche Farbe ihr Hintergrund haben soll.
Mein erster Instinkt war, JavaScript zu verwenden, um einfach ein neues div nach allen letzten Besuchsleisten hinzuzufügen, was tatsächlich wie gewünscht funktioniert:
<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>
Wenn Sie jedoch nach oben oder unten scrollen, scheint dies eine Reihe von Problemen zu verursachen, von Beiträgen, die sich einfach weigern zu laden, über riesige Leerzeichen bis hin zu dem, was auch immer auf dem dritten Bild vor sich geht:
Obwohl das es dünner macht, ist das hier nicht wirklich das Problem – das Beispiel, das ich als unser Ideal gegeben habe, wurde von mir durch Bearbeiten des CSS erstellt, was im Grunde trivial ist – das Problem ist, dass unsere Hintergrundfarbe für Beiträge über einen nth-child-Selektor erfolgt und das Element .small-action.topic-post-visited als Kind gezählt wird und daher nth-child umschaltet, wenn wir das nicht wollen.
Wo die helle Farbe als Hintergrund für das letzte Besuchelement verwendet wird, wodurch der Beitrag direkt darüber und darunter beide unsere dunklere Farbe haben.
Kontrast mit unserem Ideal, wo das Farbwechseln dieses neue Element ignoriert:
Wir erhalten auch ein lustiges Verhalten, wenn Sie weit genug scrollen, damit die Leiste entladen wird – die Beiträge blinken alle hin und her, während die Website neu entscheidet, was als was gefärbt werden soll, wenn die „zuletzt besuchte“ Leiste verschwindet.
Das ist unglaublich ungünstig und angesichts der alternierenden Farben ist es uns mehr wert als die Anzeige des letzten Besuchs, daher hätten wir sehr gerne eine Möglichkeit, dies entweder richtig zu handhaben oder die Funktion ganz zu deaktivieren.
Das wird nicht mit :nth-child oder :nth-of-type funktionieren. Diese zählen nur die Kindelemente, sind also nicht klassenspezifisch und es gibt keine Möglichkeit, nach Klasse zu filtern.
Was Sie tatsächlich benötigen, ist :nth-child(2n of .topic-post), aber dies wird bisher nur von Safari unterstützt.
Aber Sie können so etwas versuchen.
Header
Dies fügt jeder zweiten Beitragsklasse .every-second hinzu, ausgenommen kleine Aktionen, also nur Thema-Beiträge. Dann können Sie sie einfach mit CSS ansprechen.
Es ist möglich, denselben Effekt nur mit CSS zu erzielen, aber es ist irgendwie umständlich und funktioniert nur im Beitrags-Stream. Es funktioniert nicht in der Themenliste. Dort wird Javascript benötigt, da nur Safari die Syntax :nth-child( of <selector>) unterstützt und soweit ich weiß, gibt es keine Attribute, die gezielt angesprochen werden können, um den Effekt anzuwenden.
@orangeandblack5, du musst das article-Element innerhalb der Beiträge ansprechen. Beachte, dass das id-Attribut dem Muster id=post_N folgt, wobei N die Nummer des Beitrags im Stream ist.
Kann das versuchen, aber mit kleinen Aktionen diese Woche – ich hatte auf eine reine CSS-Lösung gehofft, wenn möglich, aber ja, wir hatten auch damit kein Glück.
Fun Fact – nicht alle kleinen Aktionen sind gleichwertig!
Ich habe mir überlegt, die reine CSS-Idee auszuprobieren, und leider zählen einige kleine Aktionen (wie das Sperren, Entsperren oder Anheften eines Threads) als vollständiger Beitrag und erhalten ihre eigene eindeutige ID, die wir zum Einfärben verwenden könnten, aber nicht alle tun das.
Beachten Sie, dass dies auch die von @Don bereitgestellte JS-Korrektur betrifft – ich werde sehen, ob ich einen Weg finde, dies zu umgehen, aber meine JS-Kenntnisse sind weitaus schlechter als die von CSS.
