Merge pull request #2077 from consul/consul-design

Consul design

app/assets/stylesheets/layout.scss

@@ -2033,7 +2033,6 @@ table {
 // ------------
 
 .activity {
-  margin-bottom: $line-height * 2;
 
   .accordion li {
     margin-bottom: $line-height / 2;
@@ -2065,62 +2064,15 @@ table {
     }
   }
 
-  table {
-    border: 0;
-    margin-bottom: 0;
-  }
-
-  td {
-    position: relative;
-
-    &:first-child {
-      padding-left: $line-height * 1.5;
-      width: 75%;
-    }
-
-    &::before {
-      color: $brand;
-      font-family: "icons" !important;
-      font-size: rem-calc(24);
-      left: 4px;
-      position: absolute;
-    }
-  }
-
-  .activity-comments td:first-child::before {
-    content: 'e';
-    top: 18px;
-  }
-
-  .activity-debates td:first-child::before {
-    content: 'i';
-    top: 14px;
-  }
-
-  .activity-proposals {
-
-    td:first-child::before {
-      content: 'h';
-      top: 18px;
-    }
-
-    .retired {
-      text-decoration: line-through;
-    }
-  }
-
-  .activity-investment-projects td:first-child::before,
-  .activity-ballot td:first-child::before {
-    content: '\53';
-    top: 10px;
+  .retired {
+    text-decoration: line-through;
   }
 }
 
 .public-interests {
-  margin-top: $line-height;
 
-  .column {
-    padding-left: 0;
+  li {
+    margin-right: $line-height / 4;
   }
 }
 

app/assets/stylesheets/participation.scss

@@ -363,10 +363,6 @@
     width: rem-calc(48);
   }
 
-  .edit-debate {
-    margin-bottom: 0;
-  }
-
   .debate-info,
   .proposal-info,
   .investment-project-info,

app/views/debates/show.html.erb

@@ -9,13 +9,6 @@
       <div class="small-12 medium-9 column">
         <%= back_link_to %>
 
-        <% if current_user && @debate.editable_by?(current_user) %>
-          <%= link_to edit_debate_path(@debate), class: 'edit-debate button success small float-right' do %>
-            <span class="icon-edit"></span>
-            <%= t("debates.show.edit_debate_link") %>
-          <% end %>
-        <% end %>
-
         <h1><%= @debate.title %></h1>
         <% if @debate.conflictive? %>
           <div data-alert class="callout alert margin-top">
@@ -47,6 +40,15 @@
       </div>
 
       <aside class="small-12 medium-3 column">
+        <% if current_user && @debate.editable_by?(current_user) %>
+          <div class="sidebar-divider"></div>
+          <h2><%= t("debates.show.author") %></h2>
+          <%= link_to edit_debate_path(@debate), class: 'button hollow expanded' do %>
+            <span class="icon-edit"></span>
+            <%= t("debates.show.edit_debate_link") %>
+          <% end %>
+        <% end %>
+
         <div class="sidebar-divider"></div>
         <h2><%= t("votes.supports") %></h2>
         <div id="<%= dom_id(@debate) %>_votes">

app/views/users/_budget_investment.html.erb

@@ -2,10 +2,10 @@
   <td>
     <%= link_to budget_investment.title, budget_investment_path(budget_investment.budget, budget_investment) %>
   </td>
-  <td class="text-right">
+  <td>
     <% if can? :destroy, budget_investment %>
       <%= link_to t('shared.delete'), budget_investment_path(budget_investment.budget, budget_investment),
-                  method: :delete, class: "button hollow alert" %>
+                  method: :delete, class: "button hollow alert expanded" %>
     <% end %>
   </td>
 </tr>

app/views/users/_budget_investments.html.erb

@@ -1,7 +1,13 @@
-<table id="budget_investments_list" class="clear activity-budget-investments">
-  <% @budget_investments.each do |budget_investment| %>
-    <%= render "budget_investment", budget_investment: budget_investment %>
-  <% end %>
+<table id="budget_investments_list" class="margin-top">
+  <thead>
+    <th scope="col"><%= t("users.show.budget_investments") %></th>
+    <th scope="col"><%= t("users.show.actions") %></th>
+  </thead>
+  <tbody>
+    <% @budget_investments.each do |budget_investment| %>
+      <%= render "budget_investment", budget_investment: budget_investment %>
+    <% end %>
+  </tbody>
 </table>
 
 <%= paginate @budget_investments %>

app/views/users/_comments.html.erb

@@ -1,13 +1,18 @@
-<table class="clear activity-comments">
-  <% @comments.each do |comment| %>
-    <tr id="comment_<%= comment.id %>">
-      <td>
-        <%= comment_commentable_title(comment) %>
-        <br>
-        <%= comment.body %>
-      </td>
-    </tr>
-  <% end %>
+<table class="margin-top">
+  <thead>
+    <th scope="col"><%= t("users.show.comments") %></th>
+  </thead>
+  <tbody>
+    <% @comments.each do |comment| %>
+      <tr id="comment_<%= comment.id %>">
+        <td>
+          <%= comment_commentable_title(comment) %>
+          <br>
+          <%= comment.body %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
 </table>
 
 <%= paginate @comments %>

app/views/users/_debates.html.erb

@@ -1,11 +1,16 @@
-<table class="clear activity-debates">
-  <% @debates.each do |debate| %>
-    <tr id="debate_<%= debate.id %>">
-      <td>
-        <%= link_to debate.title, debate %>
-      </td>
-    </tr>
-  <% end %>
+<table class="margin-top">
+  <thead>
+    <th scope="col"><%= t("users.show.debates") %></th>
+  </thead>
+  <tbody>
+    <% @debates.each do |debate| %>
+      <tr id="debate_<%= debate.id %>">
+        <td>
+          <%= link_to debate.title, debate %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
 </table>
 
 <%= paginate @debates %>

app/views/users/_interests.html.erb

@@ -3,15 +3,11 @@
 
   <% if user.interests.any? %>
 
-    <% user.interests.in_groups_of(10, false) do |interests_group| %>
-      <div class="small-4 column end">
-        <ul class="no-bullet">
-          <% interests_group.each do |interest| %>
-            <li> <small><%= interest %></small> </li>
-          <% end %>
-        </ul>
-      </div>
-    <% end %>
+    <ul class="no-bullet tags">
+      <% user.interests.each do |interest| %>
+        <li class="inline-block"><span><%= interest %></span></li>
+      <% end %>
+    </ul>
 
   <% else %>
 
@@ -20,5 +16,4 @@
     </div>
 
   <% end %>
-
-</div>
+</div>

app/views/users/_proposal.html.erb

@@ -1,6 +1,6 @@
 <tr id="proposal_<%= proposal.id %>">
-  <td>
-    <%= link_to proposal.title, proposal, proposal.retired? ? { class: 'retired' } : {} %>
+  <td class="small-9">
+    <strong><%= link_to proposal.title, proposal, proposal.retired? ? { class: 'retired' } : {} %></strong>
     <br>
     <%= proposal.summary %>
   </td>

app/views/users/_proposals.html.erb

@@ -1,7 +1,13 @@
-<table class="clear activity-proposals">
-  <% @proposals.each do |proposal| %>
-    <%= render "proposal", proposal: proposal %>
-  <% end %>
+<table class="margin-top">
+  <thead>
+    <th scope="col"><%= t("users.show.proposals") %></th>
+    <th scope="col" colspan="2"><%= t("users.show.actions") %></th>
+  </thead>
+  <tbody>
+    <% @proposals.each do |proposal| %>
+      <%= render "proposal", proposal: proposal %>
+    <% end %>
+  </tbody>
 </table>
 
 <%= paginate @proposals %>

app/views/users/show.html.erb

@@ -28,7 +28,7 @@
             <% if @activity_counts[filter] > 0 %>
               <% if @current_filter == filter %>
                 <li class="active">
-                  <%= t("users.show.filters.#{filter}", count: @activity_counts[filter]) %>
+                  <h2><%= t("users.show.filters.#{filter}", count: @activity_counts[filter]) %></h2>
                 </li>
               <% else %>
                 <li>
@@ -43,7 +43,9 @@
 
         <%= render "activity_page" %>
       <% else %>
-        <p><%= t('users.show.private_activity') %></p>
+        <div class="callout warning margin">
+          <%= t('users.show.private_activity') %>
+        </div>
       <% end %>
 
       <%= render 'interests', user: @user if valid_interests_access? %>

config/locales/en/general.yml

@@ -14,8 +14,8 @@ en:
       phone_number_label: Phone number
       public_activity_label: Keep my list of activities public
       public_interests_label: Keep my interests public
-      public_interests_my_title_list: List of interests (Tags of elements you follow)
-      public_interests_user_title_list: List of interests (Tags of elements this user follows)
+      public_interests_my_title_list: List of interests (tags of elements you follow)
+      public_interests_user_title_list: List of interests (tags of elements this user follows)
       public_interests_my_empty_list: You do not follow any elements yet.
       public_interests_user_empty_list: This user does not follow any elements yet.
       save_changes_submit: Save changes
@@ -158,6 +158,7 @@ en:
       flag: This debate has been flagged as inappropriate by several users.
       login_to_comment: You must %{signin} or %{signup} to leave a comment.
       share: Share
+      author: Author
     update:
       form:
         submit_button: Save changes
@@ -707,6 +708,11 @@ en:
       deleted_debate: This debate has been deleted
       deleted_proposal: This proposal has been deleted
       deleted_budget_investment: This investment has been deleted
+      proposals: Proposals
+      debates: Debates
+      budget_investments: Budget investments
+      comments: Comments
+      actions: Actions
       filters:
         comments:
           one: 1 Comment
@@ -725,7 +731,7 @@ en:
           other: "%{count} Following"
       no_activity: User has no public activity
       no_private_messages: "This user doesn't accept private messages."
-      private_activity: This user decided to keep the activity list private
+      private_activity: This user decided to keep the activity list private.
       send_private_message: "Send private message"
     proposals:
       send_notification: "Send notification"

config/locales/es/general.yml

@@ -14,8 +14,8 @@ es:
       phone_number_label: Teléfono
       public_activity_label: Mostrar públicamente mi lista de actividades
       public_interests_label: Mostrar públicamente mis intereses
-      public_interests_my_title_list: Lista de intereses (Etiquetas de los elementos que sigues)
-      public_interests_user_title_list: Lista de intereses (Etiquetas de los elementos seguidos este usuario)
+      public_interests_my_title_list: Lista de intereses (etiquetas de los elementos que sigues)
+      public_interests_user_title_list: Lista de intereses (etiquetas de los elementos seguidos este usuario)
       public_interests_my_empty_list: Aún no sigues ningún elemento.
       public_interests_user_empty_list: Este usuario no sigue ningún elemento todavía.
       save_changes_submit: Guardar cambios
@@ -158,6 +158,7 @@ es:
       flag: Este debate ha sido marcado como inapropiado por varios usuarios.
       login_to_comment: Necesitas %{signin} o %{signup} para comentar.
       share: Compartir
+      author: Autor
     update:
       form:
         submit_button: Guardar cambios
@@ -707,6 +708,11 @@ es:
       deleted_debate: Este debate ha sido eliminado
       deleted_proposal: Esta propuesta ha sido eliminada
       deleted_budget_investment: Esta propuesta de inversión ha sido eliminada
+      proposals: Propuestas
+      debates: Debates
+      budget_investments: Proyectos de presupuestos participativos
+      comments: Comentarios
+      actions: Acciones
       filters:
         comments:
           one: 1 Comentario
@@ -725,7 +731,7 @@ es:
           other: "%{count} Siguiendo"
       no_activity: Usuario sin actividad pública
       no_private_messages: "Este usuario no acepta mensajes privados."
-      private_activity: Este usuario ha decidido mantener en privado su lista de actividades
+      private_activity: Este usuario ha decidido mantener en privado su lista de actividades.
       send_private_message: "Enviar un mensaje privado"
     proposals:
       send_notification: "Enviar notificación"

spec/features/users_spec.rb

@@ -314,7 +314,7 @@ feature 'Users' do
       @user.update(public_interests: true)
       visit user_path(@user)
 
-      expect(page).to have_content("List of interests (Tags of elements this user follows)")
+      expect(page).to have_content("List of interests (tags of elements this user follows)")
     end
 
     scenario 'Should display custom interests title when user is visiting own user page' do
@@ -322,7 +322,7 @@ feature 'Users' do
       login_as(@user)
       visit user_path(@user)
 
-      expect(page).to have_content("List of interests (Tags of elements you follow)")
+      expect(page).to have_content("List of interests (tags of elements you follow)")
     end
 
     scenario 'Should display generic empty interests list message when visited user has not interests defined' do