consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds tabs for notifications on proposal show

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2016-06-06 17:26:48 +02:00
parent 86f0cae7bb
commit 84f9dcaa76
10 changed files with 166 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
app/assets/stylesheets/_settings.scss
View File

@@ -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-item-font-size: rem-calc(12);
$tab-background-active: $white;
$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;

32
app/assets/stylesheets/layout.scss
View File

@@ -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 {

10
app/assets/stylesheets/participation.scss
View File

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

12
app/views/proposals/_comments.html.erb
View File

@@ -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>
<%= t("proposals.show.comments_title") %>
<span class="js-comments-count">(<%= @proposal.comments_count %>)</span>
</h2>
<% if @notifications.blank? %>
<h2>
<%= t("proposals.show.comments_title") %>
<span class="js-comments-count">(<%= @proposal.comments_count %>)</span>
</h2>
<% end %>
<%= render 'shared/wide_order_selector', i18n_namespace: "comments" %>

22
app/views/proposals/_filter_subnav.html.erb Normal file
View File

@@ -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>

17
app/views/proposals/_notifications.html.erb
View File

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

13
app/views/proposals/show.html.erb
View File

@@ -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>

5
app/views/users/_proposals.html.erb
View File

@@ -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 %>

2
config/locales/en.yml
View File

@@ -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

2
config/locales/es.yml
View File

@@ -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