Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Collapsing changes #11

Merged
merged 2 commits into from

3 participants

@stevenleeg

I've been loving HackerNew since I installed it, but one thing I missed was reddit-like comment collapsing from a plugin I was previously using called Hacker News Collapse.

This pull request implements HN Collapse in HackerNew. It's quite a bit less showy than the current implementation, but I think it does a good job of making comment collapsing fast and easily accessible.

Here's what it looks like before:
Before collapse

And after:
After collapse

Let me know what you think!

@tommoor
Owner

Hey Steven,

It's probably better to have the collapse functionality over on the left, it does better associate it with the content that you're collapsing. Does this patch do anything other than change the styling, or is it just a visual tweak?

@stevenleeg
@christiangenco

+1 on having it on the left side. This is how the Reddit Enhancement suite does things:

Screen Shot 2013-03-13 at 1 16 57 PM

Which is super nice, because to collapse a whole bunch of comments in series you only have to move your mouse horizontally. From a design standpoint, that makes a lot more sense.

@tommoor
Owner

Ah interesting, I definitely feel this is a better direction than the current implementation - perhaps I could pull this and tweak it further so that the collapse is on the left.

@christiangenco

.prepend instead?

Got it! I fixed it in 2efb623.

@christiangenco

No need to hide/show on hover if it's just [-] imo. Not that much saved space.

What do you mean? This isn't doing anything on hover as far as I can see.

Ahh nevermind - I misread this.

@stevenleeg
@stevenleeg

There we are:

Screenshot

Screenshot

@tommoor
Owner

Looking good! How are you finding it functionally? I'll be able to check it out a bit later on... two things:

  • Are the retina arrows not working for you? They look kind of crappy...
  • I wonder if we can size the + and - to be the same size - perhaps use an emdash or something longer..
@stevenleeg
@tommoor tommoor merged commit 65364b1 into tommoor:master
@tommoor
Owner

Merging this as it's definitely an improvment. It looks like loss of retina was related to the HN update to https the other day and is a separate issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 12, 2013
  1. @stevenleeg
Commits on Mar 13, 2013
  1. @stevenleeg
This page is out of date. Refresh to see the latest.
Showing with 8 additions and 20 deletions.
  1. +0 −14 hn.css
  2. +8 −6 js/hn.js
View
14 hn.css
@@ -391,10 +391,7 @@ font u a:visited,
}
a.toggle-replies {
- float: right;
cursor: pointer;
- opacity: 0;
- -webkit-transition: all 0.2s ease-in-out;
}
a.toggle-replies:hover {
@@ -405,17 +402,6 @@ td.default:hover a.toggle-replies {
opacity: 1;
}
-a.toggle-replies.collapsed {
- opacity: 1;
-
- padding: 3px 6px;
- margin: -5px;
- background: #828282;
- color: white;
- border-radius: 3px;
-}
-
-
/*********** Inline Replies ***********/
#quick-reply {
View
14 js/hn.js
@@ -260,9 +260,10 @@ var hn = {
if ($button.hasClass('collapsed')) {
var uniq = $button.data('uniq');
- $('.hidden-reply-' + uniq).fadeIn().removeClass();
- $button.text('collapse')
+ $('.hidden-reply-' + uniq).show().removeClass();
+ $button.text('[-]')
.removeClass('collapsed');
+ $button.parent().parent().parent().children(".comment, p").show();
return;
}
@@ -278,7 +279,7 @@ var hn = {
count++;
// find parent tr, several levels down
- $(this).parent().parent().parent().parent().parent().fadeOut().addClass('hidden-reply-' + uniq);
+ $(this).parent().parent().parent().parent().parent().hide().addClass('hidden-reply-' + uniq);
return true;
}
@@ -286,8 +287,9 @@ var hn = {
return false;
}
});
+ $button.parents("td.default").children("span.comment, p").hide();
- $button.text('show ' + count + ' replies')
+ $button.text("[+]")
.addClass('collapsed')
.data('uniq', uniq);
},
@@ -468,7 +470,7 @@ var hn = {
var $wrapper = $(this).parent();
var $meta = $wrapper.find('span.comhead');
- $meta.append('<a class="toggle-replies">collapse<a>');
+ $meta.prepend('<a class="toggle-replies">[-]<a> ');
});
@@ -593,4 +595,4 @@ var hn = {
}
};
-$(hn.init);
+$(hn.init);
Something went wrong with that request. Please try again.