New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Floating discussion title #157

Open
Holyphoenix opened this Issue Jun 26, 2015 · 18 comments

Comments

Projects
None yet
@Holyphoenix

Holyphoenix commented Jun 26, 2015

_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

This comment has been minimized.

Show comment
Hide comment
@franzliedke

franzliedke Jun 27, 2015

Member

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

Member

franzliedke commented Jun 27, 2015

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

@tobscure

This comment has been minimized.

Show comment
Hide comment
@tobscure

tobscure Jun 28, 2015

Member

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:

screen shot 2015-06-28 at 9 59 35 am

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.

Member

tobscure commented Jun 28, 2015

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:

screen shot 2015-06-28 at 9 59 35 am

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

This comment has been minimized.

Show comment
Hide comment
@franzliedke

franzliedke Jun 28, 2015

Member

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

Member

franzliedke commented Jun 28, 2015

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

@tobscure

This comment has been minimized.

Show comment
Hide comment
@tobscure

tobscure Jun 28, 2015

Member

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

Member

tobscure commented Jun 28, 2015

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

@tobscure

This comment has been minimized.

Show comment
Hide comment
@tobscure

tobscure Jun 29, 2015

Member

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.

Member

tobscure commented Jun 29, 2015

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.

@tobscure

This comment has been minimized.

Show comment
Hide comment
@tobscure

tobscure Jun 29, 2015

Member

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.

Member

tobscure commented Jun 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@Holyphoenix

Holyphoenix commented Jun 29, 2015

👍

@franzliedke franzliedke added this to the 1.0 Beta 1 milestone Jun 30, 2015

@Mecvak

This comment has been minimized.

Show comment
Hide comment
@Mecvak

Mecvak Jul 2, 2015

Is the space in the middle being used? Why not take a shortened part of the title and move it there?
738fe7ee-1d7d-11e5-9451-b54766ab18a6
Is this too crowded?

Mecvak commented Jul 2, 2015

Is the space in the middle being used? Why not take a shortened part of the title and move it there?
738fe7ee-1d7d-11e5-9451-b54766ab18a6
Is this too crowded?

@tobscure

This comment has been minimized.

Show comment
Hide comment
@tobscure

tobscure Jul 2, 2015

Member

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

Member

tobscure commented Jul 2, 2015

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

@IainMNorman

This comment has been minimized.

Show comment
Hide comment
@IainMNorman

IainMNorman Jul 16, 2015

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/

IainMNorman commented Jul 16, 2015

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

This comment has been minimized.

Show comment
Hide comment
@Holyphoenix

Holyphoenix Jul 29, 2015

Is this one off the radar now?

Holyphoenix commented Jul 29, 2015

Is this one off the radar now?

@franzliedke

This comment has been minimized.

Show comment
Hide comment
@franzliedke

franzliedke Jul 29, 2015

Member

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

Member

franzliedke commented Jul 29, 2015

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

@tobscure tobscure modified the milestone: 1.0 Beta 1 Jul 30, 2015

@tobscure

This comment has been minimized.

Show comment
Hide comment
@tobscure

tobscure Aug 27, 2015

Member

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.
Member

tobscure commented Aug 27, 2015

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.

@tobscure tobscure changed the title from I quickly forget which topic I am reading to Floating discussion title Aug 27, 2015

@tobscure tobscure referenced this issue Aug 28, 2015

Closed

v0.1.0 roadmap (old) #74

19 of 53 tasks complete

@justjavac justjavac referenced this issue Sep 7, 2015

Open

Flarum v0.1.0 开发路线图 #3

18 of 53 tasks complete
@viruxe

This comment has been minimized.

Show comment
Hide comment
@viruxe

viruxe Feb 19, 2016

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.

viruxe commented Feb 19, 2016

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.

@tobscure tobscure added this to the 0.1.0-beta.6 milestone Mar 16, 2016

@tobscure tobscure modified the milestones: 0.1.0-beta.7, 0.1.0-beta.6 Aug 23, 2016

@datio

This comment has been minimized.

Show comment
Hide comment
@datio

datio Nov 18, 2016

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

datio commented Nov 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@star-buck

star-buck Mar 23, 2017

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?

star-buck commented Mar 23, 2017

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?

@tobscure tobscure removed this from the 0.1.0-beta.7 milestone Jul 22, 2017

@luceos luceos removed the Hacktoberfest label Nov 8, 2017

@Eldenroot

This comment has been minimized.

Show comment
Hide comment
@Eldenroot

Eldenroot Mar 4, 2018

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

@franzliedke @tobscure

Eldenroot commented Mar 4, 2018

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

@franzliedke @tobscure

@franzliedke franzliedke removed the UX label Jul 21, 2018

@ardacebi

This comment has been minimized.

Show comment
Hide comment
@ardacebi

ardacebi Aug 15, 2018

Contributor

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?

Contributor

ardacebi commented Aug 15, 2018

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment