you are viewing a single comment's thread.

view the rest of the comments →

[–]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?

[–][deleted] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (1 child)

Option 2!

Yeah comment out everything with and height related, including var body_width and var body_height

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

Okay! I'm going to go for it.

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

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

Amazing! It honestly looks great and polished and professional.

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

Awesome :) So glad to hear that man. I'm really happy with how it turned out, thanks for the pointers for the <600px mode.

The javascript is about to execute...

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

nice!! mobile looks good, desktop needs .usertext-edit textarea width: 99% (or maybe 98%).

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

sweet!

desktop needs 'width: 99%' (or maybe 98%).

how do you mean exactly?

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

Actually I see this style:

@media only screen and (max-width: 600px)
.usertext-edit, .usertext-edit textarea, .formtabs-content {
    width: 98%;
}

Let's make that 98% the default style, so it applies to desktop too. Desktop has extra space to the right of the textarea.

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

Holy shit it worked! Awesome. Maybe I'll put the height stuff back in though, it's making very short boxes for post edits

edit: nope, putting height back in broke it, i'll try adjusting height in css instead now that we're free from the css shackles of that javascript lol

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

yeah try a min-height

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

But most importantly the width clipping issue is solved, that feels good to have that done. Thanks for the help.

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

Ah it doesn't work unfortunately, it affects all text boxes on the whole site, and we don't want every text box being super tall, so I think I'm going to leave it at 150px tall for now