Adds styles for comments

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;

app/views/comments/_comment.html.erb

@@ -1,13 +1,18 @@
-<div id="comment-<%= comment.id %>" class='comment' style="padding-bottom:30px">
+<div class="row">
-  <p><%= comment.user.name %></p>
+	<div id="comment-<%= comment.id %>" class="small-12 column comment">
-  <p>hace <%= time_ago_in_words(comment.created_at) %></p>
-  <p><%= comment.body %></p>
 
-  <div style="margin-left:50px">
+		<%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %>
-    <%= render comment.children %>
+
-  </div>
+	 	<div class="comment-body">
-  
+	 		<span class="comment-info">
-  <div style="margin-left:50px">
+	 			<%= comment.user.name %>&nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
-    <%= render 'comments/form', parent: comment %>
+	 		</span>
-  </div>
+	  		<p><%= comment.body %></p>
+	  		<p class="reply"><%= render 'comments/form', parent: comment %></p>
+	  	</div>
+
+	  	<div class="comment-children">
+	    	<%= render comment.children %>
+	  	</div>
+	</div>
 </div>

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 %>
 </div>

app/views/debates/show.html.erb

@@ -4,7 +4,7 @@
 
         <div class="small-12 medium-9 column">
 
-            <%= link_to "&lt;&nbsp;".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %>
+            <%= link_to "&laquo;&nbsp;".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %>
 
             <h1><%= @debate.title %></h1>
             <div class="debate-info">
@@ -40,6 +40,10 @@
                 <p class="total-votes"><%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %></p>
             </div>
         </div>
+
+        <div class="small-12 medium-3 column text-center publish-comment">
+        <%= link_to t("debates.show.leave_comment"), "#comments", :class => 'button radius expand' %>
+        </div>
     </div>
 </section>
 
@@ -47,7 +51,7 @@
     <div class="row">
         <div id="comments" class="small-12 column">
             <h2><%= t("debates.show.comments") %></h2>
-                <div style="padding-bottom:60px">
+                <div>
                     <%= t("debates.show.leave_comment") %>
                     <%= render 'comments/form', parent: @debate %>
                 </div>