Topic jumper - style suggestions

(Kane York) #1

I’ve written a topic jumper for Discourse, but it looks ugly.

PR: Topic Jumper by riking · Pull Request #2388 · discourse/discourse · GitHub

Here’s what it looks like right now in 3 browsers:

Any suggestions for how to style it to look better? Especially the Post: text box at the top.

Live demo:
Click in the middle of the progress bar.


  • Click in the middle of the progress bar to reveal the jumper.
  • Click somewhere in the slider to jump there. If you drag, it will wait until you have rested for a quarter second.
  • Type a number into the text box to jump there. It will jump if you don’t type anything for a half second.
  • Once the jumper is open, if you start scrolling around without it, it will close after the post number changes 2 to 3 times.

What should be used for a "you read this" indicator on each post?
(Rikki Tooley) #2

Not sure on styling, would be nice if it incorporated into the jumper better. And… the middle button is going to be impossible to use with touch, same with the draggable bar.

I’m not sure it needs to be so small too? Given it’s a hidden element, it could use up more of the right gutter… maybe orient the bar vertically instead?

(Sam Saffron) #3

A few comments:

  • Since this is a power user feature it should have keyboard shortcuts

Typing n should open it up and give focus to the textbox (highlighting the number) … in effect it means the keyboard combo n10 … will take you to post 10. Note you must tail end debounce stuff so it does not try to go to page 1 and then 10.

  • It’s too small, I would not expect this to be constantly open, can be double the width, centered.

  • Get rid of that ugly black border, less borders = less ugly

  • Style the textbox properly, number should be center aligned

  • Ideally this should give us some extra value, one excellent use would be to map read vs unread posts. Imagine if you would render darker pixels for unread and lighter for read. That way, in a glance, I can tell what sections of this topic I have unread.

  • In chrome mac I am seeing this

Overall I like this, and hope we can merge it in once polished.

(Kane York) #4

That’s you seeing the focus style. I left it in for debugging the size of the boxes…

This is telling me I need to redesign. I can’t shove that on top of an <input type="range">.

How’s this for a design?

For length of post, just take the size of either the raw or cooked string.

If posts are filtered, make them the same color as the gaps.

(Sam Saffron) #5

Yeah something like that, but I would stay away from dots, just render a filled gray area for read stuff an light gray for unread.

(Kane York) #6

Here’s another mock I made for a BoingBoing topic:

Modeled after this topic. The “1.5d” and “3d” text is informative, not normative.

(Kane York) #7

Okay, I tried to write somewhat of a spec.

The goal is to have a way to quickly navigate a large thread, in particular:

  • Provide quick navigation in large topics
  • Visualize how many of the posts you have read, and how much of the topic that is
  • Show chronological gaps

Here is Mockup # 3:

This would be a non-modal dialogue spanning the width of a post and an avatar, centered in the main container, triggered when you click the space between the up and down jumps.

The main bar is a combination of a timeline and a content scrollbar. The light grey portions with the jagged icon indicate gaps in the time between posts. The lighter shaded sections are posts that you have read; while the darker shaded sections are posts you have not read.

In the above example, the user has read several, but not all, of the posts made on the first day, then jumped to the bottom to the “Topic closed” notice and scrolled up a bit.

They are currently at the 2nd to last post - as indicated by the black arrow.
Post #46 has been typed in, and is the green arrow. (Or the box for #46 was clicked - I’m not sure.)
If you press enter, click on the grey → arrow, or on the box or the green arrow, the page will jump to post #46.

There will be a keyboard shortcut - n for “post number”.

(Sam Saffron) #8

I think that is biting off too much, lets leave this out for now. Maybe later. Overloading this UI too much can be dangerous.

(Erlend Sogge Heggen) #9

Does the interface need anything else besides the selector for the read position? I figured it could just have a pin added that you could drag around:

(probus) #10

That, and make the “1 of 8” target for writing the post number for jump to post.

(Kane York) #12

I…just lost my reply. I think something’s wrong with drafts when you lose net.

@sam @erlend_sh I have an update.

I hit enter, and:

The width of the bars is proportional to the natural log of the length of the post raw. Previously, it was proportional to the average reading time on each post (the number used for the Summarize estimation). It’s a one-line change to swap out the formula.

(Sam Saffron) #13

Can we make this simpler for the first cut.

No need for complex algorithms.

Each post in the stream has the same width. Grey for unread. No need for lines between posts.

Instead of arrows use a iPhone style bar.

(Kane York) #15

The algorithm actually isn’t very complex. Simple formulas, correctly applied, can give great results.

I’m having trouble with the circles - they’re getting overflowed and overlapped by the next box when the box is really small.

(Sam Saffron) #16

I just dont want to have to explain this, keep it super simple for v1, same width for all posts, if you must an @codinghorror agrees, use raw length.

(Kane York) #17

I put the dots back on the bottom again, because otherwise this pathological case is unusable with mouse-only:

(Sam Saffron) #18

all these black lines are causing fatigue, I just want to see 2 colors there. one for unread and one for read.

Also, we can only afford 1 circle at the bottom (bigger) cause there is only one that will be draggable.

(Jeff Atwood) #19

This isn’t really at all the approach I had in mind. Quoting my post here:

maybe clicking / tapping on the progress bar expands it substantially (up) to show a bunch of things:

  • date ranges of activity, with targets to move to
  • arbitrary move to post number entry box
  • move top
  • move bottom
  • move top 20%
  • move bottom 20%

Here’s a quick mockup

(using example of clickable auto-date ranges from esotalk.)

There should be a handful of additional buttons for “go to arbitrary [enter number]” and maybe top/bottom 20%.

(Dave McClure) #20

While @codinghorror stated this is “not a goal” I just wanted to explain a bit more. I have often found myself wanting to be able to get back to the latest read post in a topic.

Here’s a relatively common case I find myself running into.

A topic that has aged a bit gets a new reply and shows in the topic list with the unread counter. I click the topic, and am taken right to the first unread post. I often find myself scrolling up a few posts, sometimes just a few recent posts, but sometimes to the first post, to regain context. Then I want to get back to the first unread post.

It’d be nice if there were an easier way to do that from within the topic, and its seems worth considering if we’re making changes to the progress bar to accomodate the ability to “jump to a specific post”. The “specific posts” I usually want to jump to are:

  1. First post
  2. First Unread post
  3. Last post

We can do 1 and 3 now, so maybe there’s a way to do 2. If my mockup isn’t the way to go, perhaps even the exising Up/Down arrows could handle this. If you click Down and you’re above the First Unread post, it could stop there first. Then you could click it again to go to the last post.

(Jeff Atwood) #21

First, I apologize for my truly hideous mockup, above. But the brainstorming ideas around “how should we show holes in reading, if we even show them at all?” are relevant today, even after the shift to the right gutter vertical timeline in 1.6 beta.

(Jeff Wong) #22

Does there exist a topic already for discussion, or are we continuing that here? Feel free to edit this suggestion to wherever it makes sense.

Perhaps show the timeline’s read holes as light blue ovals in the timeline? It would mirror the visualization of the current blue unread post marker.

To navigate, clicking on one of the light blue ovals in the timeline (they should be easy to hit, or perhaps have a visual hover indication) will bring them to the top of that reading hole.

here’s an equally very terrible mockup thrown together in gimp, apologies for the mouse work. The holes would obviously be as small or subtle as necessary to not distract from the scrollbar itself:

For power users, shift + j/k could be added as a shortcut to navigate to the next/previous hole ‘section’. This shortcut only applies to section menus outside of topics, and the semantics are similar (I’ve always thought of it as a sort of mega-down/up movement).