From d8d03604b98ab9bba3a1eb1605d18e2a396f1bb6 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Thu, 30 Jul 2015 13:59:35 +0200 Subject: [PATCH] Adds styles for comments --- app/assets/images/comments_divider.png | Bin 0 -> 1537 bytes app/assets/images/user_default_2.jpg | Bin 0 -> 1703 bytes app/assets/stylesheets/debates.scss | 84 +++++++++++++++++++++---- app/views/comments/_comment.html.erb | 27 ++++---- app/views/comments/_form.html.erb | 2 +- app/views/debates/show.html.erb | 8 ++- 6 files changed, 95 insertions(+), 26 deletions(-) create mode 100644 app/assets/images/comments_divider.png create mode 100644 app/assets/images/user_default_2.jpg diff --git a/app/assets/images/comments_divider.png b/app/assets/images/comments_divider.png new file mode 100644 index 0000000000000000000000000000000000000000..1d2bffd9b83291c0730c5ea7edcf5d6c67e5367e GIT binary patch literal 1537 zcmeAS@N?(olHy`uVBq!ia0vp^u|Ukm!3HE3T1@&5q$EpRBT9nv(@M${i&7aJQ}UBi z6+Ckj(^G>|6H_V+Po~;1FfeOmhD4M^`1)8S=jZArg4F0$^BXQ!4Z zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Keo|$g4ftk62xuu?= zskym{xsHO7fuX6sfw8`^fv%CUm5G6siID;nC;@FNN=dT{a&d#&1?1T(Wt5Z@Sn2DR zmzV368|&p4rRy77T3YHG80i}s=>k>g7FXt#Bv$C=6)VF`a7isrF3Kz@$;{7F0GXJW zlwVq6s|0i@#0$9vaAWg|p}_L?onmQS}I=LDc zm>D}+8kkr*o5A$DF%IFnd9d(DvvixH6^HZMurM(;bpqb;y62oS8tK8K&Rlk?3b&a@pBxW zdWAD$c{9Dyt+sUGS>Y0z-)r{o&-#h$K z7k+5gxt!T@sOo2-rM-*zHiIv$cS%g zn(s%kZaSm(!q-F<&1dp5lTbDC;=xcMPE4&lT+@w>ZB6RcElRnc! zsc{|g?G?Z7=V>3hdP|40k;} z(NUkTHYbD4AZqP3=g=KDt}?!;7hO1i#Uar+pKB{ZwDLlCc;-%H-73GD$^Yc}%}atb z#l>zi$BLa@WGK~ptTxgjeT$r}+BOZ1r9{F^Txkz`Lhs7;x)#uh z&S?Z8TjH{0E+bpwV3;wK1qy;cQ3?CWRAQI|lrb_leq?hPP;}g`9X~FS#W%U+``-6? zp7;IU@BNOw$qs`x8D63YfXvLzKnRwMod6=e+ge-(ARyq}HUQXRK4xbarv^nym&{_L z3UQg0a-d#|6UAh56eOp5ofc~`&cKEEZi3Vzf1Ev!z=TbU>`)rzMyC$96I;t^Jhyzi z*;-y~Rojr%6gb(d@j9FioUy=OM+xcDc(q7CT*IyXZWMt75T;m*r1`VL`NnKmN6|Q} zlqE^6@+1|kQp+%qQDfG z%Ai(c=nNQ^p-jgz(lg}pq=a;}JW;JnTHxv_tJ{H-%mUZ8#7$e4>mLY*lgq5fY2q#1 zW}qnt95}d!SiTn3vU>Ae+w!$+S(b}(#i0J{ed4+oT-*%#my5&8Z5GELC%KuYx#4Cf zL0Dj9f$akKh#+Lth)S~{g^@uyr6x&qa0uHER&kklBEATug8pb;RdQv0 zr8z6D=~RvcsTl0}#abu1eO+8aR8$WcPS-rQkvPWFJ@@X%rq2~1XVAZ{ z`=CcheIGYCYqKX5KbQYLxNGf;BkE+Gdv#yu-rBCVb>ep-;*N-E;Z$Gs?7FsLN&UW5 zv-^$SD|H`6raayl#e&(d<)T}@meS#iF&8i8HnZShfq3oY>$|Et#%`t&oh-;7t*-9P zz2u46SC^Has_uJi+j@or_ZuWkZ;RJcMDjO~+ zd%FV}3!NBh>d5_SR(DFV({%Mn|C!FVFPq2jU*hacSVz~{n}wuo@Luf`wD$Z3?B~d9&c@_IfVSW|3*&s-3QcZ^N+fQO5PXk z>E^n3!}<|@T=Pt?>7>2)KoCzh-gvYprKmBPxA{hnc@Oe!L!)%7GDS}ryZaILr+)y9 C7$`~r literal 0 HcmV?d00001 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 %>