improves html structure for comments

This commit is contained in:
Alberto Garcia Cabeza
2016-12-28 14:36:06 +01:00
parent 5ffce7fb05
commit 3b28b56c5c
3 changed files with 110 additions and 117 deletions

View File

@@ -1065,10 +1065,6 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
background: #C0392B; background: #C0392B;
} }
.is-deleted {
background: #E7E7E7;
}
.level-1 { .level-1 {
background: #1ABC9C; background: #1ABC9C;
} }
@@ -1657,20 +1653,12 @@ table {
} }
} }
.is-deleted {
background: #E7E7E7;
margin-left: $line-height;
padding: $line-height/2;
}
.comment-children { .comment-children {
border-left: 1px dashed $border; border-left: 1px dashed $border;
margin-left: $line-height; display: inline-block;
padding-left: $line-height/4;
@media only screen and (max-width: 40em) {
margin-left: rem-calc(16); margin-left: rem-calc(16);
} padding-left: rem-calc(8);
width: 100%;
} }
.comment-info { .comment-info {
@@ -1710,6 +1698,11 @@ table {
} }
} }
.comment-form {
display: inline-block;
width: 100%;
}
// 16. Flags // 16. Flags
// --------- // ---------

View File

@@ -1,10 +1,9 @@
<% cache [locale_and_user_status(comment), comment, commentable_cache_key(comment.commentable), comment.author, (@comment_flags[comment.id] if @comment_flags)] do %> <% cache [locale_and_user_status(comment), comment, commentable_cache_key(comment.commentable), comment.author, (@comment_flags[comment.id] if @comment_flags)] do %>
<div class="row"> <ul id="<%= dom_id(comment) %>" class="comment no-bullet small-12">
<ul id="<%= dom_id(comment) %>" class="comment no-bullet small-12 column">
<li class="comment-body"> <li class="comment-body">
<% if comment.hidden? || comment.user.hidden? %> <% if comment.hidden? || comment.user.hidden? %>
<% if comment.children.size > 0 %> <% if comment.children.size > 0 %>
<div class="is-deleted"> <div class="callout secondary">
<p><%= t("comments.comment.deleted") %></p> <p><%= t("comments.comment.deleted") %></p>
</div> </div>
<% end %> <% end %>
@@ -96,10 +95,11 @@
<li> <li>
<ul id="<%= dom_id(comment) %>_children" class="no-bullet comment-children"> <ul id="<%= dom_id(comment) %>_children" class="no-bullet comment-children">
<% child_comments_of(comment).each do |child| %> <% child_comments_of(comment).each do |child| %>
<li>
<%= render 'comments/comment', comment: child %> <%= render 'comments/comment', comment: child %>
</li>
<% end %> <% end %>
</ul> </ul>
</li> </li>
</ul> </ul>
</div>
<% end %> <% end %>

View File

@@ -1,6 +1,6 @@
<% cache [locale_and_user_status, parent_id, commentable_cache_key(commentable)] do %> <% cache [locale_and_user_status, parent_id, commentable_cache_key(commentable)] do %>
<% css_id = parent_or_commentable_dom_id(parent_id, commentable) %> <% css_id = parent_or_commentable_dom_id(parent_id, commentable) %>
<div id="js-comment-form-<%= css_id %>" <%= "style='display:none'".html_safe if toggeable %>> <div id="js-comment-form-<%= css_id %>" <%= "style='display:none'".html_safe if toggeable %> class="comment-form">
<%= form_for Comment.new, remote: true do |f| %> <%= form_for Comment.new, remote: true do |f| %>
<%= label_tag "comment-body-#{css_id}", t("comments.form.leave_comment") %> <%= label_tag "comment-body-#{css_id}", t("comments.form.leave_comment") %>
<%= f.text_area :body, id: "comment-body-#{css_id}", maxlength: Comment.body_max_length, label: false %> <%= f.text_area :body, id: "comment-body-#{css_id}", maxlength: Comment.body_max_length, label: false %>