From f9e0dad7a2545323d1e744d9ba6d99ff51e4a042 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Tue, 11 Aug 2015 12:00:54 +0200 Subject: [PATCH 1/2] Adds links on comments title --- app/assets/stylesheets/debates.scss | 15 ++++++++++++++- app/assets/stylesheets/participacion.scss | 8 ++++++++ app/assets/stylesheets/variables.scss | 6 +++--- app/views/debates/_debate.html.erb | 3 +-- app/views/debates/_featured_debate.html.erb | 3 +-- app/views/debates/show.html.erb | 4 ++-- 6 files changed, 29 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index 8e68dc5bb..188b3bee4 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -13,7 +13,7 @@ @mixin votes { border-top: 1px solid $votes-border; padding: rem-calc(14) rem-calc(12); - background: $votes-background; + background: $votes-bg; margin: 0 -12px; .icon-like { @@ -178,6 +178,10 @@ font-size: rem-calc(16); vertical-align: top; } + + a { + color: $text-light; + } } .debate-description { @@ -320,6 +324,10 @@ line-height: $line-height*2; text-align: justify; + a { + color: $text-light; + } + .bullet { color: $border; } @@ -369,6 +377,11 @@ display: inline-block; margin-top: $line-height; } + + .tags { + display: block; + margin-top: $line-height; + } } // 04. New diff --git a/app/assets/stylesheets/participacion.scss b/app/assets/stylesheets/participacion.scss index 09518ad23..7705a8372 100644 --- a/app/assets/stylesheets/participacion.scss +++ b/app/assets/stylesheets/participacion.scss @@ -73,6 +73,14 @@ p { margin-bottom: $line-height/2; } +a { + color: $link; + + &:hover { + color: $link-hover; + } +} + .button { padding: rem-calc(15) rem-calc(32); } diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index 6251d669d..74f0f2bfb 100644 --- a/app/assets/stylesheets/variables.scss +++ b/app/assets/stylesheets/variables.scss @@ -27,7 +27,7 @@ $comments-text: #3F4549; $header-color: #292B33; $link: #2895F1; -$link-hover: #2178BF; +$link-hover: #2178BF; $tags-bg: #FAFAFA; $tags-border: #F0F0F0; @@ -38,7 +38,7 @@ $text-medium: #999999; $text-light: #A3A6AD; $votes: #31708f; -$votes-background: #26AEEE; +$votes-bg: #26AEEE; $votes-border: #1F94CB; $votes-like: #7BD2A8; $votes-like-act: #5D9E7F; @@ -59,7 +59,7 @@ $success-bg: #DFF0D8; $success-border: #D6E9C6; $success-color: #3C763D; -$info-bg: #D9EDF7; +$info-bg: #D9EDF7; $info-border: #BCE8F1; $info-color: #31708F; diff --git a/app/views/debates/_debate.html.erb b/app/views/debates/_debate.html.erb index f31328ec9..207584fcb 100644 --- a/app/views/debates/_debate.html.erb +++ b/app/views/debates/_debate.html.erb @@ -9,8 +9,7 @@

<%= link_to debate.title, debate %>

  - <%= pluralize(debate.comment_threads.count, - t("debates.debate.comment"), t("debates.debate.comments")) %> + <%= link_to pluralize(debate.comment_threads.count, t("debates.debate.comment"), t("debates.debate.comments")), debate_path(debate, anchor: "comments") %>

<%= link_to debate.description, debate %> diff --git a/app/views/debates/_featured_debate.html.erb b/app/views/debates/_featured_debate.html.erb index 602b3d603..fc175fff8 100644 --- a/app/views/debates/_featured_debate.html.erb +++ b/app/views/debates/_featured_debate.html.erb @@ -8,8 +8,7 @@

<%= link_to featured_debate.title, featured_debate %>

  - <%= pluralize(featured_debate.comment_threads.count, - t("debates.show.comment"), t("debates.show.comments")) %> + <%= link_to pluralize(featured_debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")), debate_path(featured_debate, anchor: "comments") %>

<%= link_to featured_debate.description, featured_debate %> diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb index 642515185..9ec936163 100644 --- a/app/views/debates/show.html.erb +++ b/app/views/debates/show.html.erb @@ -4,11 +4,11 @@  <%= link_to t("debates.show.back_link"), debates_path, class: 'left back' %>
<%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %> - <%= @debate.author.name %> •  <%= l @debate.created_at.to_date %>  •  <%= pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %> + <%= @debate.author.name %> •  <%= l @debate.created_at.to_date %>  •  <%= link_to pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")), "#comments" %>

<%= @debate.title %>

<%= @debate.description %> -

<%= render 'shared/tags', debate: @debate %>

+ <%= render 'shared/tags', debate: @debate %>

<%= social_share_button_tag(@debate.title) %>

From d5c27b36d5fe5dc17120ea37ccfea78418080c76 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Tue, 11 Aug 2015 13:16:24 +0200 Subject: [PATCH 2/2] Improves styles for debate show and comments --- app/assets/stylesheets/debates.scss | 42 +++++++++++++++++++++++----- app/views/comments/_comment.html.erb | 40 ++++++++++++++------------ app/views/comments/_votes.html.erb | 16 ++++++++--- app/views/debates/show.html.erb | 14 ++++++---- 4 files changed, 78 insertions(+), 34 deletions(-) diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index 188b3bee4..3d59bf618 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -354,10 +354,17 @@ font-weight: bold; } + .sidebar { + border-top: 1px solid $border; + } + h3 { - border-bottom: 2px solid $votes-border; - font-size: rem-calc(18); - margin: 0; + border-top: 1px solid $votes-border; + display: inline-block; + font-family: $font-family-sans-serif; + font-size: rem-calc(16); + margin: -1px 0 rem-calc(12); + padding-top: rem-calc(6); text-transform: uppercase; } @@ -456,12 +463,24 @@ p { color: $comments-text; - font-size: rem-calc(15); margin-bottom: 0; } - a { + .comment-votes { color: $comments-info; + font-weight: lighter; + margin: rem-calc(15) rem-calc(6) 0; + + a { + color: $comments-info; + display: inline-block; + vertical-align: top; + } + + [class^="icon-"] { + font-size: rem-calc(20); + vertical-align: top; + } } .user-photo { @@ -469,7 +488,7 @@ display: inline-block; height: 32px; line-height: $line-height*2; - margin-right: $line-height/4; + margin-right: rem-calc(6); vertical-align: top; width: 32px; } @@ -478,13 +497,17 @@ margin-left: $line-height*1.6; .reply { + background: white; + border: 1px solid $border; font-size: rem-calc(12); font-weight: lighter; + margin: rem-calc(6) 0; + padding: rem-calc(6); } } .comment-children { - border-left: 1px dotted $border; + border-left: 1px dashed $border; margin-left: $line-height*1.6; padding-left: $line-height/4; @@ -498,6 +521,11 @@ font-size: rem-calc(13); font-weight: lighter; vertical-align: middle; + + span { + color: $text-color; + font-weight: bold; + } } } } \ No newline at end of file diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 6e4e02f19..f8eb903a2 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,25 +1,29 @@
-
+
- <%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %> + <%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %> -
- - <%= comment.user.name %> • <%= time_ago_in_words(comment.created_at) %> - -

<%= comment.body %>

+
+ + <%= comment.user.name %> • <%= time_ago_in_words(comment.created_at) %> + +

<%= comment.body %>

- - <%= render 'comments/votes', comment: comment %> - + + <%= render 'comments/votes', comment: comment %> + - <% if user_signed_in? %> -

<%= render 'comments/form', {parent: comment, toggeable: true} %>

- <% end %> -
+

+ númerototal respuestas + <% if user_signed_in? %> +  |  + <%= render 'comments/form', {parent: comment, toggeable: true} %>

+ <% end %> +
-
- <%= render comment.children %> -
-
+
+ <%= render comment.children %> +
+ +
\ No newline at end of file diff --git a/app/views/comments/_votes.html.erb b/app/views/comments/_votes.html.erb index 2f92ff246..4763388b3 100644 --- a/app/views/comments/_votes.html.erb +++ b/app/views/comments/_votes.html.erb @@ -1,11 +1,19 @@ + + númerototal votos + + |  - <%= link_to "up", vote_comment_path(comment, value: 'yes'), - method: "post", remote: true %> + <%= link_to vote_comment_path(comment, value: 'yes'), + method: "post", remote: true do %> + + <% end %> <%= comment.get_likes.size %> - <%= link_to "down", vote_comment_path(comment, value: 'no'), - method: "post", remote: true %> + <%= link_to vote_comment_path(comment, value: 'no'), + method: "post", remote: true do %> + + <% end %> <%= comment.get_dislikes.size %> \ No newline at end of file diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb index 9ec936163..d10d0e022 100644 --- a/app/views/debates/show.html.erb +++ b/app/views/debates/show.html.erb @@ -2,17 +2,22 @@
 <%= link_to t("debates.show.back_link"), debates_path, class: 'left back' %> +

<%= @debate.title %>

+
<%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %> <%= @debate.author.name %> •  <%= l @debate.created_at.to_date %>  •  <%= link_to pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")), "#comments" %>
-

<%= @debate.title %>

+ <%= @debate.description %> + <%= render 'shared/tags', debate: @debate %> +

<%= social_share_button_tag(@debate.title) %>

-
+
@@ -45,4 +49,4 @@ <%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), :class => 'button radius right' %> <% end %>
- + \ No newline at end of file