deblan/journalduhacker
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Implement comment folding in pure css

Browse source
This commit is contained in:
Agustin Borgna 2015-09-22 23:58:29 -03:00
parent 5567bb0b7e
commit 803a036a26
3 changed files with 19 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/javascripts/application.js.erb
View file

@ -297,24 +297,6 @@ $(document).ready(function() {
return Lobsters.moderateStory(this);
}),
$(document).on("click", "a.comment_folder", function() {
$(this).addClass("comment_unfolder").removeClass("comment_folder");
var comment = $(this).closest(".comment");
comment.addClass("collapsed");
comment.nextAll(".comments").each(function() {
$(this).addClass("collapsed");
});
});
$(document).on("click", "a.comment_unfolder", function() {
$(this).addClass("comment_folder").removeClass("comment_unfolder");
var comment = $(this).closest(".comment");
comment.removeClass("collapsed");
comment.nextAll(".comments").each(function() {
$(this).removeClass("collapsed");
});
});
$(document).on("click", "a.comment_replier", function() {
if (!Lobsters.curUser) {
Lobsters.bounceToLogin();

27
app/assets/stylesheets/application.css
View file

@ -379,15 +379,6 @@ ol.comments.comments1 {
border-left-color: transparent;
}
ol.comments.collapsed ol,
ol.comments.collapsed li {
display: none;
}
div.comment.collapsed div.comment_text,
div.comment.collapsed div.voters {
display: none;
}
ol.search_results {
margin-left: 20px;
margin-bottom: 0em;
@ -534,19 +525,31 @@ li .domain {
vertical-align: middle;
}
li .comment_folder,
li .comment_unfolder {
li input.comment_folder_button {
display: none;
}
li .comment_folder{
display: inline-block;
font-size: 9pt;
letter-spacing: 0.1em;
width: 1.4em;
cursor: pointer;
}
li .comment_folder:before {
content: "[-]";
}
li .comment_unfolder: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 {
display: none;
}
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 .byline {
color: #888;

7
app/views/comments/_comment.html.erb
View file

@ -1,3 +1,5 @@
<input id="comment_folder_<%= comment.short_id %>"
class="comment_folder_button" type="checkbox"/>
<div id="comment_<%= comment.short_id %>"
data-shortid="<%= comment.short_id if comment.persisted? %>"
class="comment <%= comment.current_vote ? (comment.current_vote[:vote] == 1 ?
@ -26,9 +28,8 @@ class="comment <%= comment.current_vote ? (comment.current_vote[:vote] == 1 ?
<div class="byline">
<a name="c_<%= comment.short_id %>"></a>
<% if @user %>
<a class="comment_folder"></a>
<% end %>
<label for="comment_folder_<%= comment.short_id %>"
class="comment_folder"></label>
<% if @user && @user.show_avatars? %>
<a href="/u/<%= comment.user.username %>"><img