From 2bfd2190a0e61af57c41f6f93229e2f8505ab945 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Fri, 24 Feb 2017 18:53:53 +0200
Subject: [PATCH] Mark unread notifs with the red line, make read notifs base01
 again, center the heading text and move the button to the right of the panel.

---
 .../notifications/notifications.scss          | 94 +++++++++++--------
 .../notifications/notifications.vue           |  7 +-
 2 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index fe0cca10..5da6d495 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,49 +1,65 @@
 @import '../../_variables.scss';
 
-.notifications button {
-  min-height: 20px;
-}
-.notification {
-  padding: 0.4em 0 0 0.7em;
-  display: flex;
-  border-bottom: 1px solid silver;
+.notifications {
 
-  .text {
-    min-width: 0px;
-    word-wrap: break-word;
-    line-height:18px;
-
-    .icon-retweet {
-      color: $green;
-    }
-
-    .icon-reply {
-      color: $blue;
-    }
-
-    h1 {
-      margin: 0 0 0.3em;
-      padding: 0;
-      font-size: 1em;
-      line-height:20px;
-    }
-
-    padding: 0.3em 0.8em 0.5em;
-    p {
-      margin: 0;
-      margin-top: 0;
-      margin-bottom: 0.3em;
+  .panel-heading {
+    // force the text to stay centered, while keeping
+    // the button in the right side of the panel heading
+    position: relative;
+    button {
+      position: absolute;
+      padding: 0.1em 0.3em 0.25em 0.3em;
+      right: 0.6em;
     }
   }
 
-  .avatar {
-    padding-top: 0.3em;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
+  .unseen {
+    border-left: 4px solid rgba(255, 48, 16, 0.65);
   }
 
-  &:last-child {
-    border: none
+  .notification {
+    padding: 0.4em 0 0 0.7em;
+    display: flex;
+    border-bottom: 1px solid silver;
+
+
+    .text {
+      min-width: 0px;
+      word-wrap: break-word;
+      line-height:18px;
+
+      .icon-retweet {
+        color: $green;
+      }
+
+      .icon-reply {
+        color: $blue;
+      }
+
+      h1 {
+        margin: 0 0 0.3em;
+        padding: 0;
+        font-size: 1em;
+        line-height:20px;
+      }
+
+      padding: 0.3em 0.8em 0.5em;
+      p {
+        margin: 0;
+        margin-top: 0;
+        margin-bottom: 0.3em;
+      }
+    }
+
+    .avatar {
+      padding-top: 0.3em;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+
+    &:last-child {
+      border: none
+    }
   }
 }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 36908b1e..41c274aa 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default base00-background">
-      <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button></div>
+      <div class="panel-heading base01-background base04">
+        Notifications ({{unseenCount}})
+        <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
+      </div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
+        <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
           <a :href="notification.action.user.statusnet_profile_url">
             <img class='avatar' :src="notification.action.user.profile_image_url_original">
           </a>