styling of notifs list

This commit is contained in:
Connor Turland 2016-12-15 23:57:37 -05:00 committed by Devin Howard
parent ef84209de1
commit 28d960459e
4 changed files with 95 additions and 29 deletions

View file

@ -8,6 +8,13 @@
} }
} }
/* when this switches to two lines */
@media only screen and (max-width : 728px) {
.controller-notifications .notificationsPage .notification .notification-read-unread a {
margin-top: -20px !important;
}
}
@media only screen and (max-width : 390px) { @media only screen and (max-width : 390px) {
.map .mapCard .mobileMetadata { .map .mapCard .mobileMetadata {
width: 190px; width: 190px;
@ -33,6 +40,17 @@
display: none !important; display: none !important;
} }
.notificationsPage .page-header {
display: none;
}
.controller-notifications .notificationsPage .notification .notification-read-unread {
display: block !important;
}
.controller-notifications .notificationsPage .notification .notification-date {
display: none;
}
#mobile_header { #mobile_header {
display: block; display: block;
} }

View file

@ -48,20 +48,20 @@ $unread_notifications_dot_size: 8px;
padding-top: 15px; padding-top: 15px;
} }
.notification:first-child {
border-top: none;
}
.notification:last-child {
border-bottom: 1px solid #DCDCDC;
}
.notification { .notification {
padding: 10px; padding: 10px;
border:1px solid #DCDCDC; position: relative;
border-bottom: none;
&:hover { &:hover {
background: #F6F6F6; background: #F6F6F6;
.notification-read-unread {
display:block;
}
.notification-date {
display: none;
}
} }
& > a { & > a {
@ -71,27 +71,58 @@ $unread_notifications_dot_size: 8px;
padding-right: 10px; padding-right: 10px;
} }
.notification-read-unread { .notification-actor {
float: left; float: left;
width: 15%;
}
.notification-body, img {
.notification-subject { width: 32px;
display: inline-block; height: 32px;
vertical-align: top; border-radius: 16px;
}
} }
.notification-body { .notification-body {
margin-left: 15px; margin-left: 50px;
.in-bold {
font-family: 'din-medium', Sans-Serif;
}
.action {
background: #4fb5c0;
color: #FFF;
padding: 2px 6px;
border-radius: 3px;
display: inline-block;
margin: 5px 0;
}
}
.notification-date {
position: absolute;
top: 50%;
right: 10px;
color: #607d8b;
font-size: 13px;
line-height: 13px;
margin-top: -6px;
}
.notification-read-unread {
display: none;
float: left;
width: 15%;
a {
position: absolute;
top: 50%;
margin-top: -10px;
text-align: center;
}
} }
&.unread { &.unread {
.notification-body, background: #EEE;
.notification-subject,
.notification-read-unread {
font-family: 'din-medium', Sans-Serif;
}
} }
} }

View file

@ -9,17 +9,30 @@ class NotificationService
def self.access_request(request) def self.access_request(request)
body = renderer.render(template: 'map_mailer/access_request_email', locals: { map: request.map, request: request }, layout: false) body = renderer.render(template: 'map_mailer/access_request_email', locals: { map: request.map, request: request }, layout: false)
request.map.user.notify(request.requested_text, body, request, false, MAILBOXER_CODE_ACCESS_REQUEST) request.map.user.notify(request.requested_text, body, request, false, MAILBOXER_CODE_ACCESS_REQUEST, true, request.user)
end end
def self.access_approved(request) def self.access_approved(request)
body = renderer.render(template: 'map_mailer/access_approved_email', locals: { map: request.map }, layout: false) body = renderer.render(template: 'map_mailer/access_approved_email', locals: { map: request.map }, layout: false)
receipt = request.user.notify(request.approved_text, body, request, false, MAILBOXER_CODE_ACCESS_APPROVED) receipt = request.user.notify(request.approved_text, body, request, false, MAILBOXER_CODE_ACCESS_APPROVED, true, request.map.user)
end end
def self.invite_to_edit(map, inviter, invited) def self.invite_to_edit(map, inviter, invited)
user_map = UserMap.find_by(user: invited, map: map) user_map = UserMap.find_by(user: invited, map: map)
body = renderer.render(template: 'map_mailer/invite_to_edit_email', locals: { map: map, inviter: inviter }, layout: false) body = renderer.render(template: 'map_mailer/invite_to_edit_email', locals: { map: map, inviter: inviter }, layout: false)
invited.notify(map.invited_text, body, user_map, false, MAILBOXER_CODE_INVITE_TO_EDIT) invited.notify(map.invited_text, body, user_map, false, MAILBOXER_CODE_INVITE_TO_EDIT, true, inviter)
end
def self.text_for_notification(notification)
if notification.notification_code == MAILBOXER_CODE_ACCESS_REQUEST
map = notification.notified_object.map
'wants permission to map with you on <span class="in-bold">' + map.name + '</span>&nbsp;&nbsp;<div class="action">Offer a response</div>'
elsif notification.notification_code == MAILBOXER_CODE_ACCESS_APPROVED
map = notification.notified_object.map
'granted your request to edit map <span class="in-bold">' + map.name + '</span>'
elsif notification.notification_code == MAILBOXER_CODE_INVITE_TO_EDIT
map = notification.notified_object.map
'gave you edit access to map <span class="in-bold">' + map.name + '</span>'
end
end end
end end

View file

@ -4,18 +4,19 @@
<div id="yield"> <div id="yield">
<div class="centerContent notificationsPage"> <div class="centerContent notificationsPage">
<header class="page-header"> <header class="page-header">
<h2 class="title">My Notifications</h4> <h2 class="title">Notifications</h4>
</header> </header>
<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 <%= receipt.is_read? ? 'read' : 'unread' %>" id="notification-<%= notification.id %>"> <li class="notification <%= receipt.is_read? ? 'read' : 'unread' %>" id="notification-<%= notification.id %>">
<%= link_to notification_path(notification.id) do %> <%= link_to notification_path(notification.id) do %>
<div class="notification-subject"> <div class="notification-actor">
<%= notification.subject %> <%= image_tag notification.sender.image(:thirtytwo) %>
</div> </div>
<div class="notification-body"> <div class="notification-body">
<%= strip_tags(notification.body).truncate(70) %> <div class="in-bold"><%= notification.sender.name %></div>
<%= raw NotificationService.text_for_notification(notification) %>
</div> </div>
<% end %> <% end %>
<div class="notification-read-unread"> <div class="notification-read-unread">
@ -25,6 +26,9 @@
<%= link_to 'mark as read', mark_read_notification_path(notification.id), remote: true, method: :put %> <%= link_to 'mark as read', mark_read_notification_path(notification.id), remote: true, method: :put %>
<% end %> <% end %>
</div> </div>
<div class="notification-date">
<%= notification.created_at.strftime("%b %d") %>
</div>
<div class="clearfloat"></div> <div class="clearfloat"></div>
</li> </li>
<% end %> <% end %>