Adds styles for comments

app/assets/stylesheets/debates.scss

@@ -532,21 +532,33 @@
     }
 
     .comment-body {
-      margin-left: rem-calc(36);
+      margin-left: rem-calc(42);
 
       .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-user {
+        margin-top: rem-calc(6);
+        padding: rem-calc(6) rem-calc(12);
+
+        &.official {
+          background: $comment-official;
+        }
+
+        &.author {
+          background: $comment-author;
+        }
+      }
     }
 
     .comment-children {
       border-left: 1px dashed $border;
-      margin-left: rem-calc(36);
+      margin-left: rem-calc(42);
       padding-left: rem-calc(6);
 
       @media only screen and (max-width: 40em) {
@@ -558,9 +570,10 @@
       color: $text-light;
       font-size: rem-calc(13);
       font-weight: lighter;
+      margin-top: rem-calc(6);
       vertical-align: middle;
 
-      span {
+      span.user-name {
         color: $text;
         font-weight: bold;
       }

app/assets/stylesheets/participacion.scss

@@ -587,6 +587,10 @@ form {
   }
 }
 
+img.initialjs-avatar {
+  border-radius: rem-calc(1000);
+}
+
 // 11. Filters
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -623,8 +627,12 @@ form {
 // 12. Officials levels
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.level-0 {
-  background: $level-0;
+[class^="level-"] {
+  color: white;
+}
+
+.author-debate {
+  background: $author-debate;
 }
 
 .level-1 {

app/assets/stylesheets/variables.scss

@@ -4,6 +4,7 @@
 // 02. Colors
 // 03. Forms
 // 04. Alerts
+// 05. Levels
 //
 
 // 01. Fonts
@@ -38,13 +39,6 @@ $votes-unlike-act:  #BD6A6A;
 
 $check:             #46DB91;
 
-$level-0:           #F08A24;
-$level-1:           #43AC6A;
-$level-2:           #43AC6A;
-$level-3:           #43AC6A;
-$level-4:           #43AC6A;
-$level-5:           #43AC6A;
-
 // 03. Forms
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -68,3 +62,17 @@ $warning-color:     #8A6D3B;
 $alert-bg:          #F2DEDE;
 $alert-border:      #EBCCD1;
 $alert-color:       #A94442;
+
+// 05. Levels
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+$level-1:           #43AC6A;
+$level-2:           #43AC6A;
+$level-3:           #43AC6A;
+$level-4:           #43AC6A;
+$level-5:           #F08A24;
+
+$author-debate:     $debates;
+
+$comment-author:    rgba(45,144,248,.15);
+$comment-official:  rgba(255,241,204,1);

app/views/comments/_comment.html.erb

@@ -8,11 +8,29 @@
       <%= avatar_image(comment.user, size: 32, class: 'left') %>
 
       <div class="comment-body">
-        <span class="comment-info">
-          <span><%= comment.user.name %></span>&nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
-        </span>
-        <p><%= comment.body %></p>
+        <div class="comment-info">
+          <span class="user-name"><%= comment.user.name %></span>
+          &nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
+          <!-- if user is official (change level-X CSS class) -->
+            &nbsp;&bullet;&nbsp;
+            <span class="label round level-1">
+              Cargo oficial
+            </span>
+          <!-- if user is debate's author -->
+            &nbsp;&bullet;&nbsp;
+            <span class="label round author-debate">
+              <%= t("debates.comment.author") %>
+            </span>
+          <!-- end -->
+        </div>
 
+        <!-- if user is official -->
+          <p class="comment-user official"><%= comment.body %></p>
+        <!-- elsif user is author -->
+          <p class="comment-user author"><%= comment.body %></p>
+        <!-- else -->
+          <p class="comment-user"><%= comment.body %></p>
+        <!-- end -->
         <span id="<%= dom_id(comment) %>_votes" class="comment-votes right">
           <%= render 'comments/votes', comment: comment %>
         </span>

config/locales/en.yml

@@ -50,6 +50,7 @@ en:
         one: 1 vote
         other: "%{count} votes"
     comment:
+      author: Debate's author
       deleted: This comment has been deleted
       responses:
         zero: No Responses

config/locales/es.yml

@@ -50,6 +50,7 @@ es:
         one: 1 voto
         other: "%{count} votos"
     comment:
+      author: Autor del debate
       deleted: Este comentario ha sido eliminado
       responses:
         zero: Sin respuestas