3 files changed, 77 insertions, 87 deletions
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index e55c6e24..f8314bfc 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,12 +1,11 @@
-import Status from '../status/status.vue'
-import StillImage from '../still-image/still-image.vue'
+import Notification from '../notification/notification.vue'
 
 import { sortBy, take, filter } from 'lodash'
 
 const Notifications = {
   data () {
     return {
-      visibleNotificationCount: 10
+      visibleNotificationCount: 20
     }
   },
   computed: {
@@ -27,7 +26,7 @@ const Notifications = {
     }
   },
   components: {
-    Status, StillImage
+    Notification
   },
   watch: {
     unseenCount (count) {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3b7403e4..08420c86 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -50,30 +50,64 @@
   }
 
   .notification {
-    // Will have to use pixels here to ensure consistent distance with
-    // pad alone and pad + border, browsers bad at rounding this with em,
-    // they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
-    // which does not happen with 10px vs 4px + 6px.
-    padding: 0.4em 0 0 10px;
+    padding-left: 4px;
+    box-sizing: border-box;
     display: flex;
     border-bottom: 1px solid;
     border-bottom-color: inherit;
 
-    .notification-gradient {
-      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
-      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%)
+    .non-mention {
+      display: flex;
+      flex: 1;
+      flex-wrap: nowrap;
+      padding: 0.6em;
+      min-width: 0;
+      .status-el {
+        .status {
+          padding: 0.25em 0;
+        }
+        padding: 0;
+        .status-content.media-body {
+          margin: 0;
+        }
+      }
+    }
+
+    .follow-text {
+      padding: 0.5em 0;
+    }
+
+    .status-el {
+      flex: 1;
     }
 
     time {
       white-space: nowrap;
     }
 
-    .text {
+    .notification-right {
+      flex: 1;
+      padding-left: 0.8em;
+      min-width: 0;
+    }
+
+    .notification-details {
       min-width: 0px;
       word-wrap: break-word;
       line-height:18px;
       position: relative;
       overflow: hidden;
+      width: 100%;
+      flex: 1;
+      flex-wrap: nowrap;
+
+      .username {
+        font-weight: bolder;
+      }
+      .timeago {
+        float: right;
+        font-size: 12px;
+      }
 
       .icon-retweet.lit {
         color: $fallback--cGreen;
@@ -112,7 +146,6 @@
         }
       }
 
-      padding: 0.3em 0.8em 0.5em;
       p {
         margin: 0;
         margin-top: 0;
@@ -120,30 +153,6 @@
       }
     }
 
-    .avatar {
-      margin-top: 0.3em;
-      width: 32px;
-      height: 32px;
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      overflow: hidden;
-      line-height: 0;
-
-      &.animated::before {
-        display: none;
-      }
-
-    }
-
-    &:hover .animated.avatar {
-      canvas {
-        display: none;
-      }
-      img {
-        visibility: visible;
-      }
-    }
-
     &:last-child {
       border-bottom: none;
     }
@@ -159,16 +168,39 @@
     }
   }
 
-  .notification-gradient {
-    position: absolute;
-    width: 100%;
-    height: 4em;
-    margin-top:8em;
-  }
-
   .unseen {
     border-left: 4px solid $fallback--cRed;
     border-left: 4px solid var(--cRed, $fallback--cRed);
     padding-left: 6px;
   }
 }
+
+.notification {
+  .avatar-compact {
+    margin-top: 0.3em;
+    width: 32px;
+    height: 32px;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    overflow: hidden;
+    line-height: 0;
+
+    &.animated::before {
+      display: none;
+    }
+
+  }
+
+  &:hover .animated.avatar {
+    canvas {
+      display: none;
+    }
+    img {
+      visibility: visible;
+    }
+  }
+
+  .notification-usercard {
+    margin-left: 0.8em;
+  }
+}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 17bae71e..f01234d3 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -8,48 +8,7 @@
       </div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
-          <div>
-            <a :href="notification.action.user.statusnet_profile_url" target="_blank">
-              <StillImage class='avatar' :src="notification.action.user.profile_image_url_original"/>
-            </a>
-          </div>
-          <div class='text' style="width: 100%;">
-            <div v-if="notification.type === 'favorite'">
-              <h1>
-                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <i class="fa icon-star lit"></i>
-                <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
-              </h1>
-              <div class="notification-gradient"></div>
-              <div class="notification-content" v-html="notification.status.statusnet_html"></div>
-            </div>
-            <div v-if="notification.type === 'repeat'">
-              <h1>
-                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <i class="fa icon-retweet lit"></i>
-                <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
-              </h1>
-              <div class="notification-gradient"></div>
-              <div class="notification-content" v-html="notification.status.statusnet_html"></div>
-            </div>
-            <div v-if="notification.type === 'mention'">
-              <h1>
-                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <i class="fa icon-reply lit"></i>
-                <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
-              </h1>
-              <status :compact="true" :statusoid="notification.status"></status>
-            </div>
-            <div v-if="notification.type === 'follow'">
-              <h1>
-                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <i class="fa icon-user-plus lit"></i>
-              </h1>
-              <div>
-                <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{ notification.action.user.screen_name }}</router-link> {{$t('notifications.followed_you')}}
-              </div>
-            </div>
-          </div>
+          <notification :notification="notification"></notification>
         </div>
       </div>
     </div>