From 7a9cb22269fc815752ad480fe5bff6bdfd3ff13f Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 22 Mar 2018 21:36:19 -0700
Subject: [PATCH] add icons for boosters/favoriters/followers in status header

---
 routes/_components/Avatar.html              |  6 ++
 routes/_components/status/Notification.html |  9 +--
 routes/_components/status/Status.html       |  2 +-
 routes/_components/status/StatusHeader.html | 67 +++++++++++++--------
 4 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index cf76a29a..54ff78a5 100644
--- a/routes/_components/Avatar.html
+++ b/routes/_components/Avatar.html
@@ -19,6 +19,12 @@
   :global(.avatar) {
     border-radius: 4px;
   }
+
+  :global(.avatar.size-extra-small) {
+    width: 24px;
+    height: 24px;
+  }
+
   :global(.avatar.size-small) {
     width: 48px;
     height: 48px;
diff --git a/routes/_components/status/Notification.html b/routes/_components/status/Notification.html
index 93c57ae5..a9f68b95 100644
--- a/routes/_components/status/Notification.html
+++ b/routes/_components/status/Notification.html
@@ -9,10 +9,8 @@
            tabindex="0"
            aria-posinset="{{index}}" aria-setsize="{{length}}"
            ref:node >
-    <div class="follow-notification-offset">
-      <StatusHeader :notification :notificationId :status :statusId :timelineType
-                    :account :accountId :uuid isStatusInNotification="true" />
-    </div>
+    <StatusHeader :notification :notificationId :status :statusId :timelineType
+                  :account :accountId :uuid isStatusInNotification="true" />
   </article>
 {{/if}}
 <style>
@@ -22,9 +20,6 @@
     padding: 10px 20px;
     border-bottom: 1px solid var(--main-border);
   }
-  .follow-notification-offset {
-    margin-left: 58px; /* offset for avatar, 48px + 10px */
-  }
   @media (max-width: 767px) {
     .notification-article {
       padding: 10px 10px;
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index 94493d4c..1fe95634 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -46,7 +46,7 @@
     padding: 10px 20px;
     display: grid;
     grid-template-areas:
-        "....... header       header        header"
+        "header  header       header        header"
         "sidebar author-name  author-handle relative-date"
         "sidebar spoiler      spoiler       spoiler"
         "sidebar spoiler-btn  spoiler-btn   spoiler-btn"
diff --git a/routes/_components/status/StatusHeader.html b/routes/_components/status/StatusHeader.html
index 8dec912b..0069ec26 100644
--- a/routes/_components/status/StatusHeader.html
+++ b/routes/_components/status/StatusHeader.html
@@ -1,12 +1,14 @@
 <div class="status-header {{isStatusInNotification ? 'status-in-notification' : ''}}">
+  <Avatar :account size="extra-small" className="status-header-avatar"/>
   <svg class="status-header-svg">
     <use xlink:href="{{icon}}"/>
   </svg>
-  <span>
+  <span class="status-header-span">
     {{#if timelineType === 'pinned'}}
       Pinned toot
     {{else}}
       <a href="/accounts/{{accountId}}"
+         class="status-header-a"
          title="{{'@' + account.acct}}"
          focus-key="{{focusKey}}" >
         {{account.display_name || account.username}}
@@ -24,31 +26,6 @@
   </span>
 </div>
 <style>
-  .status-header span {
-    margin-left: 5px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  :global(
-      .status-header span,
-      .status-header a,
-      .status-header a:visited,
-      .status-header a:hover
-  ) {
-    color: var(--deemphasized-text-color);
-  }
-
-  :global(
-      .status-header.status-in-notification span,
-      .status-header.status-in-notification a,
-      .status-header.status-in-notification a:visited,
-      .status-header.status-in-notification a:hover
-  ) {
-    color: var(--body-text-color);
-  }
-
   .status-header {
     grid-area: header;
     margin: 5px 10px 5px 5px;
@@ -56,18 +33,56 @@
     align-items: center;
   }
 
+  :global(.status-header-avatar) {
+    margin-left: 19px; /* offset for avatar, 48px - 24px - 5px */
+  }
+
   .status-header-svg {
+    margin-left: 20px;
     width: 18px;
     height: 18px;
     fill: var(--deemphasized-text-color);
   }
 
+  @media (max-width: 767px) {
+    .status-header-svg {
+      margin-left: 10px;
+    }
+  }
+
   .status-header.status-in-notification .status-header-svg {
     fill: var(--body-text-color);
   }
+
+  .status-header-span {
+    margin-left: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .status-header-span,
+  .status-header-a,
+  .status-header-a:visited,
+  .status-header-a:hover {
+    color: var(--deemphasized-text-color);
+  }
+
+  .status-in-notification .status-header-span,
+  .status-in-notification .status-header-a,
+  .status-in-notification .status-header-a:visited,
+  .status-in-notification .status-header-a:hover {
+    color: var(--body-text-color);
+  }
 </style>
 <script>
+
+  import Avatar from '../Avatar.html'
+
   export default {
+    components: {
+      Avatar
+    },
     computed: {
       focusKey: (uuid) => `status-header-${uuid}`,
       icon: (notification, status, timelineType) => {