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

Adds new styles for notifications

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2016-01-08 12:45:37 +01:00
parent 09120b6129
commit e008d1f642
7 changed files with 112 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -384,7 +384,6 @@ header {
&:hover {
background: none;
color: white;
text-decoration: underline;
transition: text-decoration 275ms;
}
@@ -408,6 +407,7 @@ header {
&:hover, &:focus {
background-color: #007095 !important;
text-decoration: underline;
}
}
@@ -935,6 +935,77 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
}
}
.notifications {
position: relative;
&:hover {
text-decoration: none;
}
[class^="icon-"] {
font-size: $h4-font-size;
vertical-align: middle;
}
.icon-circle {
color: #ecf00b;
font-size: $tiny-font-size;
position: absolute;
right: 4px;
top: -6px;
}
}
.notifications-list:before {
background: $border;
content: '';
height: 100%;
left: 28px;
position: absolute;
top: 0;
width: 2px;
}
.notification {
display: block;
padding: $line-height/2 0 $line-height/2 $line-height*1.5;
position: relative;
&:hover {
a {
text-decoration: none;
}
p:not(.time) {
color: $link;
}
&:before {
content: "\43";
}
}
&:before {
background: white;
color: $brand;
content: "\4d";
font-family: "icons" !important;
left: 6px;
position: absolute;
}
p {
color: $text;
margin-bottom: 0;
}
.time {
font-size: $small-font-size;
color: $text-medium;
}
}
// 09. Filters & search
// - - - - - - - - - - - - - - - - - - - - - - - - -

1
app/assets/stylesheets/variables.scss
View File

@@ -39,6 +39,7 @@ $h6-font-size: rem-calc(13);
$h6-line-height: rem-calc(17);
$small-font-size: rem-calc(14);
$tiny-font-size: rem-calc(10);
$line-height: rem-calc(24);
// 02. Colors

14
app/views/devise/menu/_login_items.html.erb
View File

@@ -1,5 +1,16 @@
<ul class="right">
<% if user_signed_in? %>
<li>
<%= link_to notifications_path, class: "notifications" do %>
<% if current_user.notifications.count > 0 %>
<i class="icon-circle"></i>
<i class="icon-notification" title="<%= t('layouts.header.new_notifications', count: current_user.notifications.count).html_safe %>">
</i>
<% else %>
<i class="icon-no-notification" title="<%= t('layouts.header.no_notifications') %>"></i>
<% end %>
<% end %>
</li>
<li>
<%= link_to(t("layouts.header.my_activity_link"), user_path(current_user)) %>
</li>
@@ -9,9 +20,6 @@
<li>
<%= link_to(t("devise_views.menu.login_items.logout"), destroy_user_session_path, method: :delete) %>
</li>
<li>
<%= link_to 'Notificaciones', notifications_path, class: notifications_class_for(current_user) %>
</li>
<% else %>
<li>
<%= link_to(t("devise_views.menu.login_items.login"), new_user_session_path) %>

10
app/views/notifications/_notification.html.erb
View File

@@ -1,8 +1,10 @@
<li id="<%= dom_id(notification) %>" class="notification">
<%= link_to notification do %>
<time><%= l notification.timestamp, format: :datetime %></time>&nbsp;&bull;&nbsp;
<span><%= notification.username %> </span>
<span><%= t("notifications.index.#{notification_action(notification)}") %></span>
<span><%= notification.notifiable.commentable.title %></span>
<p>
<strong><%= notification.username %></strong>
<em><%= t("notifications.index.#{notification_action(notification)}") %></em>
<strong><%= notification.notifiable.commentable.title %></strong>
</p>
<p class="time"><%= l notification.timestamp, format: :datetime %></p>
<% end %>
</li>

28
app/views/notifications/index.html.erb
View File

@@ -1,14 +1,18 @@
<% if @notifications.empty? %>
<div><%= t("notifications.index.empty_notifications") %></div>
<% else %>
<div class="row">
<ul>
<%= render @notifications %>
</ul>
<div class="row">
<div class="small-12 column">
<% if @notifications.empty? %>
<div class="alert-box radius info margin-top">
<%= t("notifications.index.empty_notifications") %>
</div>
<% else %>
<div class="right margin-top">
<%= link_to t("notifications.index.mark_all_as_read"),
mark_all_as_read_notifications_path, method: :put %>
</div>
<div>
<%= link_to t("notifications.index.mark_all_as_read"),
mark_all_as_read_notifications_path, method: :put %>
</div>
<ul class="no-bullet clear notifications-list">
<%= render @notifications %>
</ul>
<% end %>
</div>
<% end %>
</div>

4
config/locales/en.yml
View File

@@ -29,6 +29,8 @@ en:
more_information: "More information"
debates: "Debates"
proposals: "Proposals"
new_notifications: "You have %{count} new notifications"
no_notifications: "You don't have new notifications"
footer:
description: "This portal uses the %{consul} which is %{open_source}. From Madrid out into the world."
open_source: "open-source software"
@@ -313,7 +315,7 @@ en:
notifications:
index:
mark_all_as_read: "Mark all as read"
empty_notifications: "There are no new notifications."
empty_notifications: "You don't have new notifications."
commented_on_your_debate: "commented on your debate"
replied_to_your_comment: "replied to your comment on"
simple_captcha:

4
config/locales/es.yml
View File

@@ -29,6 +29,8 @@ es:
more_information: "Más información"
debates: "Debates"
proposals: "Propuestas"
new_notifications: "Tienes %{count} notificaciones nuevas"
no_notifications: "No tienes notificaciones nuevas"
footer:
description: "Este portal usa la %{consul} que es %{open_source}. De Madrid, para el mundo entero."
open_source: "software libre"
@@ -313,7 +315,7 @@ es:
notifications:
index:
mark_all_as_read: "Marcar todas como leídas"
empty_notifications: "No hay notificaciones nuevas."
empty_notifications: "No tienes notificaciones nuevas."
commented_on_your_debate: "ha comentado en tu debate"
replied_to_your_comment: "ha respondido a tu comentario en"
simple_captcha: