Change section view to reduce clutter

src/assets/style.css

@@ -285,6 +285,15 @@ nav {
   margin: var(--whole) 0;
 }
 
+section header a {
+  display: flex;
+  color: var(--fg-status);
+  text-decoration: none;
+  font-weight: bold;
+  margin-right: var(--micro);
+  margin-left: var(--micro);
+}
+
 nav > ul > li > a {
   color: var(--fg);
   text-decoration: none;
@@ -307,22 +316,24 @@ section > header {
   height: var(--line);
   display: flex;
   margin-bottom: var(--whole);
+  justify-content: space-between;
+  color: var(--fg-status);
 }
 
-section > header > a > .avatar {
+section header a > .avatar {
   width: var(--line);
   height: var(--line);
   border-radius: var(--common-radius);
-  margin-right: var(--milli);
+  margin-right: var(--micro);
 }
 
-section > header > .text > .author {
-  font-weight: bold;
+section header span {
+  display: flex;
 }
 
-section > header > .text > .author > a {
+section header .author > a:first-child {
+  margin-left: 0;
   color: var(--fg-light);
-  text-decoration: none;
 }
 
 /*

src/pages/models/post.js

@@ -151,13 +151,13 @@ const transform = (ssb, messages, myFeedId) =>
     })
 
     if (isRoot(msg)) {
-      lodash.set(msg, 'value.meta.postType', 'posted')
+      lodash.set(msg, 'value.meta.postType', 'post')
     } else if (isReply(msg)) {
-      lodash.set(msg, 'value.meta.postType', 'replied to thread')
+      lodash.set(msg, 'value.meta.postType', 'replyAll')
     } else if (isNestedReply(msg)) {
-      lodash.set(msg, 'value.meta.postType', 'replied to message')
+      lodash.set(msg, 'value.meta.postType', 'reply')
     } else {
-      lodash.set(msg, 'value.meta.postType', 'published a mysterious message')
+      lodash.set(msg, 'value.meta.postType', 'mystery')
     }
 
     lodash.set(msg, 'value.meta.votes', voters)

src/pages/views/components/post.js

@@ -50,7 +50,7 @@ module.exports = ({ msg }) => {
   ))
 
   const { name } = msg.value.meta.author
-  const timeAgo = msg.value.meta.timestamp.received.since
+  const timeAgo = msg.value.meta.timestamp.received.since.replace('~', '')
 
   const depth = lodash.get(msg, 'value.meta.thread.depth', 0)
 
@@ -64,10 +64,6 @@ module.exports = ({ msg }) => {
 
   const likeCount = msg.value.meta.votes.length
 
-  const parentLink = msg.value.content.root != null
-    ? a({ href: url.parent }, 'parent')
-    : null
-
   const messageClasses = []
 
   if (isPrivate) {
@@ -82,6 +78,19 @@ module.exports = ({ msg }) => {
     messageClasses.push('reply')
   }
 
+  const postOptions = {
+    post: null,
+    replyAll: [
+      'replied to ',
+      a({ href: url.parent }, ' thread')
+    ],
+    reply: [
+      'replied to ',
+      a({ href: url.parent }, ' message')
+    ],
+    mystery: 'posted a mysterious message'
+  }
+
   const emptyContent = '<p>undefined</p>\n'
   const articleElement = markdownContent === emptyContent
     ? article({ class: 'content' }, pre({
@@ -105,17 +114,19 @@ module.exports = ({ msg }) => {
       class: messageClasses.join(' '),
       style: `margin-left: ${depth}rem;`
     },
-    header({ class: 'metadata' },
-      a({ href: url.author },
-        img({ class: 'avatar', src: url.avatar, alt: '' })),
-      span({ class: 'text' },
-        span({ class: 'author' },
-          a({ href: url.author }, name)),
-        isPrivate ? ' privately 🔒' : null,
-        span(` ${msg.value.meta.postType}`),
-        span(` ${timeAgo} ago`),
-        ':'
-      )),
+    header(
+      span({ class: 'author' },
+        a({ href: url.author },
+          img({ class: 'avatar', src: url.avatar, alt: '' }),
+          name
+        ),
+        postOptions[msg.value.meta.postType]
+      ),
+      span({ class: 'time' },
+        isPrivate ? '🔒' : null,
+        a({ href: url.link }, timeAgo)
+      )
+    ),
     articleContent,
 
     // HACK: centered-footer
@@ -140,8 +151,6 @@ module.exports = ({ msg }) => {
         `❤ ${likeCount}`)),
       isPrivate ? null : a({ href: url.reply }, 'reply'),
       isPrivate ? null : a({ href: url.replyAll }, 'reply all'),
-      a({ href: url.link }, 'link'),
-      parentLink,
       a({ href: url.json }, 'json')
     ))