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); 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() { $(document).on("click", "a.comment_replier", function() {
if (!Lobsters.curUser) { if (!Lobsters.curUser) {
Lobsters.bounceToLogin(); Lobsters.bounceToLogin();

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

@ -379,15 +379,6 @@ ol.comments.comments1 {
border-left-color: transparent; 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 { ol.search_results {
margin-left: 20px; margin-left: 20px;
margin-bottom: 0em; margin-bottom: 0em;
@ -534,19 +525,31 @@ li .domain {
vertical-align: middle; vertical-align: middle;
} }
li .comment_folder, li input.comment_folder_button {
li .comment_unfolder { display: none;
}
li .comment_folder{
display: inline-block; display: inline-block;
font-size: 9pt; font-size: 9pt;
letter-spacing: 0.1em; letter-spacing: 0.1em;
width: 1.4em; width: 1.4em;
cursor: pointer;
} }
li .comment_folder:before { li .comment_folder:before {
content: "[-]"; content: "[-]";
} }
li .comment_unfolder:before { li .comment_folder_button:checked ~ .comment .comment_folder:before {
content: "[+]"; 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 { li .byline {
color: #888; 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 %>" <div id="comment_<%= comment.short_id %>"
data-shortid="<%= comment.short_id if comment.persisted? %>" data-shortid="<%= comment.short_id if comment.persisted? %>"
class="comment <%= comment.current_vote ? (comment.current_vote[:vote] == 1 ? 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"> <div class="byline">
<a name="c_<%= comment.short_id %>"></a> <a name="c_<%= comment.short_id %>"></a>
<% if @user %> <label for="comment_folder_<%= comment.short_id %>"
<a class="comment_folder"></a> class="comment_folder"></label>
<% end %>
<% if @user && @user.show_avatars? %> <% if @user && @user.show_avatars? %>
<a href="/u/<%= comment.user.username %>"><img <a href="/u/<%= comment.user.username %>"><img