glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add more styling to the notification pages

Browse source
This commit is contained in:
Devin Howard 2016-11-25 11:39:10 -05:00
parent 2db803e496
commit 2b37f00960
5 changed files with 68 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/assets/stylesheets/notifications.scss
View file

@ -2,10 +2,53 @@
ul.notifications { ul.notifications {
list-style: none; list-style: none;
} }
}
$menu_bar_height: 6em; $menu_bar_height: 6em;
.notificationPage,
.notificationsPage { .notificationsPage {
width: auto;
max-width: 100%;
box-sizing: border-box;
margin: 1em; margin: 1em;
margin-top: 1em + $menu_bar_height; margin-top: 1em + $menu_bar_height;
& > .title {
border-bottom: 1px solid #eee;
padding-bottom: 0.25em;
margin-bottom: 0.5em;
}
.back {
margin-top: 1em;
}
}
.notification {
.notification-subject {
width: 25%;
}
.notification-body {
width: 50%;
}
.notification-read-unread {
width: 10%;
}
.notification-body,
.notification-subject,
.notification-read-unread {
display: inline-block;
vertical-align: top;
font-weight: 300;
}
&.unread {
.notification-body,
.notification-subject,
.notification-read-unread {
font-weight: bold;
}
}
}
} }

18
app/views/notifications/index.html.erb
View file

@ -3,24 +3,24 @@
<div id="yield"> <div id="yield">
<div class="centerContent notificationsPage"> <div class="centerContent notificationsPage">
<h4>Notifications</h4> <h2 class="title">My Notifications</h4>
<ul class="notifications"> <ul class="notifications">
<% @notifications.each do |notification| %> <% @notifications.each do |notification| %>
<% receipt = @receipts.find_by(notification_id: notification.id) %> <% receipt = @receipts.find_by(notification_id: notification.id) %>
<li class="notification" id="notification-<%= notification.id %>"> <li class="notification <%= receipt.is_read? ? 'read' : 'unread' %>" id="notification-<%= notification.id %>">
<strong class="notification-subject"> <div class="notification-subject">
<%= link_to notification.subject, notification_path(notification.id) %> <%= link_to notification.subject, notification_path(notification.id) %>
</strong> </div>
<span class="notification-body"> <div class="notification-body">
<%= notification.body.truncate(140) %> <%= notification.body.truncate(70) %>
</span> </div>
<span class="notification-read-unread"> <div class="notification-read-unread">
<% if receipt.is_read? %> <% if receipt.is_read? %>
<%= link_to '(read)', mark_unread_notification_path(notification.id), remote: true, method: :put %> <%= link_to '(read)', mark_unread_notification_path(notification.id), remote: true, method: :put %>
<% else %> <% else %>
<%= link_to '(unread)', mark_read_notification_path(notification.id), remote: true, method: :put %> <%= link_to '(unread)', mark_read_notification_path(notification.id), remote: true, method: :put %>
<% end %> <% end %>
</span> </div>
</li> </li>
<% end %> <% end %>
</ul> </ul>

3
app/views/notifications/mark_read.js.erb
View file

@ -1,3 +1,6 @@
$('#notification-<%= @notification.id %> .notification-read-unread > a') $('#notification-<%= @notification.id %> .notification-read-unread > a')
.text('(read)') .text('(read)')
.attr('href', '<%= mark_unread_notification_path(@notification.id) %>') .attr('href', '<%= mark_unread_notification_path(@notification.id) %>')
$('#notification-<%= @notification.id %>')
.removeClass('unread')
.addClass('read')

3
app/views/notifications/mark_unread.js.erb
View file

@ -1,3 +1,6 @@
$('#notification-<%= @notification.id %> .notification-read-unread > a') $('#notification-<%= @notification.id %> .notification-read-unread > a')
.text('(unread)') .text('(unread)')
.attr('href', '<%= mark_read_notification_path(@notification.id) %>') .attr('href', '<%= mark_read_notification_path(@notification.id) %>')
$('#notification-<%= @notification.id %>')
.removeClass('read')
.addClass('unread')

8
app/views/notifications/show.html.erb
View file

@ -2,13 +2,13 @@
<% content_for :mobile_title, 'Notifications' %> <% content_for :mobile_title, 'Notifications' %>
<div id="yield"> <div id="yield">
<div class="centerContent"> <div class="centerContent notificationPage">
<h4><%= @notification.subject %></h4> <h2 class="title"><%= @notification.subject %></h4>
<hr />
<%= @notification.body %> <%= @notification.body %>
<hr /> <div class="back">
<%= link_to 'Back', notifications_path %> <%= link_to 'Back', notifications_path %>
</div> </div>
</div> </div>
</div>
<%= render partial: 'notifications/header' %> <%= render partial: 'notifications/header' %>