consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improves html structure for comments

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/stylesheets/layout.scss
View File

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

200
app/views/comments/_comment.html.erb
View File

@@ -1,105 +1,105 @@
<% 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 column">
<li class="comment-body">
<% if comment.hidden? || comment.user.hidden? %>
<% if comment.children.size > 0 %>
<div class="is-deleted">
<p><%= t("comments.comment.deleted") %></p>
</div>
<% end %>
<% else %>
<% if comment.as_administrator? %>
<%= image_tag("avatar_admin.png", size: 32, class: "admin-avatar float-left") %>
<% elsif comment.as_moderator? %>
<%= image_tag("avatar_moderator.png", size: 32, class: "moderator-avatar float-left") %>
<% else %>
<% if comment.user.hidden? || comment.user.erased? %>
<span class="icon-deleted user-deleted"></span>
<% elsif comment.user.organization? %>
<%= image_tag("avatar_collective.png", size: 32, class: "avatar float-left") %>
<% else %>
<%= avatar_image(comment.user, seed: comment.user_id, size: 32, class: "float-left") %>
<% end %>
<% end %>
<div class="comment-info">
<% if comment.as_administrator? %>
<span class="user-name"><%= t("comments.comment.admin") %> #<%= comment.administrator_id%></span>
<% elsif comment.as_moderator? %>
<span class="user-name"><%= t("comments.comment.moderator") %> #<%= comment.moderator_id%></span>
<% else %>
<% if comment.user.hidden? || comment.user.erased? %>
<span class="user-name"><%= t("comments.comment.user_deleted") %></span>
<% else %>
<span class="user-name"><%= link_to comment.user.name, user_path(comment.user) %></span>
<% if comment.user.display_official_position_badge? %>
&nbsp;&bull;&nbsp;
<span class="label round level-<%= comment.user.official_level %>">
<%= comment.user.official_position %>
</span>
<% end %>
<% end %>
<% if comment.user.verified_organization? %>
&nbsp;&bull;&nbsp;
<span class="label round is-association">
<%= t("shared.collective") %>
</span>
<% end %>
<% if comment.user_id == comment.commentable.author_id %>
&nbsp;&bull;&nbsp;
<span class="label round is-author">
<%= t("comments.comment.author") %>
</span>
<% end %>
<% end %>
&nbsp;&bull;&nbsp;<span><%= l comment.created_at.to_datetime, format: :datetime %></span>
</div>
<div class="comment-user
<%= user_level_class comment %>
<%= comment_author_class comment, comment.commentable.author_id %>">
<%= simple_format text_with_links(comment.body), {}, sanitize: false %>
</div>
<div id="<%= dom_id(comment) %>_reply" class="reply">
<div id="<%= dom_id(comment) %>_votes" class="comment-votes float-right">
<%= render 'comments/votes', comment: comment %>
</div>
<% if comment.children.size > 0 %>
<%= link_to "#{dom_id(comment)}", class: "js-toggle-children relative", data: {'id': "#{dom_id(comment)}"} do %>
<span class="sr-only js-child-toggle" style="display: none;"><%= t("shared.show") %></span>
<span class="sr-only js-child-toggle"><%= t("shared.hide") %></span>
<span id="<%= dom_id(comment) %>_children_arrow" class="icon-arrow-down"></span> <%= t("comments.comment.responses", count: comment.children.size) %>
<% end %>
<% else %>
<%= t("comments.comment.responses", count: 0) %>
<% end %>
<% if user_signed_in? %>
<span class="divider">&nbsp;|&nbsp;</span>
<%= link_to(comment_link_text(comment), "",
class: "js-add-comment-link", data: {'id': dom_id(comment)}) %>
<%= render 'comments/actions', comment: comment %>
<%= render 'comments/form', {commentable: comment.commentable, parent_id: comment.id, toggeable: true} %>
<% end %>
<ul id="<%= dom_id(comment) %>" class="comment no-bullet small-12">
<li class="comment-body">
<% if comment.hidden? || comment.user.hidden? %>
<% if comment.children.size > 0 %>
<div class="callout secondary">
<p><%= t("comments.comment.deleted") %></p>
</div>
<% end %>
</li>
<li>
<ul id="<%= dom_id(comment) %>_children" class="no-bullet comment-children">
<% child_comments_of(comment).each do |child| %>
<%= render 'comments/comment', comment: child %>
<% else %>
<% if comment.as_administrator? %>
<%= image_tag("avatar_admin.png", size: 32, class: "admin-avatar float-left") %>
<% elsif comment.as_moderator? %>
<%= image_tag("avatar_moderator.png", size: 32, class: "moderator-avatar float-left") %>
<% else %>
<% if comment.user.hidden? || comment.user.erased? %>
<span class="icon-deleted user-deleted"></span>
<% elsif comment.user.organization? %>
<%= image_tag("avatar_collective.png", size: 32, class: "avatar float-left") %>
<% else %>
<%= avatar_image(comment.user, seed: comment.user_id, size: 32, class: "float-left") %>
<% end %>
</ul>
</li>
</ul>
</div>
<% end %>
<div class="comment-info">
<% if comment.as_administrator? %>
<span class="user-name"><%= t("comments.comment.admin") %> #<%= comment.administrator_id%></span>
<% elsif comment.as_moderator? %>
<span class="user-name"><%= t("comments.comment.moderator") %> #<%= comment.moderator_id%></span>
<% else %>
<% if comment.user.hidden? || comment.user.erased? %>
<span class="user-name"><%= t("comments.comment.user_deleted") %></span>
<% else %>
<span class="user-name"><%= link_to comment.user.name, user_path(comment.user) %></span>
<% if comment.user.display_official_position_badge? %>
&nbsp;&bull;&nbsp;
<span class="label round level-<%= comment.user.official_level %>">
<%= comment.user.official_position %>
</span>
<% end %>
<% end %>
<% if comment.user.verified_organization? %>
&nbsp;&bull;&nbsp;
<span class="label round is-association">
<%= t("shared.collective") %>
</span>
<% end %>
<% if comment.user_id == comment.commentable.author_id %>
&nbsp;&bull;&nbsp;
<span class="label round is-author">
<%= t("comments.comment.author") %>
</span>
<% end %>
<% end %>
&nbsp;&bull;&nbsp;<span><%= l comment.created_at.to_datetime, format: :datetime %></span>
</div>
<div class="comment-user
<%= user_level_class comment %>
<%= comment_author_class comment, comment.commentable.author_id %>">
<%= simple_format text_with_links(comment.body), {}, sanitize: false %>
</div>
<div id="<%= dom_id(comment) %>_reply" class="reply">
<div id="<%= dom_id(comment) %>_votes" class="comment-votes float-right">
<%= render 'comments/votes', comment: comment %>
</div>
<% if comment.children.size > 0 %>
<%= link_to "#{dom_id(comment)}", class: "js-toggle-children relative", data: {'id': "#{dom_id(comment)}"} do %>
<span class="sr-only js-child-toggle" style="display: none;"><%= t("shared.show") %></span>
<span class="sr-only js-child-toggle"><%= t("shared.hide") %></span>
<span id="<%= dom_id(comment) %>_children_arrow" class="icon-arrow-down"></span> <%= t("comments.comment.responses", count: comment.children.size) %>
<% end %>
<% else %>
<%= t("comments.comment.responses", count: 0) %>
<% end %>
<% if user_signed_in? %>
<span class="divider">&nbsp;|&nbsp;</span>
<%= link_to(comment_link_text(comment), "",
class: "js-add-comment-link", data: {'id': dom_id(comment)}) %>
<%= render 'comments/actions', comment: comment %>
<%= render 'comments/form', {commentable: comment.commentable, parent_id: comment.id, toggeable: true} %>
<% end %>
</div>
<% end %>
</li>
<li>
<ul id="<%= dom_id(comment) %>_children" class="no-bullet comment-children">
<% child_comments_of(comment).each do |child| %>
<li>
<%= render 'comments/comment', comment: child %>
</li>
<% end %>
</ul>
</li>
</ul>
<% end %>

2
app/views/comments/_form.html.erb
View File

@@ -1,6 +1,6 @@
<% cache [locale_and_user_status, parent_id, commentable_cache_key(commentable)] do %>
<% 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| %>
<%= 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 %>