From 6a5116c349509c160c424b6e0fe8c17ece9a3417 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Tue, 10 Apr 2018 19:25:24 +0300
Subject: [PATCH] Fixes to notification style issues mostly

---
 src/App.scss                                  |   5 +
 src/components/notification/notification.vue  |  34 +--
 .../notifications/notifications.scss          | 254 +++++++++---------
 src/components/status/status.vue              |  12 +-
 4 files changed, 162 insertions(+), 143 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index e4b02017..5f03e2a1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -391,6 +391,11 @@ nav {
   }
 }
 
+.faint {
+  color: $fallback--faint;
+  color: var($fallback--faint, --faint);
+}
+
 @media all and (max-width: 959px) {
   .mobile-hidden {
     display: none;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 74563ff9..eed598a8 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,33 +1,35 @@
 <template>
   <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
   <div class="non-mention" v-else>
-    <a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
+    <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
       <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
-      <div class="base03-border usercard" v-if="userExpanded">
+      <div class="usercard notification-usercard" v-if="userExpanded">
         <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
       </div>
       <span class="notification-details">
-        <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-        <span v-if="notification.type === 'favorite'">
-          <i class="fa icon-star lit"></i>
-          <small>{{$t('notifications.favorited_you')}}</small>
-        </span>
-        <span v-if="notification.type === 'repeat'">
-          <i class="fa icon-retweet lit"></i>
-          <small>{{$t('notifications.repeated_you')}}</small>
-        </span>
-        <span v-if="notification.type === 'follow'">
-          <i class="fa icon-user-plus lit"></i>
-          <small>{{$t('notifications.followed_you')}}</small>
-        </span>
+        <div class="name-and-action">
+          <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+          <span v-if="notification.type === 'favorite'">
+            <i class="fa icon-star lit"></i>
+            <small>{{$t('notifications.favorited_you')}}</small>
+          </span>
+          <span v-if="notification.type === 'repeat'">
+            <i class="fa icon-retweet lit"></i>
+            <small>{{$t('notifications.repeated_you')}}</small>
+          </span>
+          <span v-if="notification.type === 'follow'">
+            <i class="fa icon-user-plus lit"></i>
+            <small>{{$t('notifications.followed_you')}}</small>
+          </span>
+        </div>
         <small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
       </span>
       <div class="follow-text" v-if="notification.type === 'follow'">
         <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
       </div>
-      <status v-else class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
+      <status v-else class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
     </div>
   </div>
 </template>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 08420c86..9c9ea1d5 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -46,138 +46,23 @@
     font-size: 0.9em;
     text-align: center;
     line-height: 1.3em;
-    padding: 1px;
-  }
-
-  .notification {
-    padding-left: 4px;
-    box-sizing: border-box;
-    display: flex;
-    border-bottom: 1px solid;
-    border-bottom-color: inherit;
-
-    .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;
-    }
-
-    .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;
-        color: var(--cGreen, $fallback--cGreen);
-      }
-
-      .icon-user-plus.lit {
-        color: $fallback--cBlue;
-        color: var(--cBlue, $fallback--cBlue);
-      }
-
-      .icon-reply.lit {
-        color: $fallback--cBlue;
-        color: var(--cBlue, $fallback--cBlue);
-      }
-
-      .icon-star.lit {
-        color: orange;
-        color: $fallback--cOrange;
-        color: var(--cOrange, $fallback--cOrange);
-      }
-
-      .status-content {
-        margin: 0;
-        max-height: 300px;
-      }
-
-      h1 {
-        word-break: break-all;
-        margin: 0 0 0.3em;
-        padding: 0;
-        font-size: 1em;
-        line-height:20px;
-        small {
-          font-weight: lighter;
-        }
-      }
-
-      p {
-        margin: 0;
-        margin-top: 0;
-        margin-bottom: 0.3em;
-      }
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .notification-content {
-    max-height: 12em;
-    overflow-y: hidden;
-    //text-overflow: ellipsis;
-
-    img {
-        object-fit: contain;
-    }
   }
 
   .unseen {
     border-left: 4px solid $fallback--cRed;
     border-left: 4px solid var(--cRed, $fallback--cRed);
-    padding-left: 6px;
+    padding-left: 0;
   }
 }
 
 .notification {
+  box-sizing: border-box;
+  display: flex;
+  border-bottom: 1px solid;
+  border-bottom-color: inherit;
+  padding-left: 4px;
+
   .avatar-compact {
-    margin-top: 0.3em;
     width: 32px;
     height: 32px;
     border-radius: $fallback--avatarAltRadius;
@@ -188,7 +73,6 @@
     &.animated::before {
       display: none;
     }
-
   }
 
   &:hover .animated.avatar {
@@ -201,6 +85,128 @@
   }
 
   .notification-usercard {
-    margin-left: 0.8em;
+    margin: 0;
+  }
+
+  .non-mention {
+    display: flex;
+    flex: 1;
+    flex-wrap: nowrap;
+    padding: 0.6em;
+    min-width: 0;
+    .avatar-container {
+      width: 32px;
+      height: 32px;
+    }
+    .status-el {
+      .status {
+        padding: 0.25em 0;
+        color: $fallback--faint;
+        color: var($fallback--faint, --faint);
+      }
+      padding: 0;
+      .status-content.media-body {
+        margin: 0;
+      }
+    }
+  }
+
+  .follow-text {
+    padding: 0.5em 0;
+  }
+
+  .status-el {
+    flex: 1;
+  }
+
+  time {
+    white-space: nowrap;
+  }
+
+  .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;
+    display: flex;
+    flex-wrap: nowrap;
+
+    .name-and-action {
+      flex: 1;
+    }
+
+    .username {
+      font-weight: bolder;
+    }
+    .timeago {
+      float: right;
+      font-size: 12px;
+    }
+
+    .icon-retweet.lit {
+      color: $fallback--cGreen;
+      color: var(--cGreen, $fallback--cGreen);
+    }
+
+    .icon-user-plus.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+
+    .icon-reply.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+
+    .icon-star.lit {
+      color: orange;
+      color: $fallback--cOrange;
+      color: var(--cOrange, $fallback--cOrange);
+    }
+
+    .status-content {
+      margin: 0;
+      max-height: 300px;
+    }
+
+    h1 {
+      word-break: break-all;
+      margin: 0 0 0.3em;
+      padding: 0;
+      font-size: 1em;
+      line-height:20px;
+      small {
+        font-weight: lighter;
+      }
+    }
+
+    p {
+      margin: 0;
+      margin-top: 0;
+      margin-bottom: 0.3em;
+    }
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.notification-content {
+  max-height: 12em;
+  overflow-y: hidden;
+  //text-overflow: ellipsis;
+
+  img {
+      object-fit: contain;
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4d0b6f20..0dc33311 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -10,7 +10,7 @@
     <template v-else>
       <div v-if="retweet && !noHeading" class="media container retweet-info">
         <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
-        <div class="media-body">
+        <div class="media-body faint">
           <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
           <i class='fa icon-retweet retweeted'></i>
           {{$t('timeline.repeated')}}
@@ -134,12 +134,13 @@
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  margin-top: 0.5em;
-  margin-left: 1em;
+  margin-top: 0.25em;
+  margin-left: 0.5em;
   z-index: 50;
   .status {
     flex: 1;
     border: 0;
+    min-width: 15em;
   }
 }
 
@@ -439,6 +440,11 @@ a.unmute {
     width: 40px;
     height: 40px;
   }
+
+  .status .avatar-compact {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 </style>