styling of notifs list
This commit is contained in:
parent
ef84209de1
commit
28d960459e
4 changed files with 95 additions and 29 deletions
|
@ -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) {
|
||||
.map .mapCard .mobileMetadata {
|
||||
width: 190px;
|
||||
|
@ -33,6 +40,17 @@
|
|||
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 {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
@ -48,20 +48,20 @@ $unread_notifications_dot_size: 8px;
|
|||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.notification:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.notification:last-child {
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
}
|
||||
|
||||
.notification {
|
||||
padding: 10px;
|
||||
border:1px solid #DCDCDC;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: #F6F6F6;
|
||||
|
||||
.notification-read-unread {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.notification-date {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
|
@ -71,27 +71,58 @@ $unread_notifications_dot_size: 8px;
|
|||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.notification-read-unread {
|
||||
.notification-actor {
|
||||
float: left;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.notification-body,
|
||||
.notification-subject {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
.notification-body,
|
||||
.notification-subject,
|
||||
.notification-read-unread {
|
||||
font-family: 'din-medium', Sans-Serif;
|
||||
}
|
||||
background: #EEE;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -9,17 +9,30 @@ class NotificationService
|
|||
|
||||
def self.access_request(request)
|
||||
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
|
||||
|
||||
def self.access_approved(request)
|
||||
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
|
||||
|
||||
def self.invite_to_edit(map, inviter, invited)
|
||||
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)
|
||||
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> <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
|
||||
|
|
|
@ -4,18 +4,19 @@
|
|||
<div id="yield">
|
||||
<div class="centerContent notificationsPage">
|
||||
<header class="page-header">
|
||||
<h2 class="title">My Notifications</h4>
|
||||
<h2 class="title">Notifications</h4>
|
||||
</header>
|
||||
<ul class="notifications">
|
||||
<% @notifications.each do |notification| %>
|
||||
<% receipt = @receipts.find_by(notification_id: notification.id) %>
|
||||
<li class="notification <%= receipt.is_read? ? 'read' : 'unread' %>" id="notification-<%= notification.id %>">
|
||||
<%= link_to notification_path(notification.id) do %>
|
||||
<div class="notification-subject">
|
||||
<%= notification.subject %>
|
||||
<div class="notification-actor">
|
||||
<%= image_tag notification.sender.image(:thirtytwo) %>
|
||||
</div>
|
||||
<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>
|
||||
<% end %>
|
||||
<div class="notification-read-unread">
|
||||
|
@ -25,6 +26,9 @@
|
|||
<%= link_to 'mark as read', mark_read_notification_path(notification.id), remote: true, method: :put %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="notification-date">
|
||||
<%= notification.created_at.strftime("%b %d") %>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
</li>
|
||||
<% end %>
|
||||
|
|
Loading…
Reference in a new issue