Sin embargo, la novedad de la versión 2.8, la “última visita”, cuenta como una acción pequeña y, por lo tanto, termina siendo atrapada en estos colores alternos de publicación:
Donde la barra de “última visita” no cuente como un hijo a efectos de nth-child para determinar el color de fondo.
Mi primera instinto fue usar JavaScript para simplemente agregar un nuevo div después de cualquier barra de última visita, lo que efectivamente funciona como se desea:
<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>
Sin embargo, cuando te desplazas hacia arriba o hacia abajo, hay muchos problemas que esto parece causar, desde publicaciones que simplemente se niegan a cargarse hasta enormes espacios en blanco o lo que sea que esté sucediendo en la tercera imagen:
Si bien eso lo hace más delgado, ese no es realmente el problema aquí: el ejemplo que di como nuestro ideal se hizo editando el CSS, lo cual es básicamente trivial. El problema es que la coloración de fondo de nuestras publicaciones se realiza a través de un selector nth-child y el elemento .small-action.topic-post-visited cuenta como un hijo y, por lo tanto, activa nth-child cuando no queremos que lo haga.
Donde el color claro se usa como fondo para el último elemento visitado, lo que hace que la publicación directamente arriba y abajo sea de nuestro color más oscuro.
Contraste con nuestro ideal, donde la alternancia de colores ignora este nuevo elemento:
Así que también obtenemos un comportamiento divertido cuando te desplazas lo suficiente como para que la barra se descargue: las publicaciones parpadean con colores de un lado a otro mientras el sitio vuelve a decidir qué debe tener color y qué no cuando desaparece la barra de “última visita”.
Eso es increíblemente inadecuado y, considerando que los colores alternos valen más para nosotros que el indicador de última visita, nos gustaría mucho alguna forma de solucionar esto adecuadamente o simplemente deshabilitar la función por completo.
Eso no funcionará con :nth-child ni con :nth-of-type. Estos solo cuentan los elementos hijos, por lo que no son específicos de la clase y no hay forma de filtrar por clase.
Lo que realmente necesitarás es :nth-child(2n of .topic-post), pero esto solo lo soporta Safari por ahora.
Pero puedes intentar algo como esto.
Encabezado
Esto agregará la clase .every-second a cada segunda publicación, excluyendo las acciones pequeñas, por lo que solo serán publicaciones del tema. Luego puedes apuntarla fácilmente con CSS.
Es posible lograr el mismo efecto usando solo CSS, pero es un poco improvisado y solo funcionará en el flujo de publicaciones. No funcionará en la lista de temas. Se necesitará Javascript, ya que solo Safari selecciona la sintaxis :nth-child( of <selector>) y, hasta donde puedo decir, no hay atributos que se puedan seleccionar para aplicar el efecto.
@orangeandblack5, tienes que seleccionar el elemento article dentro de las publicaciones. Ten en cuenta que el atributo id sigue el patrón id=post_N donde N es el número de la publicación en el flujo.
Puedo intentarlo, pero incluyendo pequeñas acciones esta semana. Esperaba una solución puramente CSS si era posible, pero tampoco hemos tenido suerte con eso.
Dato curioso: ¡no todas las acciones pequeñas se crean por igual!
Se me ocurrió probar la idea de CSS puro y, desafortunadamente, aunque algunas acciones pequeñas (como bloquear, desbloquear o fijar un hilo) cuentan como una publicación completa y obtienen su propio ID único que podríamos usar para colorearlas, no todas lo hacen.
Tenga en cuenta que esto también afecta la corrección de JS proporcionada por @Don. Veré si puedo encontrar una manera de evitar esto, pero mi conocimiento de JS es mucho más rudimentario que el de CSS.
