Show "updated topics above this line" in the topic list?

(Jeff Atwood) #1

One thing that Slack does, is highlight the position of where you last read when you re-enter a conversation:

We recently migrated a very large (4 million post) vBulletin site, and some of the users struggle with the way Discourse doesn’t arbitrarily emphasize “here’s all the topics with updates since you last visited, now you must manually dismiss them” out of the box as vBulletin does.

I wonder, to help these users, could we add an ambient updated topics line in the topic list similar to this, to highlight:

  • above this line: topics that are new or updated since your last visit
  • below this line: topics that were not updated since your last visit

like so (copy would be different, but you get the idea):

I’m pretty sure we know the time of the user’s last visit, so this would be (I think) simple client logic based on the last topic bump time, compared to the time of the user’s last visit. Perhaps not terribly different logic from the way we show 3 months later in topic discussion gaps?

Topic List Previews
(Matt Palmer) #2

I’d like that very much, personally.

(Sam Saffron) #3

The tricky thing though is figuring out how reload works?

Do you only get the line once? Do we keep it there till you visit a topic?

(Jeff Atwood) #4

I would say, for now, keep it there indefinitely as an experiment.

At minimum it has to reset on each “visit” so that should suffice for testing this.

(Jeff Atwood) #5

Ok @sam has this in, for preliminary testing. Where you see the simple dim red line in topic lists, that is when you were last here. Below is not updated since your last visit, above is updated since your last visit.

(Pad Pors) #6

can this feature also cover those times a user goes forth and back between the topic-list and different topics?

when I go down the topic list, there are topics that I like them. If I enter those topics, I will lose the position of the cursor in the topic list.

and every time I come back from a topic, I should go down the way in the topic list to the position of the previous topic that I have clicked.

or let’s say is it possible for the user to mark topics in the topic list for himself, so that the next time he goes back to the list (whether in the next login or in the same login but after some topic-reading) the cursor / or the topic list starts from that position?

(Jeff Atwood) #7

You don’t lose the position, every time you go back to a topic list, there is a blue fade that shows you which topic you are returning from.

Here is what I see when I go back to the topic list via the back button, from this topic:

(which fades to white)

(Jeff Wong) #8

Ah, thanks or that! (any mod out there who wants to merge this in with the feature topic, please do!)

It seems very arbitrary at the moment - I’ve read posts above the line, have ‘new’ posts below the line, and scrolled below the line. It doesn’t move on page refresh, and stays at those topics.

So I suppose I should ask - When should I expect the red line to move? As a use-case I’ve got multiple tabs to meta open, would that screw with the “last visited” on refreshing the page? Slack’s ‘new’ message indicator is dynamic and disappears the moment you catch up scrolling through, which makes the meaning very obvious. Something that persists through scrolling and page refreshes confuses me.

Edit: I think I see what’s happening - After hitting “show new topics” the line was updated, but refreshing the entire page keeps it. I didn’t expect a page refresh to keep a ‘new messages!’ line, thus confusion.

Edit again, the line just jumped back way down to a post 16 hours ago when I refreshed, after seeing it hop up after a ‘show updated topics’. Definitely something funky. Might have to do with a case of multiple windows open? I’ll try and see if I can nail down its behavior patterns.

(Jeff Atwood) #9

As long as you are absent from the site for at least one hour, that’s considered a visit terminator. The line will move, if you are away from the site – that is, you have zero web browsers actively pinging the URL – for an hour.

The red line is “last time you were here”. It shouldn’t move until you are gone for an hour.

(Jeff Wong) #10

Got it; Thanks for the clarification

(Pad Pors) #11

the time of the fading is so short, and if a topic is out of filed of view in the topic list (for example it’s the 30’th topic in the list), the blue fades to white before you reach the topic.

p.s.: the gray color of the clicked topic is also useful here in this case, and it makes me think the line is not that much needed in the case i asked for.

meanwhile I read meta.discourse every while i find some time, and a hard time is those times that i lost my previous reading position, and I need to scroll to find it again. and I think this can happen in high-dynamics forum as well.

(Rafael dos Santos Silva) #12

People asking about the line here on my work got me this:

It’s CSS only and i18n friendly, I just need to get an attribute data-last-visit-text on the tr element.

(cpradio) #13

Did you try it with a tag on the topic it is applied to? As that makes the topic row height variable. Until the last-visited class is applied to the next topic and uses border-top, it will be hard to apply a consistent margin to this to put the text on there.

(Rafael dos Santos Silva) #14


Yeah, we don’t use tags at work, that’s why it worked.

(Jeff Wong) #15

Would you be up for making it an aside (right justified), rather than right in the middle? I do like slack’s new message line for this reason - once a user scans through what a red line signifies, the words are tucked out of the way of the message flow.

It could also alleviate the issue with tagged topics somewhat by being aside.

(cpradio) #16

No it wouldn’t, as the horizontal positioning has nothing to do with the problem, it has to do with the margin-top you have to apply and the fact that is dependent on the height of the topic row. I need to research calc in CSS to see if it can figure out an elements height, as that may be one solution, but the easier solution is to apply the CSS to the next topic in the list (not the one it is on now) and switch it to use border-top, so you can apply a negative margin-top, which will always work regardless of the topic row’s height.

Reading calc() - CSS | MDN, it doesn’t seem calc can infer the element’s height, it can use variables, but that doesn’t really help a whole lot. As you still have at least 3 ways of variable height. Pinned topics (so topics with excerpts), topics with tags, and topics that are not pinned and not tagged.

(Mittineague) #17

This sure isn’t easy, I’ll agree with that.
But I’ve been having fun trying anyway.

Yesterday I tried to get a tooltip for :hover

lol, when hovering the inserted content changed the position so it was not hovering anymore and the content didn’t show so then it was hovering again … you get the idea, More action than a Mexican jumping bean.

The best I got today uses a “magic number” so it’s broken more often than not.

tr.last-visit td:last-child a span::after { 
  content: "new since you were here last";
  display: block;
  margin-bottom: -2.3em;
  background-color: #bde;
  color: #000;

(Jeff Wong) #18

How well supported is something like .last-visit + tr::after?

Here’s a quick css test in chrome using the following:

.last-visit + tr::after {
    content: "new";
    position: absolute;
    left: 50%;
    margin-top: -10px;
    padding: 0 10px;

(Mittineague) #19

Using the adjacent sibling and the pseudo after looks good to me using Vivaldi.

I was afraid the margin-top would prove to be a “magic number” but it doesn’t have the problems I was having targeting last-visit

Looks like a winner to me !

(cpradio) #20

That should actually do nicely. That is CSS2, I didn’t even think of using the +, @Falco, if you update your PR to use that for the CSS (since you have the data attribute for localization already in place) your PR should be good to go.