Fix broken downvote menu on bad comments (lobsters#432)

* Fix broken downvote menu on bad comments

The reduced opacity on a comment with the 'bad'-class affects the
stacking order of its child elements and breaks the downvote menu. To
remedy this, the downvote menu is placed outside of the non-opaque
comment element.

* Increase z-index of #downvote_why

The lower end of the comment icon in the mobile style sheet had a higher
z-index and ended up in front of the downvote menu.

app/assets/javascripts/application.js.erb

@@ -115,22 +115,25 @@ var _Lobsters = Class.extend({
       d.append(a);
     });
 
-    if (thingType == "story")
-      li.after(d);
-    else
+    if (thingType == "story") {
       $(voterEl).after(d);
-
-    d.position({
-      my: "left top",
-      at: "left bottom",
-      offset: "-2 -2",
-      of: $(voterEl),
-      collision: "none",
-    });
-
-    /* XXX: why is this needed? */
-    if (thingType == "story")
+      d.position({
+        my: "left top",
+        at: "left bottom",
+        offset: "-2 -2",
+        of: $(voterEl),
+        collision: "none",
+      });
       d.css("left", $(voterEl).position().left);
+    } else {
+      // place downvote menu outside of the comment to avoid inheriting opacity
+      var voterPos = $(voterEl).position();
+      d.appendTo($(voterEl).closest(".comments_subtree"));
+      d.css({
+        left: voterPos.left,
+        top: voterPos.top + $(voterEl).outerHeight()
+      });
+    }
   },
 
   vote: function(thingType, voterEl, point, reason) {

app/assets/stylesheets/application.css

@@ -822,7 +822,7 @@ a.pagelink.curpage {
 	width: 100px;
 	border: 1px solid #ccc;
 	border-bottom: 0;
-	z-index: 2;
+	z-index: 15;
 }
 #downvote_why a {
 	background-color: white;