Comment tree lines (#400)

* comments: move folder button to left of vote arrow

* comments: monospace and lighten folder button

* comments: show parent-child and sibling tree lines

* comments: offset tree line for downvote arrow

* comments: extend tree line if no score

* comments: narrow tree indentation to prior width

* comments: hide tree lines on mobile

app/assets/stylesheets/application.css

@@ -376,12 +376,15 @@ ol.comments {
 	padding-left: 6px;
 }
 ol.comments1 {
-	margin-left: 0;
+	margin-left: -20px;
 	padding-left: 0;
 }
 ol.comments.comments1 {
 	border-left-color: transparent;
 }
+ol.comments1 > li.comments_subtree {
+	margin-left: 11px;
+}
 
 ol.search_results {
 	margin-left: 20px;
@@ -463,6 +466,8 @@ ol.stories li.story div.story_liner {
 	clear: both;
 	padding-top: 0.4em;
 	padding-bottom: 0.4em;
+	padding-left: 20px;
+	position: relative;
 }
 
 .comment a {
@@ -546,9 +551,24 @@ li input.comment_folder_button {
 li .comment_folder {
 	display: inline-block;
 	font-size: 9pt;
+	color: #aaa;
 	letter-spacing: 0.1em;
-	width: 1.4em;
+	width: 1.5em;
  	cursor: pointer;
+	float: left;
+	text-align: center;
+	margin-right: -0.3em;
+}
+li .comment_folder.comment_folder_inline {
+	display: none;
+	color: inherit;
+	width: 1.4em;
+	float: none;
+	text-align: left;
+	margin-right: 0;
+}
+li .comment_folder.comment_folder_inline.force_inline {
+	display: inline-block;
 }
 li .comment_folder:before {
 	content: "[-]";
@@ -556,16 +576,47 @@ li .comment_folder:before {
 li .comment_folder_button:checked ~ .comment .comment_folder:before {
 	content: "[+]";
 }
-li .comment_folder_button:checked ~ div.comment div.comment_text,
-li .comment_folder_button:checked ~ div.comment div.voters {
+li .comment_folder_button:checked ~ div.comment div.comment_text {
  	display: none;
 }
+li .comment_folder_button:checked ~ div.comment div.voters {
+	visibility: hidden;
+	margin-bottom: -15px;
+}
 li .comment_folder_button:checked ~ ol.comments ol,
 li .comment_folder_button:checked ~ ol.comments div.comment,
 li .comment_folder_button:checked ~ ol.comments li {
  	display: none;
 }
 
+li.comments_subtree {
+	position: relative;
+}
+
+li .comment_parent_tree_line {
+	position: absolute;
+	left: 54px;
+	border-left: 1px dotted #bbb;
+	top: 30px;
+	bottom: 0;
+}
+li .comment_parent_tree_line.score_shown {
+	top: 44px;
+}
+li .comment_parent_tree_line.can_downvote {
+	top: 56px;
+}
+li .comment_siblings_tree_line {
+	position: absolute;
+	left: 28px;
+	border-left: 1px dotted #bbb;
+	top: 2em;
+	bottom: 0;
+}
+li:last-child > .comment_siblings_tree_line {
+	border-left-color: transparent;
+}
+
 /* try to force a highlighted comment to stay visible */
 div.comment:target div.comment_text,
 div.comment:target div.voters {
@@ -716,6 +767,7 @@ div.comment_text {
 	font-size: 10.5pt;
 	max-width: 700px;
 	word-wrap: break-word;
+	overflow: hidden;
 }
 
 div.comment_text blockquote,
@@ -817,7 +869,7 @@ div.markdown_help_label {
 }
 
 .comment .preview {
-	padding-left: 25px;
+	padding-left: 17px;
 }
 
 div#story_preview {
@@ -848,6 +900,10 @@ div#story_box div.actions {
 	width: 610px;
 }
 
+div.comment_form_container {
+	margin-left: -11px;
+}
+
 div.comment_form_container form {
 	margin-left: 40px;
 	max-width: 700px;

app/assets/stylesheets/mobile.css

@@ -57,6 +57,14 @@
 		margin-top: 0.5em;
 	}
 
+	.comment {
+		padding-left: 0;
+	}
+
+	.comment .preview {
+		padding-left: 25px;
+	}
+
 	ol.comments {
 		margin-left: 10px;
 	}
@@ -64,6 +72,21 @@
 		margin-left: 0;
 		padding-left: 0;
 	}
+	ol.comments1 > li.comments_subtree {
+		margin-left: 0;
+	}
+
+	li .comment_folder {
+		display: none;
+	}
+	li .comment_folder.comment_folder_inline {
+		display: inline-block;
+	}
+
+	li .comment_parent_tree_line,
+	li .comment_siblings_tree_line {
+		border-left-color: transparent;
+	}
 
 	div.voters {
 		margin-left: 0.25em;
@@ -74,6 +97,10 @@
 		margin-top: -5px;
 	}
 
+	div.comment_form_container {
+		margin-left: 0;
+	}
+
 	div.comment_form_container form {
 		margin-left: 35px;
 	}

app/views/comments/_comment.html.erb

@@ -1,32 +1,55 @@
 <input id="comment_folder_<%= comment.short_id %>"
   class="comment_folder_button" type="checkbox"
   <%= comment.score <= Comment::DOWNVOTABLE_MIN_SCORE ? "checked" : "" %>>
+
 <div id="c_<%= comment.short_id %>"
 data-shortid="<%= comment.short_id if comment.persisted? %>"
 class="comment <%= comment.current_vote ? (comment.current_vote[:vote] == 1 ?
 "upvoted" : "downvoted") : "" %>
   <%= comment.score < Comment::SCORE_RANGE_TO_HIDE.first ? "bad" : "" %>">
+
+  <% if defined?(show_tree_lines) && show_tree_lines %>
+    <label for="comment_folder_<%= comment.short_id %>"
+      class="comment_folder"></label>
+  <% end %>
+
   <% if !comment.is_gone? %>
+    <% can_downvote = @user && @user.can_downvote?(comment) %>
+    <% score_display = comment.score_for_user(@user) %>
     <div class="voters">
       <% if @user %>
         <a class="upvoter"></a>
       <% else %>
         <%= link_to "", login_path, :class => "upvoter" %>
       <% end %>
-      <div class="score"><%= comment.score_for_user(@user) %></div>
-      <% if @user && @user.can_downvote?(comment) %>
+      <div class="score"><%= score_display %></div>
+      <% if can_downvote %>
         <a class="downvoter"></a>
       <% else %>
         <span class="downvoter downvoter_stub"></span>
       <% end %>
     </div>
+    <% if defined?(children) && children %>
+      <% if can_downvote %>
+        <div class="comment_parent_tree_line can_downvote"></div>
+      <% elsif score_display != "&nbsp;" %>
+        <div class="comment_parent_tree_line score_shown"></div>
+      <% else %>
+        <div class="comment_parent_tree_line"></div>
+      <% end %>
+    <% end %>
   <% end %>
   <div class="details">
     <div class="byline">
       <a name="c_<%= comment.short_id %>"></a>
 
-      <label for="comment_folder_<%= comment.short_id %>"
-        class="comment_folder"></label>
+      <% if defined?(show_tree_lines) && show_tree_lines %>
+        <label for="comment_folder_<%= comment.short_id %>"
+          class="comment_folder comment_folder_inline"></label>
+      <% else %>
+        <label for="comment_folder_<%= comment.short_id %>"
+          class="comment_folder comment_folder_inline force_inline"></label>
+      <% end %>
 
       <% if defined?(was_merged) && was_merged %>
         <span class="merge"></span>

app/views/comments/threads.html.erb

@@ -7,11 +7,19 @@
 
   <% while subtree %>
     <% if (comment = subtree.shift) %>
-      <li>
-      <%= render "comments/comment", :comment => comment,
-        :show_story => ancestors.empty? %>
+      <li class="comments_subtree">
 
-      <% if (children = comments_by_parent[comment.id]) %>
+      <% children = comments_by_parent[comment.id] %>
+      <%= render "comments/comment", :comment => comment,
+        :show_story => ancestors.empty?,
+        :show_tree_lines => true,
+        :children => children %>
+
+      <% if ancestors.present? %>
+        <div class="comment_siblings_tree_line"></div>
+      <% end %>
+
+      <% if children %>
         <% ancestors << subtree %>
         <% subtree = children %>
         <ol class="comments">

app/views/stories/show.html.erb

@@ -39,7 +39,7 @@
 <% if !@story.previewing %>
   <ol class="comments comments1">
     <% if !@story.is_gone? && !@story.previewing %>
-      <li><%= render "comments/commentbox", :comment => @comment %></li>
+      <li class="comments_subtree"><%= render "comments/commentbox", :comment => @comment %></li>
       <script>autosize($("#comment")[0]);</script>
     <% end %>
 
@@ -49,12 +49,18 @@
 
     <% while subtree %>
       <% if (comment = subtree.shift) %>
-        <li>
+        <li class="comments_subtree">
+
+        <% children = comments_by_parent[comment.id] %>
         <%= render "comments/comment", :comment => comment,
           :show_story => (comment.story_id != @story.id),
-          :was_merged => (comment.story_id != @story.id) %>
+          :show_tree_lines => true,
+          :was_merged => (comment.story_id != @story.id),
+          :children => children %>
 
-        <% if (children = comments_by_parent[comment.id]) %>
+        <div class="comment_siblings_tree_line"></div>
+
+        <% if children %>
           <% ancestors << subtree %>
           <% subtree = children %>
           <ol class="comments">