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

styling of notifs list

Browse source
This commit is contained in:
Connor Turland 2016-12-15 23:57:37 -05:00
parent 8ebb64d662
commit 0946e2a365
4 changed files with 95 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/stylesheets/mobile.scss.erb
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) {
.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;
}

75
app/assets/stylesheets/notifications.scss.erb
View file

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

19
app/services/notification_service.rb
View file

@ -10,17 +10,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>&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

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

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