styling fixes for centerContent

app/assets/stylesheets/apps.css.erb

@@ -1,8 +1,8 @@
 .centerContent {
   position: relative;
-  margin: 92px auto 0 auto;
-  padding: 20px 0 60px 20px;
-  width: 760px;
+  margin: 0 auto;
+  width: auto;
+  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 {
-  margin: 1em auto;
-  width: auto;
-  max-width: 960px;
-  box-sizing: border-box;
+.centerContent.withPadding {
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 

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

@@ -22,11 +22,12 @@ $unread_notifications_dot_size: 8px;
 
   .notificationPage,
   .notificationsPage {
-    width: auto;
-    max-width: 960px;
-    box-sizing: border-box;
     font-family: 'din-regular', Sans-Serif;
 
+    & a:hover {
+      text-decoration: none;
+    }
+
     & > .notification-title {
       border-bottom: 1px solid #eee;
       padding-bottom: 0.25em;
@@ -38,34 +39,62 @@ $unread_notifications_dot_size: 8px;
     }
   }
 
-
-  .notificationsPage .notification {
-    .notification-subject {
-      width: 25%;
-    }
-    .notification-body {
-      width: 50%;
-    }
-    .notification-read-unread {
-      width: 10%;
+  .notificationsPage {
+    header {
+      margin-bottom: 0;
     }
 
-    .notification-body,
-    .notification-subject,
-    .notification-read-unread {
-      display: inline-block;
-      vertical-align: top;
+    .notification:first-child {
+      border-top: none;
+    }
+    .notification:last-child {
+      border-bottom: 1px solid #DCDCDC;
     }
 
-    &.unread {
-      .notification-body,
-      .notification-subject,
+    .notification {
+      padding: 10px;
+      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/doorkeeper.html.erb

@@ -50,7 +50,6 @@
               <% end %>
             </p>
             <div id="loading"></div>
-            <%= render partial: 'shared/back_to_mapping' %>
         </div>
 
     <% end %>

app/views/notifications/index.html.erb

@@ -25,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 %>
@@ -34,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">
-    <%= link_to 'Back', notifications_path %>
+  <div class="centerContent withPadding back">
+    <%= 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>