Excessively long topics break topic progress bar

(Josh) #1

Unfortunately, a handful of our users like to have chat threads in which they give recognition to users who post at x,xxx post milestones. In two days, they’ve broken the 1,000+ post threshold and this has happened to the post scroller:

I’m fixing this with the following css:

#topic-progress {
 width: 160px;

And that’ll work until they break 10,000. For now my solution is locking the thread before that happens. Figured I’d pop this over here in the event that somebody had a more bullet-proof solution. I realize that this amount of activity is excessive and likely a fringe case but with forum games, I’m seeing this happen more frequently than I would have expected.

(Jeff Atwood) #2

Yes we need a more elegant solution here when the numbers get large. Any ideas @awesomerobot?

(Zachary Lewis) #3

@codinghorror I’m assuming the considerations of the original design was to provide the following:

  • The index of the current post
  • The progress through the topic
  • The total number of posts in the topic

Given any two of these, the third can be roughly estimated.

From my experience, the progress through the topic is what I’d be concerned about (it is a progress bar, after all). I want to know how much time I’d need to devote to “finish” the thread, and I feel it is adequately indicated via the filling of the progress bar.

I’m torn as to the importance of the current post and total posts value. If they carry the same weight and horizontal space is a concern, it would be conceivable to stack the current post and total posts values like a fraction.

If people desire a numerical value for topic progress, the progress bar could show the number of unread posts as the user reads the thread. (I’m not sure about the language, but something akin to “42 new posts” or “630 left” might make sense.)

It may feel weird to change language on the user, but simply changing what is shown for large threads might be an acceptable approach as well. Small threads keep the “3 of 7” language, while large threads switch to a “300 unread” style. As @Josh_Fabian said previously, this could be a fringe case and the users know damn well what they’re getting themselves into when they enter a “RHYME TIME!” topic, so the granularity of the current progress bar might be completely irrelevant in those situations.

(Rikki Tooley) #4

Has anyone considered a Facebook-style “quick jump” widget for long topics? On my forum there are several threads with 10k+ posts - on phpBB there was an easy way to jump between specific posts, using the page number. On Discourse currently you have to start at either end and scroll inwards. A widget on the side with dates, or contextual anchors (most liked post, most linked to post, etc) would improve things.

(Dave McClure) #5

I’ve always thought that you should be able to click somewhere within the progress bar and go to that point… so If you click halfway through it and there are 1000 posts, you’d end up at post 500. Basically, make it function like a scrollbar.

The other recommendation by @codinghorror in some other thread is to simply type in the last part of the URL for this sort of advanced and somewhat arbitrary usage… If you want to go to post 500, just make that last number 500.

The widget you suggest kind of exists already, but its at the top of the topic page. You can go to ‘best of’ mode there or filter by user, etc… perhaps that could be expanded upon and live elsewhere so that its accessible when you’re half way through a long topic, but the other way is to click the :arrow_up: in the progress bar to jump to the top, then you can use that widget.

(Jeff Atwood) #6

Pretty much what @mcwumbly said, except the progress bar has two click/tap areas, it is divided equally in two parts.

(Jeff Atwood) #7

For very large topics (1000 or more replies) we change the progress bar to display the number of the current post only. There is a large sample topic on try to play with.

We are discussing having the topic progress bar expand up when clicked and have additional nav options including an arbitrary jump button.

(Jeff Atwood) #8

Just to consolidate recent changes:

  • 7 of 147 / 14
  • whole div is clickable now for big finger-friendly pop-up navigation, and manual number entry to jump to a specific post number
  • single dual-arrow glyph on right versus ↑ on left and ↓ on right.
  • default single number inflection point went from 1,000 to 10,000

You can change the single number point in the site settings as need be, but you’ll also need to override CSS width on

<nav id="topic-progress" title="topic progress"

to something slightly wider.