Make mailboxer look good and update email templates

app/assets/stylesheets/apps.css.erb

@@ -1,8 +1,8 @@
 .centerContent {
   position: relative;
-  margin: 92px auto 0 auto;
+  margin: 0 auto;
-  padding: 20px 0 60px 20px;
+  width: auto;
-  width: 760px;
+  max-width: 960px;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
   background: #fff;
@@ -10,7 +10,7 @@
   -moz-border-radius: 3px;
   border-radius: 3px;
   border: 1px solid #dcdcdc;
-  margin-bottom: 10px;
+  box-sizing: border-box;
   padding: 15px;
 }
 
@@ -130,10 +130,8 @@
     border-radius: 2px;
 }
 
-.back-to-mapping {
+.centerContent.withPadding {
-  margin: 1em auto;
+  margin-top: 1em;
-  width: auto;
+  margin-bottom: 1em;
-  max-width: 960px;
-  box-sizing: border-box;
 }
 

app/assets/stylesheets/clean.css.erb

@@ -28,6 +28,8 @@
   position: absolute;
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
+  padding-top: 92px;
 }
 
 /*.animations {

app/assets/stylesheets/mobile.scss.erb

@@ -2,7 +2,7 @@
   display: none;
 }
 
-@media only screen and (max-width : 720px) and (min-width : 504px) {
+@media only screen and (max-width : 752px) and (min-width : 504px) {
   .sidebarSearch .tt-hint, .sidebarSearch .sidebarSearchField {
     width: 160px !important;
   }
@@ -57,7 +57,7 @@
   }
 
   #yield {
-    height: 100%;
+    padding-top: 50px;
   }
 
   .new_session, .new_user, .edit_user, .login, .forgotPassword {
@@ -66,7 +66,7 @@
     left: auto;
     width: 78%;
     padding: 16px 10%;
-    margin: 50px auto 0 auto;
+    margin: 0 auto;
   }
 
   .centerGreyForm input[type="text"], .centerGreyForm input[type="email"], .centerGreyForm input[type="password"] {

app/assets/stylesheets/notifications.scss.erb

@@ -20,16 +20,14 @@ $unread_notifications_dot_size: 8px;
     list-style: none;
   }
 
-  $menu_bar_height: 6em;
   .notificationPage,
   .notificationsPage {
-    width: auto;
-    max-width: 960px;
-    box-sizing: border-box;
-    margin: 1em auto;
-    margin-top: 1em + $menu_bar_height;
     font-family: 'din-regular', Sans-Serif;
 
+    & a:hover {
+      text-decoration: none;
+    }
+
     & > .notification-title {
       border-bottom: 1px solid #eee;
       padding-bottom: 0.25em;
@@ -41,34 +39,62 @@ $unread_notifications_dot_size: 8px;
     }
   }
 
-
+  .notificationsPage {
-  .notificationsPage .notification {
+    header {
-    .notification-subject {
+      margin-bottom: 0;
-      width: 25%;
-    }
-    .notification-body {
-      width: 50%;
-    }
-    .notification-read-unread {
-      width: 10%;
     }
 
-    .notification-body,
+    .notification:first-child {
-    .notification-subject,
+      border-top: none;
-    .notification-read-unread {
+    }
-      display: inline-block;
+    .notification:last-child {
-      vertical-align: top;
+      border-bottom: 1px solid #DCDCDC;
     }
 
-    &.unread {
+    .notification {
-      .notification-body,
+      padding: 10px;
-      .notification-subject,
+      border:1px solid #DCDCDC;
+      border-bottom: none;
+
+      &:hover {
+        background: #F6F6F6;
+      }
+
+      & > a {
+        float: left;
+        width: 85%;  
+        box-sizing: border-box;
+        padding-right: 10px;
+      }
+
       .notification-read-unread {
-        font-family: 'din-medium', Sans-Serif;
+        float: left;
+        width: 15%;
+      }
+
+      .notification-body,
+      .notification-subject {
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      .notification-body {
+        margin-left: 15px;
+      }
+
+      &.unread {
+        .notification-body,
+        .notification-subject,
+        .notification-read-unread {
+          font-family: 'din-medium', Sans-Serif;
+        }
       }
     }
+
   }
 
+    
+
   .notificationPage .notification-body {
     p, div {
       margin: 1em auto;

app/views/doorkeeper/authorized_applications/index.html.erb

@@ -33,5 +33,6 @@
   <% end %>
 </main>
 </div>
+<%= render partial: 'shared/back_to_mapping' %>
 </div>
 <%= render 'script' %>

app/views/layouts/_upperelements.html.erb

@@ -4,7 +4,7 @@
 <div class="upperLeftUI">
   <!-- home button -->
   <div class="homeButton">
-    <a href="<%= root_url %>" <% if current_user && !appsPage %><%= 'data-router=true' %><% end %>>METAMAPS</a>
+    <a href="<%= root_url %>" <% if current_user && !noHardHomeLink %><%= 'data-router=true' %><% end %>>METAMAPS</a>
   </div> <!-- end homeButton -->
 
   <!-- search box -->
@@ -78,7 +78,7 @@
     <span id="notification_icon">
       <%= link_to notifications_path, class: "notificationsIcon upperRightEl upperRightIcon #{user_unread_notification_count > 0 ? 'unread' : 'read'}" do %>
         <div class="tooltipsUnder">
-          Notifications (<%= user_unread_notification_count %> unread)
+          Notifications
         </div>
         <% if user_unread_notification_count > 0 %>
           <div class="unread-notifications-dot"></div>

app/views/layouts/application.html.erb

@@ -30,7 +30,7 @@
 
         <div class="wrapper <%= classes %>" id="wrapper">
 
-            <%= render :partial => 'layouts/upperelements', :locals => { :appsPage => false }  %>
+            <%= render :partial => 'layouts/upperelements', :locals => { :noHardHomeLink => controller_name == "notifications" ? true : false }  %>
 
             <%= yield %>
 

app/views/layouts/doorkeeper.html.erb

@@ -22,7 +22,7 @@
 
         <div class="wrapper <%= classes %>" id="wrapper">
 
-            <%= render :partial => 'layouts/upperelements', :locals => {:appsPage => true } %>
+            <%= render :partial => 'layouts/upperelements', :locals => {:noHardHomeLink => true } %>
 
             <%= yield %>
 
@@ -50,7 +50,6 @@
               <% end %>
             </p>
             <div id="loading"></div>
-            <%= render partial: 'shared/back_to_mapping' %>
         </div>
 
     <% end %>

app/views/mailboxer/notification_mailer/new_notification_email.html.erb

@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <% mail = ApplicationMailer.mail_for_notification(@notification) %>
-<% if mail %>
+<div style="padding: 16px; background: white; text-align: left;">
-  <% @notification.update(body: mail.html_part&.body&.decoded) %>
+  <% if mail %>
-  <%= raw mail.html_part&.body&.decoded %>
+    <% @notification.update(body: mail.html_part&.body&.decoded) %>
-<% end %>
+    <%= raw mail.html_part&.body&.decoded %>
+  <% end %>
+  <p style="font-size: 12px;">Make sense with Metamaps</p>
+  <%= render partial: 'shared/mailer_unsubscribe_link' %>
+</div>

app/views/mailboxer/notification_mailer/new_notification_email.text.erb

@@ -2,3 +2,7 @@
 <% if mail %>
   <%= mail.text_part&.body&.decoded %>
 <% end %>
+
+Make sense with Metamaps
+
+<%= render partial: 'shared/mailer_unsubscribe_link' %>

app/views/map_mailer/access_request_email.html.erb

@@ -1,16 +1,6 @@
-<div style="padding: 16px; background: white; text-align: left;">
+<% button_style = "background-color:#4fc059;border-radius:2px;color:white;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;min-height:29px;line-height:29px;min-width:54px;outline:0px;padding:0 8px;text-align:center;text-decoration:none" %>
-  <% button_style = "background-color:#4fc059;border-radius:2px;color:white;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;min-height:29px;line-height:29px;min-width:54px;outline:0px;padding:0 8px;text-align:center;text-decoration:none" %>
+<p><span style="font-weight: bold;"><%= @request.user.name %></span> is requesting access to <span style="font-weight: bold">collaboratively edit</span> the following map:</p>
-
+<p><%= @map.name %></p>
-  <p><span style="font-weight: bold;"><%= @request.user.name %></span> is requesting access to <span style="font-weight: bold">collaboratively edit</span> the following map:</p>
+<p><%= link_to "Allow", approve_access_map_url(id: @map.id, request_id: @request.id), style: "font-size: 18px; text-decoration: none; color: #4fc059;" %>
-
+<p><%= link_to "Decline", deny_access_map_url(id: @map.id, request_id: @request.id), style: "font-size: 18px; text-decoration: none; color: #DB5D5D;" %></p>
-  <p><%= @map.name %></p>
+<%= link_to 'Go to Map', map_url(@map), style: button_style %> 
-
-  <p><%= link_to "Allow", approve_access_map_url(id: @map.id, request_id: @request.id), target: "_blank", style: "font-size: 18px; text-decoration: none; color: #4fc059;" %>
-  <p><%= link_to "Decline", deny_access_map_url(id: @map.id, request_id: @request.id), target: "_blank", style: "font-size: 18px; text-decoration: none; color: #DB5D5D;" %></p>
-
-  <%= link_to 'Open in Metamaps', map_url(@map), target: "_blank", style: button_style %> 
-
-  <p style="font-size: 12px;">Make sense with Metamaps</p>
-
-  <%= render partial: 'shared/mailer_unsubscribe_link' %>
-</div>

app/views/map_mailer/access_request_email.text.erb

@@ -5,6 +5,4 @@
 Allow [<%= approve_access_map_url(id: @map.id, request_id: @request.id) %>]
 Decline [<%= deny_access_map_url(id: @map.id, request_id: @request.id) %>]
 
-Make sense with Metamaps
 
-<%= render partial: 'shared/mailer_unsubscribe_link' %>

app/views/map_mailer/invite_to_edit_email.html.erb

@@ -1,15 +1,7 @@
-<div style="padding: 16px; background: white; text-align: left;">
+<% button_style = "background-color:#4fc059;border-radius:2px;color:white;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;min-height:29px;line-height:29px;min-width:54px;outline:0px;padding:0 8px;text-align:center;text-decoration:none" %>
-  <% button_style = "background-color:#4fc059;border-radius:2px;color:white;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;min-height:29px;line-height:29px;min-width:54px;outline:0px;padding:0 8px;text-align:center;text-decoration:none" %>
+<p><span style="font-weight: bold;"><%= @inviter.name %></span> has invited you to <span style="font-weight: bold">collaboratively edit</span> the following map:</p>
-
+<p><%= link_to @map.name, map_url(@map), style: "font-size: 18px; text-decoration: none; color: #4fc059;" %></p>
-  <p><span style="font-weight: bold;"><%= @inviter.name %></span> has invited you to <span style="font-weight: bold">collaboratively edit</span> the following map:</p>
+<% if @map.desc %>
-  <p><%= link_to @map.name, map_url(@map), target: "_blank", style: "font-size: 18px; text-decoration: none; color: #4fc059;" %></p>
+  <p style="font-size: 12px;"><%= @map.desc %></p>
-  <% if @map.desc %>
+<% end %>
-    <p style="font-size: 12px;"><%= @map.desc %></p>
+<%= link_to 'Go to Map', map_url(@map), style: button_style %>    
-  <% end %>
-
-  <%= link_to 'Open in Metamaps', map_url(@map), target: "_blank", style: button_style %>    
-
-  <p style="font-size: 12px;">Make sense with Metamaps</p>
-
-  <%= render partial: 'shared/mailer_unsubscribe_link' %>
-</div>

app/views/map_mailer/invite_to_edit_email.text.erb

@@ -1,7 +1,3 @@
 <%= @inviter.name %> has invited you to collaboratively edit the following map:
 
 <%= @map.name %> [<%= map_url(@map) %>]
-
-Make sense with Metamaps
-
-<%= render partial: 'shared/mailer_unsubscribe_link' %>

app/views/notifications/index.html.erb

@@ -3,7 +3,9 @@
 
 <div id="yield">
   <div class="centerContent notificationsPage">
-    <h2 class="title">My Notifications</h4>
+    <header class="page-header">
+      <h2 class="title">My Notifications</h4>
+    </header>
     <ul class="notifications">
       <% @notifications.each do |notification| %>
         <% receipt = @receipts.find_by(notification_id: notification.id) %>
@@ -23,6 +25,7 @@
               <%= link_to 'mark as read', mark_read_notification_path(notification.id), remote: true, method: :put %>
             <% end %>
           </div>
+          <div class="clearfloat"></div>
         </li>
       <% end %>
       <% if @notifications.count == 0 %>
@@ -32,7 +35,7 @@
   </div>
 
   <% if @notifications.total_pages > 1 %>
-    <div class="centerContent pagination">
+    <div class="centerContent withPadding pagination">
       <%= paginate @notifications %>
     </div>
   <% end %>

app/views/notifications/show.html.erb

@@ -9,8 +9,8 @@
     </div>
   </div>
 
-  <div class="centerContent back">
+  <div class="centerContent withPadding back">
-    <%= link_to 'Back', notifications_path %>
+    <%= link_to 'Back to notifications', notifications_path %>
   </div>
 
   <%= render partial: 'shared/back_to_mapping' %>

app/views/shared/_back_to_mapping.html.erb

@@ -1,3 +1,3 @@
-<div class="centerContent back-to-mapping">
+<div class="centerContent withPadding back-to-mapping">
   <a href="/">Back to mapping</a>
 </div>

frontend/src/components/NotificationIcon.js

@@ -20,7 +20,7 @@ class NotificationIcon extends Component {
     return (
       <a className={linkClasses} href="/notifications">
         <div className="tooltipsUnder">
-          Notifications ({this.props.unreadNotificationsCount} unread)
+          Notifications
         </div>
         {this.props.unreadNotificationsCount === 0 ? null : (
           <div className="unread-notifications-dot"></div>