Floating discussion title

[Holyphoenix]

_1 Upvote_ I noticed as threads/topics are getting larger than my poor short term memory is causing an issue on Flarum. I noticed that I would start reading a topic and completely forget which topic I am currently reading.

For this reason I am going to suggest adding the title of the topic somewhere static. I'm not sure the best place for it, but I was thinking on the right sidebar maybe just above the scroll thing whose feature name I can't remember. :P (although, I'm not sure that location works for mobile devices)

[franzliedke]

I always wanted to ask you this, Toby: What do you think about making the topic title sticky when scrolling down?

[tobyzerner]

I like the idea in theory, but the question is how to implement it.

I don't particularly like the idea of replacing the forum title when you scroll down (like esoTalk does) because (1) you lose the "home" button, (2) you lose the forum brand (unless you keep the icon part of the logo, like Discourse does, but that adds complexity), and (3) it would look weird when the pane is pinned because of the X-position disparity between the title and the actual discussion content on a wide screen.

In my original mockups I had the discussion hero collapsing into a sticky bar when you scroll down:

I did implement this at one stage but quickly removed it because the discussion content felt extremely suffocated, especially when the pane was pinned. Too many pixels used up.

It's important to keep in mind that there are still ways to see the title: in the browser's title/tab bar, or in the discussion list pane. Albeit these aren't as obvious as a sticky title would be. But I would personally be happy to not do anything.

A lot of other sites don't do anything either. GitHub issues, for example. Reddit. The comments on any blog.

[franzliedke]

What do you think about the right sidebar, as @Holyphoenix suggested?

[tobyzerner]

Worth a shot, but my initial feeling is that there's not enough room.

[tobyzerner]

Actually, I've changed my mind on this: I think we should replace the left side of the header with the discussion title when you scroll down, just like esoTalk. We still have a back button on the far left to get home. When the pane is pinned, maybe the header should remain fixed-width and just be pushed over to the right anyway.

[tobyzerner]

Hell, maybe we can just roll with the mockup I posted a few comments ago. Could reduce the padding on the header a bit too. See how it feels.

[Holyphoenix]

:+1:

[Mecvak]

Is the space in the middle being used? Why not take a shortened part of the title and move it there? Is this too crowded?

[tobyzerner]

Too crowded, and we can't guarantee that it will be empty anyway (extensions might add stuff).

[IainMNorman]

How about something reappears fixed to the top when you go looking for it. ie. if you scroll up a little?

In a similar way to this: http://wicky.nillia.ms/headroom.js/

[Holyphoenix]

Is this one off the radar now?

[franzliedke]

No, it's still on the list. :)

[tobyzerner]

What needs to be done:

• Add a scroll handler to DiscussionPage so that as soon as the user scrolls past the discussion hero, a class (.DiscussionHero--floating) is added.
• Before the class is added, it should measure the height of the discussion hero and apply that as padding-top to the DiscussionPage so we don't get any jumpiness.
• Add styles for the class so it's fixed and makes the hero inline/look like this screenshot.
• Consider adding a media query to disable this for screens that are less high.
• Submit a PR for review, and we'll see how it feels. We may consider using Headroom.js, try putting the discussion title in the sidebar, or some other solution if it's no good.

[VIRUXE]

I just would like to point out that this "issue" is even more apparent in mobile phones. I always end up forgetting in which discussion I am in. From what I've read I think @tobscure 's suggestion would workout great on either platform, but would most likely need to be smaller on smaller screens to avoid taking up to much space.

[datio]

Having to scroll up to the top of the page just to see the title, possibly triggering any in-between unloaded content to load, is understandably a no-go.

On the other hand, I don't think it'd be wise to keep the title displayed on limited screens all the time.

Scrolling up the page a few pixels should IMO bring into view the respective amount of the (initially hidden) title element height.

A transition between that title element and the top menu that would include the title would probably be required - when scrolling near the OP.

http://ux.stackexchange.com/questions/53712/navbars-that-hide-when-scrolldown-and-show-when-scrolling-up

[star-buck]

I started to look into using Flarum and this was the first thing I exprienced missing the title. Any plugin or code hack to enable this one way or the other?

[Eldenroot]

Also it would be nice to see thread tags on the right side

@franzliedke @tobscure

[ardacebi]

Wow, just saw this while browsing the issue tracker, this will really be nice.

I don’t know about you guys but I’m a huge supporter of the first screenshot @tobscure.

Is there anything we can do about this?

[BartVB]

Another suggestion for mobile: Keep things the way they are when you scroll down. Enlarge the header (scrubber) a little and display scroll the title into view when scrolling up a bit.

This way no screen real estate is take up by this but it's easy to get the title into view again.

Something similar can be done on desktop (show title when scrolling back up).

[franzliedke]

@BartVB Is this inspired by what some mobile browsers do with their address bar? I also recently saw Toby star this repo, so we know it's a good idea. :smile:

[dsevillamartin]

@franzliedke I've also seen websites do this, either making the navigation smaller or completely hiding it. Not sure how well it would work with Flarum though - it might lead to more glitchy behavior. 🤷‍♂

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. We do this to keep the amount of open issues to a manageable minimum. In any case, thanks for taking an interest in this software and contributing by opening the issue in the first place!

[BartVB]

Still relevant

[askvortsov1]

@KyrneDev Did you have something in progress for this one?

[ekumanov]

Has something been done towards this suggestion? I see it's from 2015. I have the same problem with reading many discussions one after another and at times I forget which discussion I am currently at with no hint whatsoever. How difficult it would be to show the title somewhere?

[davwheat]

I think this would personally be best implemented with a 3rd party extension, rather than a PR to core, at least for now before flarum/issue-archive#348 work.

I do worry about how this could make the top mobile header become excessively tall.

[jandolezal66]

This feature still seems not to be implemented. You can try to add this CSS into your styles in the admin dashboard.

.DiscussionHero {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}