Refactoring the Single Post View

Wow, nice discussion and mockups. Really like the last version ( … awesome work guys, would really love that to happen!

Btw just to make sure, no separately scrollable divs etc, make the whole page scrollable as a whole otherwise some mobile browsers are real tricky. Not sure if the idea was to allow comments to be scrolled separately.

I like the latest version, the Sean–Jonne hybrid - clean, elegant, and presents information well. My only question is how it would deal with smaller screen sizes - not just mobile devices, but a browser window on an 800x600 monitor, for example. With two ‘main columns’ rather than one column and a side-bar, it could become a bit squashed even in a wide-ish window, especially if the post contains images.

Not a major problem, just something to think about as you’re developing this.

@flaburgan - the single-post view currently is the beta-view, at least it is on

It could be easily made fluid by adding a media query that shifts the right section under the post section, making it one long column.

It could be easily made fluid by adding a media query that shifts the right section under the post section, making it one long column.

This can be a solution, because of course, the post and the comment have to be scrolled separately, we completely loose the interest to display comments next to the post if after 5 comments the post stays at the top of the page and nothing is displayed in the left frame.

@goob I thank you talked about the beta profile which has been removed, sorry about that.

@seantilleycommunitymanager I’d like to try hacking on HTML and CSS, can you please send me css files and images (like, reshare buttons…) by email (, or post a link to them here ?

Hmm, I’d prefer to scroll them together actually I think. But I guess that’s something we can easily change and try once we got a prototype or something.

Yup, media queries and the like should be an easy way of doing this - I was just pointing out that smaller screens would need to be taken into account when designing the single-post view. Thanks for all the ideas - it looks as though this is coming along nicely.

yeah, the last one really ‘feels’ like D* the most.
not sure how much white space there should be, really, or how to handle it in order not to “get lost” on that page, if by any chance there may be less content for some posts :wink:

This looks awesome. I love your latest mockups a lot. What is the crolling-behaviour if both content and comments exceed height of the monitor? In libertree both are scrolled separatedly which works nice most of the time, but I’m not sure if this the additional scrollbar in the middle of the page would fit in your design.

And I totally second the comment-textarea that is static on the bottom right of the page.

i like the “libertree” one --> , this kind of single post view should be just for posts of the user with no media content (images,video, ecc…) , i say that because i really like the actual single post view for videos and photos ( ).
last thing: in the future will we talk about a new UI of diaspora (old beta profiles, new stream, new publisher ecc… )?

Ideally, I’d love to see two-pane scrolling similar to Libertree’s, but this would depend entirely on how well we could make it work across browsers, especially if we really want to take a responsive design approach to our mobile views in the future.

@mathis: I am certainly not opposed to discussing future interface designs, but I almost feel that if we were to completely revamp our designs and layouts, we may want to instead consider giving Diaspora proper theming capabilities in the long run. I think the “Beta” designs really showed us that not everyone wants a drastic redesign, and I think themes could address the idea of making certain layouts and templates optional, without having to add too many toggles in the user settings.

I’m currently working on a PoC of the new single post view, i’ll put it online soon (this evening I hope, so in 8 hours for those who are not in Europa :p)

Ok guys, I work on some quick’n’dirty proof of concept to help us choosing. Here is the result :

Sean Jonne double scroll
Here is a suggestion about put the interactions button in the right part
The same but with only one scroll
Here is an example of some part we can choose to let fixed

Remember, this is absolutely not a pull request, the code is dirty, the design not polished, it’s only about how to organize the view.

First of all awesome :slight_smile:

I think I like the third one the most, though I still think a 50/50 or at least 55/45 one would be better.

Double scroll for the win! I vote for suggestion 2.

I was also wondering if the interaction-buttons should go to the top. Means, if I have read everything, I am on the top of the page and the interaction-icons are gone. But this is most likely the situation I want to like or reshare the posting.

@flaburgan & @rasmusfuhse how about 3 scrolling sections: with the text section stacked above the comments, each scrolling, with a left section (33/67–45/55, or whatever seems aesthetic) for any media also scrolling so that a photo series might play out nicely. the likes and reshares could act as defacto horizontal divider between the stacked text and comments.

@flaburgan I love the first one, although the second one makes a lot of sense too.

I also really liked the fixed comment box, although that will need to expand as text as entered into it for the sake of being readable. :wink:

Super @flaburgan :slight_smile:

I’m kinda not sure I like double scrolling, but I guess if we have the comments on the side like that we need to have it. We should just make sure it works on touch screen devices properly.

Personally I would only have the toolbar fixed and then have keyboard shortcut for jumping to comment box (like on current spv). Less fixed stuff - less clutter, the most important things are on the toolbar and the reshares etc you don’t need to see while you are reading the post :slight_smile:

But awesome to see it in action!

okay so we have different points of view. Personally my preferred is the second one because I think we should group like/reshare/comment icons, but it’s true that the place at the right looks empty in the second example.

Another point : the design looks bad with a scroll in the middle of the page. The scroll is there by default, someone knows a way to display it at the left instead of at he right of the div ? Want to try…