Add collapse expanded posts at bottom / top

(Sam Saffron) #1

When you expand a series of posts from the top, you can collapse them only from the top:

When you expand from bottom, you can only collapse from bottom:

Instead, there should be an easily distinguishable glyph / text at the bottom and top (receptively) that allows you to easily collapse the expansion.

(Sam Saffron) #2

@awesomerobot looks like everyone agrees here, can you do a visual mock of how you think this should work then we can work it in?

(lid) #3

1.Is there any reason you can think of why not expending replies into a scrollable box. With max-height of approx the window height.

2.It is also worth considering with @sam suggestion and current behavior a scenario where the user expanded a post with several lengthy replies.
The user start scrolling down and reading the replies. Mid reading the user lost interest in that particular sub-conversation, or possibly decided to check the original post or to continue reading the next post.
what should the user do?

a.scroll all the way up to collapse to check original post.
b.scroll all the way down to collapse and continue reading or check the original post.

1 Like
(Jeff Atwood) #4

Probably just the chevron like the post editor, right here →

(Jeff Atwood) #5

I am surprised we never got to this @sam

(Sam Saffron) #6

@awesomerobot can you do the a quick screenshot mockup for this, I want to get to this .

It would be nice if you could

  1. easily tell that an “expansion ended”

  2. be able to collapse after reading easily.

(Kris) #7

Something like this perhaps? I think the addition of the left/right border here also makes it clearer that they’re embedded replies.

I put the hide button on the left, because it feels like it competes with the “jump to reply” arrow on the right.

(Jeff Atwood) #8

Very nice!! Ship it, work with @sam to make it so.

(Kris) #9

@sam I think all I’ll need for this is a collapse button as a child element to .embedded-posts. If you could help me with that I should be able to manage everything else with CSS.

(Arpit Jalan) #12

Okay, added a button to collapse embedded posts with proper classes. I have pushed the code to a separate branch here:

Relevant commit: FEATURE: add collapse button · discourse/discourse@6fff16a · GitHub

Let me know if this is okay, or if you need any further help here.

(Kris) #13

This is working as intended, but there’s one thing we overlooked:

If the embedded posts are long, we don’t correct your scroll position when you collapse… so for example: you might scroll 1000px up/down to read the embedded posts, but when you collapse the embedded posts, you remain 1000px away from the original… which might be somewhere unrelated (you could even miss some posts).

It seems like we should add the functionality to return to the original post when the embedded posts are collapsed using the new buttons?

(Sam Saffron) #14

Absolutely, @techAPJ can you take care of this. @awesomerobot I would just check in the new styles for now.

(Arpit Jalan) #15

Okay, this is done and merged in master. Deployed this change on meta and try.

The screen flashing at the end of gif seems to be bug in my gif capture software, I did not notice any such flashing on browser.

Link to the post I used for demo: The State of JavaScript on Android in 2015 is... poor

(Jeff Atwood) closed #16

This topic was automatically closed after 3 days. New replies are no longer allowed.