Однако новый элемент «последнее посещение», появившийся в версии 2.8, считается небольшим действием, и поэтому он попадает под действие чередования цветов постов:
Где панель «последнее посещение» не учитывается как дочерний элемент при определении nth-child того, каким должен быть цвет её фона.
Мой первый порыв заключался в использовании JavaScript для простого добавления нового div после каждой панели «последнее посещение», что действительно работает как задумано:
<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>
Однако при прокрутке вверх или вниз возникает множество проблем, которые, похоже, вызывает этот подход: от того, что посты просто отказываются загружаться, до огромных пустых пространств и до всего того, что происходит на третьем скриншоте:
Хотя это и делает его тоньше, дело не в этом — пример, который я привёл как идеальный, был реализован путём редактирования CSS, что в принципе тривиально. Проблема в том, что чередование цветов фона постов выполняется через селектор nth-child, а элемент .small-action.topic-post-visited считается дочерним элементом, поэтому nth-child переключается, когда нам этого не нужно.
Также возникает забавное поведение, когда вы прокручиваете страницу достаточно далеко, чтобы панель выгрузилась: все посты начинают мигать цветами туда-сюда, поскольку сайт заново решает, что каким цветом должно быть отмечено, когда исчезает панель «последнего посещения».
Это крайне нежелательно, и учитывая, что чередование цветов для нас важнее индикатора последнего посещения, мы очень хотели бы найти способ либо корректно решить эту проблему, либо просто полностью отключить эту функцию.
Да, это не сработает с :nth-child или :nth-of-type. Эти селекторы просто считают дочерние элементы, поэтому они не зависят от классов, и нет способа отфильтровать их по классу.
Вам на самом деле понадобится :nth-child(2n of .topic-post), но на данный момент это поддерживается только в Safari.
Но вы можете попробовать что-то вроде этого.
Заголовок
Этот код добавит класс .every-second ко второму посту, исключая мелкие действия, так что только посты темы. Затем вы сможете легко обратиться к нему через CSS.
Реализовать тот же эффект только с помощью CSS возможно, но это довольно хакерский способ, и он будет работать только в потоке постов. В списке тем это не сработает. Там потребуется JavaScript, так как только Safari поддерживает синтаксис :nth-child( <селектор> ), и, насколько я знаю, нет никаких атрибутов, на которые можно ориентироваться для применения этого эффекта.
@orangeandblack5, вам нужно ориентироваться на элемент article внутри постов. Обратите внимание, что атрибут id следует шаблону id=post_N, где N — номер поста в потоке.
Можно попробовать, но с включением небольших действий на этой неделе — надеялся, если возможно, на решение на чистом CSS, но да, нам тоже не повезло с этим.
Интересный факт: не все небольшие действия равнозначны!
Я решил попробовать чистый CSS, и, к сожалению, хотя некоторые небольшие действия (например, блокировка, разблокировка или закрепление темы) считаются полноценными сообщениями и получают уникальный идентификатор, который можно использовать для их раскрашивания, это работает не для всех.
Обратите внимание, что это также влияет на исправление на JS, предложенное @Don. Я попробую найти способ обойти это ограничение, но мои знания в JS значительно слабее, чем в CSS.
