add more styling to the notification pages

app/assets/stylesheets/notifications.scss

@@ -2,10 +2,53 @@
   ul.notifications {
     list-style: none;
   }
-}
 
-$menu_bar_height: 6em;
-.notificationsPage {
-  margin: 1em;
-  margin-top: 1em + $menu_bar_height;
+  $menu_bar_height: 6em;
+  .notificationPage,
+  .notificationsPage {
+    width: auto;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 1em;
+    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;
+      }
+    }
+  }
 }

app/views/notifications/index.html.erb

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

app/views/notifications/mark_read.js.erb

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

app/views/notifications/mark_unread.js.erb

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

app/views/notifications/show.html.erb

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