Saidit.net - Updated comment section appearance

submitted by magnora7 from self.SaidIt

A couple days ago we updated the look of the front page.

Today we just finished updating the look of the comment system! Now there are subtly alternating colors to help visually distinguish who is replying to who. Also now the the minimize button is more accessible and is along the whole edge of each comment box. This is useful for very long nested threads.

All this will make reading and navigating the comments easier than ever.

Hopefully this shouldn't mess up anyone's custom CSS, if it does, just comment below and we'll help you.

Let us know what you think!

all 43 comments
sorted by:
top
newinsightfulfun

[–]Otacon 6 insightful - 2 fun6 insightful - 1 fun7 insightful - 2 fun -  (1 child)

Pretty slick update guys. Good shit

[–]magnora7[S] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (0 children)

Thanks

[–]useless_aether 4 insightful - 3 fun4 insightful - 2 fun5 insightful - 3 fun -  (8 children)

that minimize button is very next level

[–]magnora7[S] 5 insightful - 3 fun5 insightful - 2 fun6 insightful - 3 fun -  (7 children)

Thanks! I copied the minimize button design from reddit's /r/starterpacks. Then I got the alternating-color CSS from /s/deutsch and /s/ice_poseidon2. All combined, I think it's about as good of a design as exists for the reddit interface, and now it's site-wide!

[–]useless_aether 5 insightful - 3 fun5 insightful - 2 fun6 insightful - 3 fun -  (6 children)

i seriously think saidit is pretty enough now ( or am i the only one with low standards ?).

[–]magnora7[S] 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 2 fun -  (4 children)

Yeah I think I'm going to stop with the visual updates now, I think we're good for a while. I might tweak the vote buttons a little bit, but that's all that's left that I would want to update

[–]useless_aether 5 insightful - 3 fun5 insightful - 2 fun6 insightful - 3 fun -  (3 children)

one thing about the 'fun' buttons - i think that having a happy, laughing smiley face helps a lot (on a semi- or subconscious level) with keeping the conversations civil. its dificult to go into hardcore flamewar mode with it on the pages.

[–]magnora7[S] 5 insightful - 2 fun5 insightful - 1 fun6 insightful - 2 fun -  (2 children)

I agree, and I think the same is true of having a calming and organized interface to interact with. I've been thinking about that as I've been designing this CSS

[–]FormosaOolong 5 insightful - 2 fun5 insightful - 1 fun6 insightful - 2 fun -  (1 child)

I truly appreciate all the thought and care that goes into this. Really remarkable.

[–]magnora7[S] 4 insightful - 1 fun4 insightful - 0 fun5 insightful - 1 fun -  (0 children)

Thanks Formosa, I'm glad it's appreciated. :)

[–]Tom_Bombadil 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 2 fun -  (0 children)

Agreed.

I don't think of it as low standards. I am biased towards simple design elegance, rather than flashy appearance and dense interface functionality.

I'm not complaining about this current change. It's aight.

[–]Mnemonic 4 insightful - 3 fun4 insightful - 2 fun5 insightful - 3 fun -  (0 children)

It looks good on the main theme but (╯°□°）╯︵ ┻━┻ There goes my sunday! :p

[–]SierraKiloBravo 4 insightful - 1 fun4 insightful - 0 fun5 insightful - 1 fun -  (0 children)

me likey

[–]Jesus-Christ 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (0 children)

Very cool

[–]JasonCarswell 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (0 children)

I LOVE IT!

I don't know if it was tricky or easy but it was WAY worth it. Looks top notch pro - AND is very useful.

Flawless victory!

The animated fade is neat too.

[–][deleted] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (27 children)

I like most of it, but sometimes the voting buttons are shown above the comment and a big blank space is to the right. These comments are way taller than they need to be.

[–]magnora7[S] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (26 children)

Glad you like most of it! The comments going below the votes only happens when the viewing area is very narrow, to give the text more space. I'll fiddle with it some more, maybe it activates too early.

[–][deleted] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (25 children)

I think this extra space we need is off to the right. Deeply nested comments have tons of right borders when maybe they shouldn't. Yes I'm very particular. Just a thought.

Edit: right padding, not borders

[–]magnora7[S] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (24 children)

I just turned down that squeezing thing so it should activate less, only on super-narrow viewports.

The right space is all used up properly, but you have to go below the first full comment chain's end: https://saidit.net/s/SaidIt/comments/1hx2/saiditnet_updated_comment_section_appearance/

Is that what you mean?

I now also see a bug now where when the viewport is under 600px the right border margins get fat for some reason, I'm working on it now

[–][deleted] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (23 children)

when the viewport is under 600px the right border margins get fat for some reason, I'm working on it now

yep, that's it, sweet.

[–]magnora7[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (22 children)

Cool, just fixed it

[–][deleted] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (21 children)

Looks good, nice work. I really like the new huge clickable area for collapsing comments.

[–]magnora7[S] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (20 children)

Thanks, glad you like it! I'm a fan of that feature too, I can tell I will use it often. Let me know if you spot any more inconsistencies or bugs

[–][deleted] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (19 children)

On mobile only, < 600px:

  • It bugs me that the sidebar has weird space to the left of it. It should be as wide as the content below it for readability.
  • .link (home page, sub pages) has way too much left and right margin, we're squishing the content when we need all the width we can get. Also on .link the voting buttons touch the border of the link area. They should have a few px to breathe.
  • we have room to improve on the expando content (image or text) not being full width. long standing issue.
  • we have room to improve on the comment input text areas falling off the screen to the right. I think you brought this up too. It's longstanding and hard to fix.

[–]magnora7[S] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (0 children)

Alright good suggestions, I'll play around with the <600px wide mode and see if I can get it looking nicer.

[–]magnora7[S] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (17 children)

I think I solved all the bugs you brought up for the <600px viewport width, check em out.

The expando thing is a separate issue, I'll come back to that another time.

The comment input width thing is like my moby dick white whale.... it's getting ridiculous. Your javascript hunch looks correct. I know we can just take out the width definition entirely, and it would work great in my tests. But the code says not to do that in the comments, but maybe that's obsolete....

Option 1:

var body_width = Math.max(body.children(".md").width(), 500);

Change this line to simply

var body_width = body.children(".md").width();

This should remove that 495px restriction?

OPTION 2:

Delete one of the following lines to remove the width restriction entirely (best option):

//restore original (?) css width/height. I can't explain why, but //this is important.

textarea.css('width', '');

Delete these lines and/or also delete these 3 lines:

var new_width = Math.max(body_width - 5, textarea.width());

textarea.width(new_width);

edit.width(new_width);

What do you think? Can you test out option 2 for me real quick before I try it on the production server?