Adds styles for comment as moderator

app/assets/stylesheets/debates.scss

@@ -567,6 +567,11 @@
           background: $comment-author;
           padding: rem-calc(6) rem-calc(12);
         }
+
+        &.is-moderator {
+          background: $comment-moderator;
+          padding: rem-calc(6) rem-calc(12);
+        }
       }
     }
 

app/assets/stylesheets/participacion.scss

@@ -548,19 +548,19 @@ form {
     line-height: $line-height;
   }
 
-  input[type]:not([type=submit]):not([type=file]) {
+  input[type]:not([type=submit]):not([type=file]):not([type=checkbox]) {
     background: $input-bg;
     height: rem-calc(48);
     margin-bottom: rem-calc(16);
   }
 
-  input[type="checkbox"] {
-    height: rem-calc(24) !important;
-    margin: 0 !important;
+  input[type="checkbox"] + label,
+  input[type="radio"] + label {
+    margin-right: 0;
   }
 
   input[type=file] {
-    margin: rem-calc(12) 0;
+    margin: rem-calc(12) 0 rem-calc(12) rem-calc(6);
   }
 
   .note {
@@ -579,8 +579,7 @@ form {
     font-size: rem-calc(14);
     font-weight: normal;
     line-height: $line-height;
-    margin: 0 0 0 rem-calc(6);
-    vertical-align: top;
+    vertical-align: middle;
   }
 
   .captcha {
@@ -591,6 +590,10 @@ form {
       margin-bottom: 0 !important;
     }
   }
+
+  .button.margin-top {
+    margin-top: rem-calc(24);
+  }
 }
 
 // 09. Alerts
@@ -689,11 +692,15 @@ form {
   }
 }
 
-img.initialjs-avatar, img.avatar {
+img.moderator-avatar {
   border-radius: rem-calc(1000);
   position: relative;
 }
 
+img.initialjs-avatar {
+  @extend .moderator-avatar;
+}
+
 .author-deleted {
   background-color: rgba(255,255,255,.5);
   color: rgba(0,0,0,.4);

app/assets/stylesheets/variables.scss

@@ -77,8 +77,9 @@ $author:            #008CCF;
 $association:       #C0392B;
 
 $comment-author:    rgba(45,144,248,.15);
-$comment-official:  rgba(70,219,145,.3);
 $comment-level-5:   rgba(255,241,204,1);
+$comment-moderator: rgba(45,144,248,.15);
+$comment-official:  rgba(70,219,145,.3);
 
 // 06. Responsive
 // - - - - - - - - - - - - - - - - - - - - - - - - -

app/views/comments/_comment.html.erb

@@ -13,14 +13,26 @@
       <% if comment.user.hidden? %>
         <i class="icon-deleted user-deleted"></i>
       <% end %>
-
+<!--
+      <% if comment.user.moderator? %> <!-- AND has activated CHECKBOX comment as moderator ->
+        <%= image_tag('moderator_avatar.png', size: 32, class: "moderator-avatar left") %>
+      <% else %>
+        <%= avatar_image(comment.user, size: 32, class: "left") %>
+      <% end %>
+-->
       <div class="comment-body">
         <div class="comment-info">
 
           <% if comment.user.hidden? %>
             <span class="user-name"><%= t("debates.comment.user_deleted") %></span>
           <% else %>
-            <span class="user-name"><%= comment.user.name %></span>
+
+            <% if comment.user.moderator? %> <!-- AND activate moderator CHECKBOX -->
+              <span class="user-name"><%= t("debates.comment.moderator") %></span>
+            <% else %>
+              <span class="user-name"><%= comment.user.name %></span>
+            <% end %>
+
             <% if comment.user.official? %>
               &nbsp;&bullet;&nbsp;
               <span class="label round level-<%= comment.user.official_level %>">
@@ -52,6 +64,8 @@
           <p class="comment-user level-<%= comment.user.official_level %> is-author"><%= comment.body %></p>
         <% elsif comment.user.official? %>
           <p class="comment-user level-<%= comment.user.official_level %>"><%= comment.body %></p>
+        <% elsif comment.user.moderator? %> <!-- AND has activated CHECKBOX comment as moderator & all badges are hidden (100% anonymous) -->
+          <p class="comment-user is-moderator"><%= comment.body %></p>
         <% elsif comment.user_id == @debate.author_id %>
           <p class="comment-user is-author"><%= comment.body %></p>
         <% else %>
@@ -83,6 +97,5 @@
       <div class="comment-children">
         <%= render comment.children.with_hidden.reorder('id DESC, lft') %>
       </div>
-
   </div>
 </div>

app/views/comments/_form.html.erb

@@ -4,6 +4,13 @@
     <%= 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 small" %>
+    <%= f.submit comment_button_text(parent), class: "button radius small inline-block" %>
+
+    <!-- if user is moderator
+    <div class="right">
+      <%#= f.check_box :, label: false %>
+      <%#= f.label :, t("comments.form.comment_as_moderator"), class: "checkbox" %>
+    </div>
+    end -->
   <% end %>
 </div>

config/locales/en.yml

@@ -49,6 +49,7 @@ en:
         other: "%{count} votes"
     comment:
       author: Debate's author
+      moderator: Moderator
       deleted: This comment has been deleted
       user_deleted: Deleted user
       responses:
@@ -94,7 +95,8 @@ en:
       recommendation_three: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
   comments:
     form:
-        leave_comment: Write a comment
+      leave_comment: Write a comment
+      comment_as_moderator: Comentar como moderador
   comments_helper:
     comment_link: Comment
     comment_button: Publish comment

config/locales/es.yml

@@ -49,6 +49,7 @@ es:
         other: "%{count} votos"
     comment:
       author: Autor del debate
+      moderator: Moderador
       deleted: Este comentario ha sido eliminado
       user_deleted: Usuario eliminado
       responses:
@@ -94,7 +95,8 @@ es:
       recommendation_three: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore"
   comments:
     form:
-        leave_comment: Deja tu comentario
+      leave_comment: Deja tu comentario
+      comment_as_moderator: Comentar como moderador
   comments_helper:
     comment_link: Comentar
     comment_button: Publicar comentario