From 42ce1e3b4c587453802389c99212967d57797bb1 Mon Sep 17 00:00:00 2001
From: Serge Paquet <srgpqt@gmail.com>
Date: Wed, 15 Jan 2014 22:25:20 -0500
Subject: [PATCH] rebuilt comment tree DOM structure as valid HTML

---
 app/assets/javascripts/application.js.erb | 14 +++++++-------
 app/assets/stylesheets/application.css    | 23 +++++++++++++----------
 app/views/comments/_comment.html.erb      |  4 ++--
 app/views/comments/_commentbox.html.erb   |  8 +++-----
 app/views/comments/index.html.erb         |  4 ++--
 app/views/comments/threads.html.erb       |  5 +++--
 app/views/search/index.html.erb           |  5 ++---
 app/views/stories/show.html.erb           |  7 ++++---
 8 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index d4a3b4c..d2b01d8 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@@ -32,7 +32,7 @@ var _Lobsters = Class.extend({
     if (!Lobsters.curUser)
       return Lobsters.bounceToLogin();
 
-    var li = $(voterEl).parents("li").first();
+    var li = $(voterEl).closest(".story, .comment");
     if (li.hasClass("downvoted")) {
       /* already upvoted, neutralize */
       Lobsters.vote(thingType, voterEl, -1, null);
@@ -91,7 +91,7 @@ var _Lobsters = Class.extend({
     if (!Lobsters.curUser)
       return Lobsters.bounceToLogin();
 
-    var li = $(voterEl).parents("li").first();
+    var li = $(voterEl).closest(".story, .comment");
     var scoreDiv = li.find("div.score").get(0);
     var score = parseInt(scoreDiv.innerHTML);
     var action = "";
@@ -136,7 +136,7 @@ var _Lobsters = Class.extend({
         Lobsters.commentDownvoteReasons[reason].toLowerCase() + ")");
 
     $.post("/" + (thingType == "story" ? "stories" : thingType + "s") + "/" +
-      $(voterEl).parents("li").first().attr("data-shortid") + "/" +
+      li.attr("data-shortid") + "/" +
       action, { reason: reason });
   },
 
@@ -225,11 +225,11 @@ var _Lobsters = Class.extend({
 var Lobsters = new _Lobsters();
 
 $(document).ready(function() {
-  $("li.comment a.downvoter").click(function() {
+  $(".comment a.downvoter").click(function() {
     Lobsters.downvoteComment(this);
     return false;
   });
-  $("li.comment a.upvoter").click(function() {
+  $(".comment a.upvoter").click(function() {
     Lobsters.upvoteComment(this);
     return false;
   });
@@ -279,7 +279,7 @@ $(document).ready(function() {
 
   $(document).on("click", "a.comment_deletor", function() {
     if (confirm("Are you sure you want to delete this comment?")) {
-      var li = $(this).parents("li.comment").first();
+      var li = $(this).closest(".comment");
       $.post("/comments/" + $(li).attr("data-shortid") + "/delete",
       function(d) {
         $(li).replaceWith(d);
@@ -289,7 +289,7 @@ $(document).ready(function() {
 
   $(document).on("click", "a.comment_undeletor", function() {
     if (confirm("Are you sure you want to undelete this comment?")) {
-      var li = $(this).parents("li.comment").first();
+      var li = $(this).closest(".comment");
       $.post("/comments/" + $(li).attr("data-shortid") + "/undelete",
       function(d) {
         $(li).replaceWith(d);
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 598ae77..72da94e 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -402,7 +402,7 @@ div.voters .downvoter {
 }
 
 div.voters .upvoter:hover,
-li.upvoted div.voters .upvoter {
+.upvoted div.voters .upvoter {
 	border-bottom-color: #ac130d;
 }
 
@@ -419,7 +419,7 @@ div.voters .downvoter {
 	border-top-width: 9px;
 }
 div.voters .downvoter:hover,
-li.downvoted div.voters .downvoter {
+.downvoted div.voters .downvoter {
 	border-top-color: gray;
 }
 
@@ -428,17 +428,17 @@ div.voters .downvoter.downvoter_stub {
 }
 
 li.story,
-li.comment {
+.comment {
 	clear: both;
 	padding-top: 0.4em;
 	padding-bottom: 0.4em;
 }
-li.comment {
+.comment {
 	padding-top: 0.5em;
 	padding-bottom: 0.5em;
 }
 
-li.comment a {
+.comment a {
 	color: #666;
 }
 
@@ -449,21 +449,21 @@ li div.details {
 	padding-top: 0.1em;
 }
 
-li.negative {
+.negative {
 	opacity: 0.7;
 	color: gray !important;
 }
-li.negative_3 {
+.negative_3 {
 	opacity: 0.4;
 }
-li.negative_5 {
+.negative_5 {
 	opacity: 0.3;
 }
-li.negative_7 {
+.negative_7 {
 	opacity: 0.2;
 }
 
-li.comment.highlighted {
+.comment.highlighted {
 	background-color: #ffffbf;
 }
 
@@ -677,6 +677,9 @@ div.markdown_help_label {
 	cursor: pointer;
 }
 
+.comment .preview {
+	padding-left: 25px;
+}
 
 div#story_preview {
 	margin-top: 2em;
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index d73bc52..d0daf40 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -1,4 +1,4 @@
-<li id="comment_<%= comment.short_id %>" data-shortid="<%= comment.short_id %>"
+<div id="comment_<%= comment.short_id %>" data-shortid="<%= comment.short_id %>"
 class="comment <%= comment.current_vote ? (comment.current_vote[:vote] == 1 ?
 "upvoted" : "downvoted") : "" %>
   <%= comment.highlighted ? "highlighted" : "" %>
@@ -92,7 +92,7 @@ class="comment <%= comment.current_vote ? (comment.current_vote[:vote] == 1 ?
       <% end %>
     </div>
   </div>
-</li>
+</div>
 
 <% if comment.highlighted %>
   <script>
diff --git a/app/views/comments/_commentbox.html.erb b/app/views/comments/_commentbox.html.erb
index a847d28..6a1007f 100644
--- a/app/views/comments/_commentbox.html.erb
+++ b/app/views/comments/_commentbox.html.erb
@@ -1,5 +1,4 @@
-<li class="comment">
-<div class="comment_form_container">
+<div class="comment comment_form_container">
 <%= form_tag comment.new_record? ?
   "/comments/post_to/#{comment.story.short_id}" :
   "/comments/#{comment.short_id}/update" do |f| %>
@@ -44,9 +43,8 @@
   <p></p>
 <% end %>
 <% if defined?(show_comment) && show_comment.valid? %>
-  <ol class="comments comments1 preview">
+  <div class="preview">
     <%= render "comments/comment", :comment => show_comment %>
-  </ol>
+  </div>
 <% end %>
 </div>
-</li>
diff --git a/app/views/comments/index.html.erb b/app/views/comments/index.html.erb
index 3d69eef..44e46d9 100644
--- a/app/views/comments/index.html.erb
+++ b/app/views/comments/index.html.erb
@@ -1,7 +1,7 @@
 <ol class="comments comments1">
   <% @comments.each do |comment| %>
-    <%= render "comments/comment", :comment => comment,
-      :show_story => true %>
+    <li><%= render "comments/comment", :comment => comment,
+      :show_story => true %></li>
   <% end %>
 </ol>
 
diff --git a/app/views/comments/threads.html.erb b/app/views/comments/threads.html.erb
index 08d4570..5285e2b 100644
--- a/app/views/comments/threads.html.erb
+++ b/app/views/comments/threads.html.erb
@@ -7,6 +7,7 @@
 
   <% while subtree %>
     <% if (comment = subtree.shift) %>
+      <li>
       <%= render "comments/comment", :comment => comment,
         :show_story => ancestors.empty? %>
 
@@ -15,10 +16,10 @@
         <% subtree = children %>
         <ol class="comments">
       <% else %>
-        <ol class="comments"></ol>
+        <ol class="comments"></ol></li>
       <% end %>
     <% elsif (subtree = ancestors.pop) %>
-      </ol>
+      </ol></li>
     <% end %>
   <% end %>
 </ol>
diff --git a/app/views/search/index.html.erb b/app/views/search/index.html.erb
index 44504e9..4ec5fff 100644
--- a/app/views/search/index.html.erb
+++ b/app/views/search/index.html.erb
@@ -62,9 +62,8 @@
         <%= render :partial => "stories/listdetail",
           :locals => { :story => res } %>
       <% elsif res.class == Comment %>
-        <%= render :partial => "comments/comment",
-          :locals => { :comment => res,
-          :show_story => true, :hide_voters => true } %>
+        <li><%= render "comments/comment", :comment => res,
+          :show_story => true, :hide_voters => true %></li>
       <% end %>
     <% end %>
   </ol>
diff --git a/app/views/stories/show.html.erb b/app/views/stories/show.html.erb
index a83d240..4f8fcf2 100644
--- a/app/views/stories/show.html.erb
+++ b/app/views/stories/show.html.erb
@@ -13,7 +13,7 @@
 
 <ol class="comments comments1">
   <% if @user && !@story.is_gone? && !@story.previewing %>
-    <%= render "comments/commentbox", :comment => @comment %>
+    <li><%= render "comments/commentbox", :comment => @comment %></li>
   <% end %>
 
   <% comments_by_parent = @comments.group_by(&:parent_comment_id) %>
@@ -22,6 +22,7 @@
 
   <% while subtree %>
     <% if (comment = subtree.shift) %>
+      <li>
       <%= render "comments/comment", :comment => comment %>
 
       <% if (children = comments_by_parent[comment.id]) %>
@@ -29,10 +30,10 @@
         <% subtree = children %>
         <ol class="comments">
       <% else %>
-        <ol class="comments"></ol>
+        <ol class="comments"></ol></li>
       <% end %>
     <% elsif (subtree = ancestors.pop) %>
-      </ol>
+      </ol></li>
     <% end %>
   <% end %>
 </ol>