diff --git a/app/assets/images/comments_divider.png b/app/assets/images/comments_divider.png new file mode 100644 index 000000000..1d2bffd9b Binary files /dev/null and b/app/assets/images/comments_divider.png differ diff --git a/app/assets/images/user_default_2.jpg b/app/assets/images/user_default_2.jpg new file mode 100644 index 000000000..ed164ab57 Binary files /dev/null and b/app/assets/images/user_default_2.jpg differ diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index d99c589f8..d25beb53f 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -8,7 +8,7 @@ // 05.1. Debates Index // 05.2. Debates Show // 06. Comments -// 06. Tags +// 07. Tags // // 01. Variables @@ -24,6 +24,9 @@ $brand: #0077B9; $debates: #008CCF; $comments-bg: #FAF9F8; +$comments-info: #A5B2B9; +$comments-text: #3F4549; + $header-color: #292B33; $link: #0077B9; @@ -33,7 +36,7 @@ $tags-border: #F0F0F0; $tags-color: #8F8F8F; $text-color: #919399; -$text-medium: #999999; +$text-medium: #999999; $text-light: #a3a6ad; $votes-background: #EDEDED; @@ -92,7 +95,7 @@ header { } h1 { - color: white; + color: white; font-size: rem-calc(45); font-weight: bolder; line-height: $line-height*3; @@ -231,7 +234,7 @@ header { margin-bottom: $line-height; } } - + .votes { background: $votes-background; margin: -5px -20px -20px -20px; @@ -291,15 +294,16 @@ header { .debate-show { color: $text-medium; margin-top: $line-height; - padding: 0 $line-height/2; + margin-bottom: $line-height*2; + padding: 0 $line-height/2; .back { color: $text-light; font-size: rem-calc(13); line-height: $line-height; - } + } - h1 { + h1 { clear: both; font-size: rem-calc(24); font-weight: bold; @@ -323,7 +327,7 @@ header { font-size: rem-calc(14); line-height: $line-height; margin-bottom: 0; - } + } } .author-photo { @@ -335,13 +339,13 @@ header { vertical-align: middle; width: 32px; } - + .votes { border: 1px solid $votes-border; box-shadow: 0 2px 0 rgba(0,0,0,.1); border-radius: 3px; padding: $line-height/2; - + .fi-like { background: $votes-like; border: 1px solid $votes-like-b; @@ -398,6 +402,10 @@ header { width: 1px; } } + + .publish-comment { + margin-top: $line-height; + } } // 06. Comments @@ -405,19 +413,71 @@ header { .comments { background: $comments-bg; - margin-top: $line-height*2; + background-image: url('comments_divider.png'); + background-repeat: repeat-x; padding-top: $line-height; + padding-bottom: $line-height*4; h2 { margin: 0; font-weight: bold; } + + .comment { + margin: $line-height/4 0; + + p { + color: $comments-text; + font-size: rem-calc(15); + margin-bottom: 0; + } + + a { + color: $comments-info; + } + + .user-photo { + border-radius: 2px; + display: inline-block; + height: 32px; + line-height: $line-height*2; + margin-right: $line-height/4; + vertical-align: top; + width: 32px; + } + + .comment-body { + margin-left: $line-height*1.6; + + .reply { + font-size: rem-calc(12); + font-weight: lighter; + } + } + + .comment-children { + border-left: 1px dotted $border; + margin-left: $line-height*1.6; + padding-left: $line-height/4; + + @media only screen and (max-width: 40em) { + margin-left: $line-height/1.5; + } + } + + .comment-info { + color: $comments-info; + font-size: rem-calc(13); + font-weight: lighter; + vertical-align: middle; + } + } } // 07. Tags // - - - - - - - - - - - - - - - - - - - - - - - - - -.tags a { +.tags a { background: $tags-bg; border: 1px solid $tags-border; border-radius: 3px; diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index a27a689c9..0d152d928 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,13 +1,18 @@ -
-

<%= comment.user.name %>

-

hace <%= time_ago_in_words(comment.created_at) %>

-

<%= comment.body %>

+
+
-
- <%= render comment.children %> -
- -
- <%= render 'comments/form', parent: comment %> -
+ <%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %> + +
+ + <%= comment.user.name %> • <%= time_ago_in_words(comment.created_at) %> + +

<%= comment.body %>

+

<%= render 'comments/form', parent: comment %>

+
+ +
+ <%= render comment.children %> +
+
\ No newline at end of file diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 5361b50fb..dc2ad3a13 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -6,6 +6,6 @@ <%= f.hidden_field :commentable_type, value: parent.class %> <%= f.hidden_field :commentable_id, value: parent.id %> - <%= f.submit comment_button_text(parent), class: "button radius" %> + <%= f.submit comment_button_text(parent), class: "button radius small" %> <% end %>
diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb index 4f91fbe96..b7007a1d0 100644 --- a/app/views/debates/show.html.erb +++ b/app/views/debates/show.html.erb @@ -4,7 +4,7 @@
- <%= link_to "< ".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %> + <%= link_to "« ".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %>

<%= @debate.title %>

@@ -40,6 +40,10 @@

<%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>

+ +
+ <%= link_to t("debates.show.leave_comment"), "#comments", :class => 'button radius expand' %> +
@@ -47,7 +51,7 @@

<%= t("debates.show.comments") %>

-
+
<%= t("debates.show.leave_comment") %> <%= render 'comments/form', parent: @debate %>