From ef786bd204eb0300fb6dcb59d3fbd4044f15686c Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 16 Jan 2018 08:38:23 -0800
Subject: [PATCH] reduce dom nodes in each status

---
 routes/_components/Avatar.html         | 12 +++++++-----
 routes/_components/Status.html         | 18 ++++++++----------
 routes/_components/StatusListItem.html |  9 +--------
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index 675b688..103d836 100644
--- a/routes/_components/Avatar.html
+++ b/routes/_components/Avatar.html
@@ -1,21 +1,23 @@
 {{#await imagePromise}}
+<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
+     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
 {{then src}}
-<img alt="Profile picture for @{{account.acct}}" src="{{account.avatar}}" />
+<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
+     src="{{account.avatar}}" />
 {{catch error}}
-<svg>
+<svg class="{{className}} avatar">
   <use xlink:href="#fa-user" />
 </svg>
 {{/await}}
 
 <style>
-  img, svg {
+  .avatar {
     width: 48px;
     height: 48px;
-    margin: 0 auto;
     border-radius: 4px;
   }
 
-  svg {
+  svg.avatar {
     fill: var(--deemphasized-text-color);
   }
 </style>
diff --git a/routes/_components/Status.html b/routes/_components/Status.html
index 223c560..680e096 100644
--- a/routes/_components/Status.html
+++ b/routes/_components/Status.html
@@ -1,4 +1,4 @@
-<article>
+<article class="status-article">
     {{#if status.reblog}}
       <div class="boosted">
         <svg>
@@ -22,9 +22,7 @@
       {{relativeDate}}
     </a>
   </div>
-  <div class="sidebar">
-    <Avatar account={{original}} />
-  </div>
+  <Avatar account={{original}} className="sidebar"/>
   <div class="content">{{{status.content}}}</div>
   <div class="toolbar">
     <button aria-label="Reply" aria-pressed="false" type="button">
@@ -51,11 +49,10 @@
 </article>
 
 <style>
-  article {
+  .status-article {
     width: 580px;
     max-width: calc(100vw);
-    margin: 0 10px;
-    padding: 10px 0;
+    padding: 10px;
     display: grid;
     grid-template-areas:
         "....... boosted"
@@ -63,11 +60,12 @@
         "sidebar content"
         "....... toolbar";
     grid-template-columns: 68px 1fr;
+    border-bottom: 1px solid var(--main-border);
   }
-  .sidebar {
+
+  :global(.sidebar) {
     grid-area: sidebar;
-    display: flex;
-    justify-content: center;
+    margin: 0 10px;
   }
 
   .author {
diff --git a/routes/_components/StatusListItem.html b/routes/_components/StatusListItem.html
index 5a16663..7b15a5f 100644
--- a/routes/_components/StatusListItem.html
+++ b/routes/_components/StatusListItem.html
@@ -1,11 +1,4 @@
-<div class="list-item">
-  <Status status="{{virtualProps}}" />
-</div>
-<style>
-  .list-item {
-    border-bottom: 1px solid var(--main-border);
-  }
-</style>
+<Status status="{{virtualProps}}" />
 <script>
   import Status from './Status.html'