Merge pull request #202 from AyuntamientoMadrid/deleted_user_comment

Deleted user comment

app/assets/fonts/icons.svg

@@ -25,4 +25,6 @@
 <glyph unicode="&#113;" d="M329 256c0 20-7 37-21 52-15 14-32 21-52 21-20 0-37-7-52-21-14-15-21-32-21-52 0-20 7-37 21-52 15-14 32-21 52-21 20 0 37 7 52 21 14 15 21 32 21 52z m146 31l0-63c0-3 0-5-2-7-1-2-3-3-6-4l-52-8c-4-10-8-19-12-26 7-9 17-22 31-39 2-2 3-5 3-7 0-3-1-5-3-7-5-7-14-17-28-31-14-13-23-20-27-20-2 0-5 1-7 3l-40 31c-8-5-17-8-26-11-3-26-6-44-8-53-1-6-5-8-10-8l-64 0c-2 0-5 0-7 2-2 2-3 4-3 6l-8 53c-9 3-18 6-26 10l-40-30c-2-2-4-3-7-3-3 0-5 1-7 3-24 22-40 38-47 48-2 2-2 4-2 7 0 2 0 4 2 6 3 4 8 11 14 19 7 9 12 16 16 21-5 9-9 19-12 28l-52 8c-3 0-5 1-6 3-2 2-2 4-2 7l0 63c0 3 0 5 2 7 1 2 3 3 5 4l53 8c3 8 7 17 12 26-8 11-18 24-31 39-2 3-3 5-3 7 0 2 1 4 3 7 5 7 14 17 28 30 14 14 23 21 27 21 2 0 5-1 7-3l40-31c8 5 17 8 26 11 3 26 6 44 8 53 1 6 5 8 10 8l64 0c2 0 5 0 7-2 2-2 3-4 3-6l8-53c9-3 18-6 26-10l40 30c2 2 4 3 7 3 3 0 5-1 7-3 25-23 41-39 47-49 2-1 2-3 2-6 0-2 0-4-2-6-3-4-8-11-14-19-7-9-12-16-16-21 5-9 9-18 12-28l52-8c3 0 5-1 6-3 2-2 2-4 2-7z"/>
 <glyph unicode="&#114;" d="M17 222c-14 4-20 13-16 29 3 14 12 20 27 16 0 0 50-12 50-12 0 0-26-41-26-41 0 0-35 8-35 8m455-6c4 4 10 6 16 6 7-1 12-3 16-8 11-11 11-22-1-33 0 0-128-115-128-115-5-4-10-6-16-6-5 0-9 2-14 5 0 0-146 112-146 112 0 0-28 8-28 8 0 0 26 40 26 40 0 0 18-4 18-4 4-1 7-2 8-4 0 0 135-104 135-104 0 0 114 103 114 103m-251 112c0 0-178-280-178-280-4-8-11-12-20-12-4 0-8 2-12 5-5 3-9 8-10 14-1 7 0 12 3 17 0 0 191 300 191 300 3 6 7 9 14 11 6 2 12 1 19-3 0 0 125-80 125-80 0 0 115 166 115 166 4 6 9 9 15 10 6 1 12-1 17-5 13-8 15-18 6-31 0 0-128-185-128-185-9-12-19-14-32-6 0 0-125 79-125 79"/>
 <glyph unicode="&#104;" d="M411 415l0 0 0 0c3 3 3 8 0 11l-10 10c-3 3-8 3-11 0l0 0-45-45c-3-3-3-7 0-10l11-11 0 0c2-3 7-3 10 0z m-162-2l0 0 14 0 0 0c4 0 8 3 8 7l0 0 0 64c0 5-3 8-8 8l0 0-14 0 0 0c-5 0-8-3-8-8l0-64 0 0c0-4 4-7 8-7z m220-106c0 4-3 7-7 8l0 0-64 0c-4 0-8-4-8-8l0-15c0-4 4-7 8-7l64 0 0 0c4 0 7 3 7 7z m-213 81c-60 0-109-49-109-109 0-23 8-45 20-63l0 0c17-25 27-59 27-96 2-2 4-4 7-4 0 0 0 0 1 0l0 0 108 0 0 0c0 0 1 0 1 0 3 0 5 2 7 5 0 38 12 73 29 99 11 17 18 37 18 59 0 60-49 109-109 109z m55-336c0 0-1 0-1 0l0 0-108 0 0 0c-1 0-1 0-1 0-4 0-8-3-8-7l0-17c0-5 4-8 8-8 0 0 0 0 1 0l0 0 108 0 0 0c0 0 1 0 1 0 4 0 7 3 7 8l0 17c0 4-3 7-7 7z m0 49c0 0-1 0-1 0l0 0-108 0 0 0c-1 0-1 0-1 0-4 0-7-4-8-8 0 0 0 0 0 0l0-17c0-4 4-8 8-8 0 0 0 0 1 1l0-1 108 0 0 1c0-1 1-1 1-1 4 0 7 4 7 8l0 17c0 4-3 8-7 8z m-197 208l0 0-64 0c-4 0-7-3-7-8l0-14c0-5 3-8 7-8l64 0 0 0c4 0 8 4 8 8l0 14c0 4-4 8-8 8z m-11 109l46-46 0 0c3-2 7-2 10 1l0 0 11 10c2 3 2 8 0 10l0 0-46 46c-2 3-7 3-10 0l-11-11c-2-3-2-7 0-10z"/>
+<glyph unicode="&#115;" d="M492 217l-83 40c20 12 33 36 33 63 0 40-28 72-62 72-12 0-23-4-32-11 6-14 9-29 9-46 0-24-7-48-20-67 4-5 9-9 15-12l0 0 53-25c15-8 25-24 25-41l0-70 57 0c7 0 14 7 14 16l0 66c0 7-4 13-9 15z m-330 40c4 3 8 6 12 10-13 19-21 43-21 68 0 17 4 33 10 47-10 6-20 10-31 10-34 0-62-32-62-72 0-28 14-52 34-64l-84-39c-5-2-9-8-9-15l0-66c0-9 7-16 14-16l55 0 0 70c0 17 10 34 26 41z m232-49l-72 34-31 15c14 8 25 21 32 37 5 12 9 26 9 41 0 9-2 17-4 24-9 38-38 65-73 65-34 0-63-26-73-63-2-8-3-17-3-26 0-16 3-31 10-44 7-14 18-27 31-35l-29-13-75-35c-6-3-10-10-10-18l0-82c0-11 7-20 17-20l264 0c10 0 18 9 18 20l0 82c0 8-5 15-11 18z"/>
+<glyph unicode="&#116;" d="M256 448c-106 0-192-86-192-192 0-106 86-192 192-192 106 0 192 86 192 192 0 106-86 192-192 192z m0-333c-78 0-141 63-141 141 0 34 12 66 33 90l198-198c-24-21-56-33-90-33z m108 51l-198 198c24 21 56 33 90 33 78 0 141-63 141-141 0-34-12-66-33-90z"/>
 </font></defs></svg>

app/assets/stylesheets/debates.scss

@@ -544,14 +544,24 @@
 
       .comment-user {
         margin-top: rem-calc(6);
-        padding: rem-calc(6) rem-calc(12);
+        padding: rem-calc(6) 0;
 
-        &.is-official {
-          background: $comment-official;
+        @each $n in ("1", "2", "3","4", "5") {
+          &.level-#{$n} {
+            @if $n == "5" {
+              background: $comment-level-5;
+              padding: rem-calc(6) rem-calc(12);
+            }
+            @else {
+              background: $comment-official;
+              padding: rem-calc(6) rem-calc(12);
+            }
+          }
         }
 
         &.is-author {
           background: $comment-author;
+          padding: rem-calc(6) rem-calc(12);
         }
       }
     }
@@ -579,7 +589,6 @@
       }
     }
   }
-
 }
 
 .faded {

app/assets/stylesheets/icons.scss

@@ -91,3 +91,9 @@
 .icon-initiatives:before {
   content: "h";
 }
+.icon-organizations:before {
+  content: "s";
+}
+.icon-deleted:before {
+  content: "t";
+}

app/assets/stylesheets/participacion.scss

@@ -589,6 +589,21 @@ form {
 
 img.initialjs-avatar {
   border-radius: rem-calc(1000);
+  position: relative;
+}
+
+.author-deleted {
+  background-color: rgba(255,255,255,.5);
+  color: rgba(0,0,0,.4);
+  font-size: rem-calc(40);
+  left: 11px;
+  position: absolute;
+  top: 63px;
+}
+
+.user-deleted {
+  @extend .author-deleted;
+  top: -9px;
 }
 
 // 11. Filters

app/assets/stylesheets/variables.scss

@@ -76,4 +76,5 @@ $author:            #008CCF;
 $association:       #222222;
 
 $comment-author:    rgba(45,144,248,.15);
-$comment-official:  rgba(255,241,204,1);
+$comment-official:  rgba(70,219,145,.3);
+$comment-level-5:   rgba(255,241,204,1);

app/views/comments/_comment.html.erb

@@ -6,17 +6,24 @@
     <% else %>
 
       <%= avatar_image(comment.user, size: 32, class: 'left') %>
+      <!-- if comment.user.hidden?
+        <i class="icon-deleted user-deleted"></i>
+           end -->
 
       <div class="comment-body">
         <div class="comment-info">
-          <span class="user-name"><%= comment.user.name %></span>
-          &nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
-          <% if comment.user.official? %>
-            &nbsp;&bullet;&nbsp;
-            <span class="label round level-<%= comment.user.official_level %>">
-              <%= comment.user.official_position %>
-            </span>
-          <% end %>
+
+          <!--  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.official? %>
+              &nbsp;&bullet;&nbsp;
+              <span class="label round level-<%= comment.user.official_level %>">
+                <%= comment.user.official_position %>
+              </span>
+            <% end %>
+          <!-- end -->
           <% if comment.user.verified_organization? %>
             &nbsp;&bullet;&nbsp;
             <span class="label round is-association">
@@ -29,10 +36,11 @@
               <%= t("debates.comment.author") %>
             </span>
           <% end %>
+          &nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
         </div>
 
         <% if comment.user.official? %>
-          <p class="comment-user is-official"><%= comment.body %></p>
+          <p class="comment-user level-<%= comment.user.official_level %>"><%= comment.body %></p>
         <% elsif comment.user == @debate.author %>
           <p class="comment-user is-author"><%= comment.body %></p>
         <% else %>

app/views/debates/show.html.erb

@@ -14,9 +14,28 @@
 
       <div class="debate-info">
         <%= avatar_image(@debate.author, size: 32, class: 'author-photo') %>
-        <span class="author">
-            <%= @debate.author.name %>
-        </span>
+        <!-- if @debate.author.hidden? %>
+          <i class="icon-deleted author-deleted"></i>
+          <span class="author">
+              <%= t("debates.show.author_deleted") %>
+          </span>
+            else -->
+          <span class="author">
+              <%= @debate.author.name %>
+          </span>
+          <% if @debate.author.official? %>
+            &nbsp;&bullet;&nbsp;
+            <span class="label round level-<%= @debate.author.official_level %>">
+              <%= @debate.author.official_position %>
+            </span>
+          <% end %>
+        <!-- end -->
+        <% if @debate.author.verified_organization? %>
+          &nbsp;&bullet;&nbsp;
+          <span class="label round is-association">
+            <%= t("shared.organization") %>
+          </span>
+        <% end %>
         <span class="bullet">&nbsp;&bullet;&nbsp;</span>
         <%= l @debate.created_at.to_date %>
         <span class="bullet">&nbsp;&bullet;&nbsp;</span>

config/locales/en.yml

@@ -52,6 +52,7 @@ en:
     comment:
       author: Debate's author
       deleted: This comment has been deleted
+      user_deleted: Deleted user
       responses:
         zero: No Responses
         one: 1 Response
@@ -73,6 +74,7 @@ en:
         Some suggestions:
     show:
       back_link: Back
+      author_deleted: Deleted user
       comments_title: Comments
       comments:
         zero: No comments

config/locales/es.yml

@@ -52,6 +52,7 @@ es:
     comment:
       author: Autor del debate
       deleted: Este comentario ha sido eliminado
+      user_deleted: Usuario eliminado
       responses:
         zero: Sin respuestas
         one: 1 Respuesta
@@ -73,6 +74,7 @@ es:
         Algunas recomendaciones:
     show:
       back_link: Volver
+      author_deleted: Usuario eliminado
       comments_title: Comentarios
       comments:
         zero: Sin comentarios