Prevent Last Visit bar from messing up colors

support
1

We have alternating colors set up for all of our posts (and small actions) via nth-child, which looks like this:

image
image2264×1270 127 KB

However, the new-with-2.8 “last visit” thing counts as a small action, and so it ends up getting caught up in these alternating post colors:

image
image944×145 1.85 KB

What we’d most like is to have something like the following:

image
image950×495 30.5 KB

Where the “last visit” bar does not end up counting as a child for the purposes of nth-child determining what color its background should be.

My first instinct was to use JavaScript to simply add a new div after any last visit bars, which does indeed work as desired:

image
image965×153 9.67 KB

via

<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>

However, when you scroll up or down, there are a bunch of issues this seems to cause, from posts simply refusing to load to massive blank spaces to whatever the heck is going on in the third pic:

image
image1037×520 31.8 KB

image
image1030×885 34.8 KB

image
image1049×474 31.4 KB

Anybody have a better idea of how we can accomplish this?

2

Try something like this.

.small-action.topic-post-visited {
  height: 0;
}
3

While that does make it thinner, that’s not really the issue here - the example I gave as our ideal was done with me editing the CSS, which is basically trivial - the issue is that our post background coloring is done via an nth-child selector and the .small-action.topic-post-visited element counts as a child and therefore toggles nth-child when we don’t want it to.

Visually, that would give this:

image
image918×564 40.6 KB

Where the light color is used as the background for the last visit element, causing the post directly above and below to both be our darker color.

Contrast with our ideal, where the color alternating ignores this new element:

image
image950×495 30.5 KB

4

So we also get some fun behavior when you scroll far enough for the bar to unload - the posts all flash colors back and forth as the site re-decides what should be colored as what when the “last visited” bar disappears.

That’s incredibly unideal and considering the alternating colors is worth more to us than the last-visit indicator we’d very much like some way to either deal with this properly or just disable the feature entirely.

5

Okay so supposing from the lack of responses that this is impossible

How do we disable the feature entirely?

It’s not worth having all of our posts flicker in colors for a temporary bar

6

Yeah that is not going to work with :nth-child or :nth-of-type. These are just counting the child elements so not class specific and there is no way to filter with class.

What you’ll actually need is :nth-child(2n of .topic-post) but this is only supported by Safari yet.

But you can try something like this.

Header
It will add this class .every-second to every second post exclude small actions so only topic posts. Then you can easily target it with css.

<script type="text/discourse-plugin" version="0.8">
  api.addPostClassesCallback((attrs) => {
    const postNum = attrs.post_number;
    if (postNum % 2 === 0) {
      return ['every-second']
    }
  });
</script>

CSS

.topic-post {
  background: var(--primary-very-low);
  &.every-second {
    background: var(--primary-low);
  }
}

.small-action.topic-post-visited {
  height: 0;
}

Topic post visited line

Scrolling

1 Like
7

Isn’t it possible to use a more specific selector here in order to stay in a pure CSS solution?

Can you share a snippet of your current CSS rule?

1 Like
8

It is possible to accomplish the same effect using just CSS but it’s kinda hacky and it will work only in the post stream. It won’t work in the topics list. There Javascript will be needed since only Safary selects the :nth-child( of <selector> syntax) and as far I can tell there aren’t any attributes that can be targeted to apply the effect.

@orangeandblack5, you have to target the article element inside the posts. Note that the id attribute follows the pattern id=post_N where N is the number of the post in the stream.

image

So you can target only the even ones with something like the CSS below:

.topic-post {
    article[id$="0"], article[id$="2"], article[id$="4"], article[id$="6"], article[id$="8"] {
        background-color: peachpuff;
    }
}

10

Can give that a go but including small actions this week - was hoping for a pure CSS solution if possible but yeah we’ve also had no luck with that.

11

Fun fact - not all small actions are created equally!

I figured I’d give the pure CSS idea a go, and unfortunately while some small actions (such as locking, unlocking, or pinning a thread) count as a full post and get their own unique ID we could use to color them by, not all of them do.

Note that this also affects the JS fix given by @Don - I’ll see if I can figure out a way around this, but my JS knowledge is much rougher than CSS.