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

**URL:** <https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641>\
**Category:** Feature\
**Created:** [2016年八月15日 07:03 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641 "2016-08-15T07:03:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2016年八月15日 07:03 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/1 "2016-08-15T07:03:29Z")

</div>

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

 ![](https://global.discourse-cdn.com/meta/original/3X/6/3/63106e326a75c6bde2057a7000f1934b16f01a44.jpg)

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

 ![](https://global.discourse-cdn.com/meta/original/3X/9/f/9fc03294721833e7190125f5f9733d159c72cadc.jpg)

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?

---

<div class="post-metadata">

**Author:** ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)\
**Post date:** [2016年八月15日 07:14 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/2 "2016-08-15T07:14:40Z")

</div>

I’d like that very much, personally.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2016年八月15日 08:22 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/3 "2016-08-15T08:22:29Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2016年八月15日 08:26 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/4 "2016-08-15T08:26:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2016年八月19日 05:56 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/5 "2016-08-19T05:56:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)\
**Post date:** [2016年八月19日 15:54 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/6 "2016-08-19T15:54:35Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2016年八月19日 19:40 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/7 "2016-08-19T19:40:44Z")

</div>

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:

 ![](https://global.discourse-cdn.com/meta/original/3X/d/2/d25f1e4ea545c0e8c2dc677bc925c34b64a91757.jpg)

(which fades to white)

---

<div class="post-metadata">

**Author:** ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)\
**Post date:** [2016年八月19日 17:25 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/8 "2016-08-19T17:25:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2016年八月19日 20:37 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/9 "2016-08-19T20:37:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)\
**Post date:** [2016年八月19日 20:40 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/10 "2016-08-19T20:40:03Z")

</div>

Got it; Thanks for the clarification

---

<div class="post-metadata">

**Author:** ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)\
**Post date:** [2016年八月20日 12:37 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/11 "2016-08-20T12:37:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [2016年八月30日 16:02 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/12 "2016-08-30T16:02:06Z")

</div>

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

 ![](https://global.discourse-cdn.com/meta/original/3X/3/8/383f93224eebc81c3fdceeffeb1b788b7b2c5525.png)

[https://github.com/discourse/discourse/pull/4427](https://github.com/discourse/discourse/pull/4427)

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

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2016年八月30日 16:14 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/13 "2016-08-30T16:14:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [2016年八月30日 16:16 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/14 "2016-08-30T16:16:06Z")

</div>

> [@cpradio](#):
>
> Did you try it with a tag on the topic it is applied to? As that makes the topic row height variable

😥

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

---

<div class="post-metadata">

**Author:** ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)\
**Post date:** [2016年八月30日 18:17 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/15 "2016-08-30T18:17:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2016年八月30日 18:30 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/16 "2016-08-30T18:30:22Z")

</div>

> [@awole20](#):
>
> It could also alleviate the issue with tagged topics somewhat by being aside.

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.

**Edit:**  
Reading [calc() CSS function - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/calc), 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.

---

<div class="post-metadata">

**Author:** ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)\
**Post date:** [2016年八月30日 19:53 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/17 "2016-08-30T19:53:59Z")

</div>

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.

```plaintext
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;
}

```

 ![](https://global.discourse-cdn.com/meta/original/3X/8/a/8a7cfd268a589f523f9102663836b5ae6e7e821f.png)

---

<div class="post-metadata">

**Author:** ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)\
**Post date:** [2016年八月30日 19:58 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/18 "2016-08-30T19:58:20Z")

</div>

> [@cpradio](#):
>
> the easier solution is to apply the CSS to the next topic in the list

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

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

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

```

 ![](https://global.discourse-cdn.com/meta/original/3X/7/2/7232395b8780e616d4b5d8515b1c05e7f68f0531.jpg)

---

<div class="post-metadata">

**Author:** ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)\
**Post date:** [2016年八月30日 20:16 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/19 "2016-08-30T20:16:19Z")

</div>

> [@awole20](#):
>
> Here’s a quick css test in chrome using the following:

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 !

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2016年八月30日 20:24 UTC](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641/20 "2016-08-30T20:24:43Z")

</div>

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.

[下一頁](https://meta.discourse.org/t/show-updated-topics-above-this-line-in-the-topic-list/48641.md?page=2)