Adds tabs for notifications on proposal show

app/assets/stylesheets/_settings.scss

@@ -3,6 +3,7 @@
 //
 //  Table of Contents:
 //
+//   0. Custom variables
 //   1. Global
 //   2. Breakpoints
 //   3. The Grid
@@ -43,6 +44,70 @@
 
 @import 'util/util';
 
+// 0. Custom variables
+// --------------------
+
+$base-font-size:      rem-calc(17);
+$base-line-height:    rem-calc(26);
+$small-font-size:     rem-calc(14);
+$line-height:         rem-calc(24);
+
+$brand:             #004A83;
+$body:              #E9E9E9;
+$background:        #EDEFF0;
+$border:            #DEE0E3;
+$dark:              darken($brand, 10%);
+
+$text:              #222222;
+$text-medium:       #999999;
+$text-light:        #CCCCCC;
+
+$link:              #2895F1;
+$link-hover:        #2178BF;
+
+$debates:           #008CCF;
+$votes-bg:          #26AEEE;
+$votes-border:      #1F94CB;
+
+$votes-like:        #7BD2A8;
+$votes-like-act:    #5D9E7F;
+$votes-unlike:      #EF8585;
+$votes-unlike-act:  #BD6A6A;
+
+$delete:            #F04124;
+$check:             #46DB91;
+
+$proposals:         #FFA42D;
+$proposals-border:  #CC8425;
+
+$budget:            #454372;
+$budget-hover:      #7571BF;
+
+$highlight:         #E7F2FC;
+$featured:          #FED900;
+
+$footer-bg:         #DEE0E2;
+$footer-color:      #171819;
+$footer-link:       #454A4C;
+$footer-border:     #BFC1C3;
+
+$success-bg:        #DFF0D8;
+$success-border:    #D6E9C6;
+$color-success:     #3C763D;
+
+$info-bg:           #D9EDF7;
+$info-border:       #BCE8F1;
+$color-info:        #31708F;
+
+$warning-bg:        #FCF8E3;
+$warning-border:    #FAEBCC;
+$color-warning:     #8A6D3B;
+
+$alert-bg:          #F2DEDE;
+$alert-border:      #EBCCD1;
+$color-alert:       #A94442;
+
+
 // 1. Global
 // ---------
 
@@ -510,13 +575,13 @@ $show-header-for-stacked: false;
 
 $tab-margin: 0;
 $tab-background: $white;
-$tab-background-active: $light-gray;
+$tab-background-active: $white;
-$tab-item-font-size: rem-calc(12);
+$tab-item-font-size: $base-font-size;
 $tab-item-background-hover: $white;
-$tab-item-padding: 1.25rem 1.5rem;
+$tab-item-padding: $line-height/2  0;
 $tab-expand-max: 6;
 $tab-content-background: $white;
-$tab-content-border: $light-gray;
+$tab-content-border: $border;
 $tab-content-color: foreground($tab-background, $primary-color);
 $tab-content-padding: 1rem;
 
@@ -563,66 +628,3 @@ $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;
 $topbar-unstack-breakpoint: medium;
-
-// 37. Custom variables
-// --------------------
-
-$base-font-size:      rem-calc(17);
-$base-line-height:    rem-calc(26);
-$small-font-size:     rem-calc(14);
-$line-height:         rem-calc(24);
-
-$brand:             #004A83;
-$body:              #E9E9E9;
-$background:        #EDEFF0;
-$border:            #DEE0E3;
-$dark:              darken($brand, 10%);
-
-$text:              #222222;
-$text-medium:       #999999;
-$text-light:        #CCCCCC;
-
-$link:              #2895F1;
-$link-hover:        #2178BF;
-
-$debates:           #008CCF;
-$votes-bg:          #26AEEE;
-$votes-border:      #1F94CB;
-
-$votes-like:        #7BD2A8;
-$votes-like-act:    #5D9E7F;
-$votes-unlike:      #EF8585;
-$votes-unlike-act:  #BD6A6A;
-
-$delete:            #F04124;
-$check:             #46DB91;
-
-$proposals:         #FFA42D;
-$proposals-border:  #CC8425;
-
-$budget:            #454372;
-$budget-hover:      #7571BF;
-
-$highlight:         #E7F2FC;
-$featured:          #FED900;
-
-$footer-bg:         #DEE0E2;
-$footer-color:      #171819;
-$footer-link:       #454A4C;
-$footer-border:     #BFC1C3;
-
-$success-bg:        #DFF0D8;
-$success-border:    #D6E9C6;
-$color-success:     #3C763D;
-
-$info-bg:           #D9EDF7;
-$info-border:       #BCE8F1;
-$color-info:        #31708F;
-
-$warning-bg:        #FCF8E3;
-$warning-border:    #FAEBCC;
-$color-warning:     #8A6D3B;
-
-$alert-bg:          #F2DEDE;
-$alert-border:      #EBCCD1;
-$color-alert:       #A94442;

app/assets/stylesheets/layout.scss

@@ -219,6 +219,35 @@ a {
   float: left;
 }
 
+.tabs-content {
+  border: 0;
+}
+
+.tabs {
+  border: {
+    left: 0;
+    right: 0;
+    top: 0;
+  };
+
+  .tabs-title > a {
+    color: $text-medium;
+    margin-bottom: rem-calc(-1);
+    margin-right: $line-height;
+
+    &[aria-selected='true'],
+    &.is-active {
+      color: $brand;
+      border-bottom: 2px solid $brand;
+      font-weight: bold;
+    }
+  }
+
+  h2 {
+    font-size: $base-font-size;
+  }
+}
+
 // 02. Header
 // ----------
 
@@ -1460,7 +1489,6 @@ table {
 .comments {
   background: $white;
   background-repeat: repeat-x;
-  padding-top: $line-height;
   padding-bottom: $line-height*4;
 
   h2 {
@@ -1647,7 +1675,7 @@ table {
 
       &:first-child {
         padding-left: $line-height*1.5;
-        width: 80%;
+        width: 75%;
       }
 
       &:before {

app/assets/stylesheets/participation.scss

@@ -715,6 +715,16 @@
   }
 }
 
+.more-info {
+  clear: both;
+  color: $text-medium;
+  font-size: $small-font-size;
+
+  a {
+    color: $text-medium;
+  }
+}
+
 .debate {
 
   .votes {

app/views/proposals/_comments.html.erb

@@ -1,11 +1,13 @@
 <% cache [locale_and_user_status, @current_order, commentable_cache_key(@proposal), @comment_tree.comments, @comment_tree.comment_authors, @proposal.comments_count, @comment_flags] do %>
-  <section class="row-full comments">
+  <section class="comments">
     <div class="row">
       <div id="comments" class="small-12 column">
-        <h2>
+        <% if @notifications.blank? %>
-          <%= t("proposals.show.comments_title") %>
+          <h2>
-          <span class="js-comments-count">(<%= @proposal.comments_count %>)</span>
+            <%= t("proposals.show.comments_title") %>
-        </h2>
+            <span class="js-comments-count">(<%= @proposal.comments_count %>)</span>
+          </h2>
+        <% end %>
 
         <%= render 'shared/wide_order_selector', i18n_namespace: "comments" %>
 

app/views/proposals/_filter_subnav.html.erb

@@ -0,0 +1,22 @@
+<div class="row">
+  <div class="small-12 column">
+    <ul class="tabs" data-tabs id="example-tabs">
+      <li class="tabs-title is-active">
+        <%= link_to "#tab-comments" do %>
+          <h2>
+            <%= t("proposals.show.comments_tab") %>
+            <span class="js-comments-count">(<%= @proposal.comments_count %>)</span>
+          </h2>
+        <% end %>
+      </li>
+      <li class="tabs-title">
+      <%= link_to "#tab-notifications" do %>
+        <h2>
+          <%= t("proposals.show.notifications_tab") %>
+          (<%= @notifications.count %>)
+        </h2>
+      <% end %>
+      </li>
+    </ul>
+  </div>
+</div>

app/views/proposals/_notifications.html.erb

@@ -1,8 +1,11 @@
-<% if @notifications.present? %>
+<div class="tabs-panel" id="tab-notifications">
-  <div>
+  <div class="row">
-    <% @notifications.each do |notification| %>
+    <div class="small-12 column">
-      <div><%= notification.title %></div>
+      <% @notifications.each do |notification| %>
-      <div><%= notification.body %></div>
+        <h3><%= notification.title %></h3>
-    <% end %>
+        <p class="more-info"><%= notification.created_at.to_date %></p>
+        <p><%= notification.body %></p>
+      <% end %>
+    </div>
   </div>
-<% end %>
+</div>

app/views/proposals/show.html.erb

@@ -118,5 +118,14 @@
     </div>
   </section>
 <% end %>
-<%= render "proposals/notifications" %>
+
-<%= render "proposals/comments" %>
+<div class="tabs-content" data-tabs-content="example-tabs">
+  <% if @notifications.present? %>
+    <%= render "proposals/filter_subnav" %>
+    <%= render "proposals/notifications" %>
+  <% end %>
+
+  <div class="tabs-panel is-active" id="tab-comments">
+    <%= render "proposals/comments" %>
+  </div>
+</div>

app/views/users/_proposals.html.erb

@@ -9,7 +9,8 @@
 
       <% if author? %>
         <td class="text-center">
-          <%= link_to t("users.proposals.send_message"), new_proposal_notification_path(proposal_id: proposal.id) %>
+          <%= link_to t("users.proposals.send_message"), new_proposal_notification_path(proposal_id: proposal.id),
+            class: 'button hollow' %>
         </td>
       <% end %>
 
@@ -20,7 +21,7 @@
           <% else %>
             <%= link_to t('users.proposals.retire'),
                         retire_form_proposal_path(proposal),
-                        class: 'delete' %>
+                        class: 'button hollow alert' %>
           <% end %>
         </td>
       <% end %>

config/locales/en.yml

@@ -351,10 +351,12 @@ en:
         one: 1 comment
         other: "%{count} comments"
         zero: No comments
+      comments_tab: Comments
       comments_title: Comments
       edit_proposal_link: Edit
       flag: This proposal has been flagged as inappropriate by several users.
       login_to_comment: You must %{signin} or %{signup} to leave a comment.
+      notifications_tab: Notifications
       retired_warning: "The author considers this proposal should not receive more supports."
       retired_warning_link_to_explanation: Read the explanation before voting for it.
       retired: Proposal retired by the author

config/locales/es.yml

@@ -351,10 +351,12 @@ es:
         one: 1 Comentario
         other: "%{count} Comentarios"
         zero: Sin comentarios
+      comments_tab: Comentarios
       comments_title: Comentarios
       edit_proposal_link: Editar propuesta
       flag: Esta propuesta ha sido marcada como inapropiada por varios usuarios.
       login_to_comment: Necesitas %{signin} o %{signup} para comentar.
+      notifications_tab: Notificaciones
       retired_warning: "El autor de esta propuesta considera que ya no debe seguir recogiendo apoyos."
       retired_warning_link_to_explanation: Revisa su explicación antes de apoyarla.
       retired: Propuesta retirada por el autor