styling of notifs list

app/assets/stylesheets/mobile.scss.erb

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

app/assets/stylesheets/notifications.scss.erb

@@ -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;
+      position: relative;
-      border-bottom: none;
 
       &: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,
+        img {
-      .notification-subject {
+          width: 32px;
-        display: inline-block;
+          height: 32px;
-        vertical-align: top;
+          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,
+        background: #EEE;
-        .notification-subject,
-        .notification-read-unread {
-          font-family: 'din-medium', Sans-Serif;
-        }
       }
     }
 

app/services/notification_service.rb

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

app/views/notifications/index.html.erb

@@ -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">
+            <div class="notification-actor">
-              <%= notification.subject %>
+              <%= 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 %>