Improving status display design, including replies and threads

app/assets/stylesheets/application.scss

@@ -3,42 +3,33 @@ $secondary-color: #ffc952;
 $tertiary-color: #47b8e0;
 $quaternary-color: #34314c;
 $background-color: #fff;
+$darker-background-color: #e3dede;
+$text-color: #333030;
+$lighter-text-color: #8b8687;
 
 @import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic");
 @import "font-awesome-sprockets";
 @import "font-awesome";
 
 body {
   font-family: 'Noto Sans', sans-serif;
-  background: $secondary-color;
+  background: $background-color image-url('background-pattern.png');
   font-size: 13px;
   line-height: 18px;
-  color: $quaternary-color;
-
-  &::before {
-    display: block;
-    content: "";
-    position: absolute;
-    background: $secondary-color;
-    width: 100%;
-    height: 200px;
-    z-index: -1;
-    top: 0;
-    left: 0;
-  }
+  color: $text-color;
 }
 
 .container {
   width: 800px;
   margin: 0 auto;
-  z-index: 2;
+  margin-top: 40px;
 }
 
 .footer {
   text-align: center;
   padding: 100px 0;
   font-size: 12px;
-  color: lighten($quaternary-color, 15%);
+  color: $text-color;
 
   .mastodon-link {
     color: $quaternary-color;

app/assets/stylesheets/profile.scss

@@ -1,8 +1,7 @@
 .card {
-  margin-top: 40px;
   display: flex;
-  background: darken($background-color, 10%);
-  border-bottom: 1px solid darken($background-color, 15%);
+  background: $darker-background-color;
+  border: 1px solid darken($darker-background-color, 15%);
   box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1);
 
   .bio {
@@ -12,11 +11,12 @@
   .name {
     font-size: 24px;
     line-height: 18px * 1.5;
+    color: $text-color;
 
     small {
       display: block;
       font-size: 14px;
-      color: lighten($quaternary-color, 15%);
+      color: $lighter-text-color;
     }
   }
 
@@ -25,13 +25,15 @@
     float: left;
     margin-right: 10px;
     padding: 10px;
+    padding-left: 9px;
     margin-top: -30px;
 
     img {
       width: 94px;
       height: 94px;
       display: block;
-      border: 2px solid $background-color;
+      border: 2px solid $lighter-text-color;
+      border-radius: 5px;
     }
   }
 }
@@ -49,12 +51,17 @@
       border-left: 2px solid $tertiary-color;
     }
 
+    &.entry-predecessor, &.entry-successor {
+      border-left: 2px solid $lighter-text-color;
+      background: darken($background-color, 5%);
+    }
+
     &:last-child {
       border-bottom: 0;
     }
   }
 
-  .entry-container {
+  .entry__container {
     display: flex;
   }
 
@@ -69,11 +76,11 @@
       width: 48px;
       height: 48px;
       display: block;
-      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 5px;
     }
   }
 
-  .container {
+  .entry__container__container {
     flex-grow: 1;
   }
 
@@ -84,10 +91,10 @@
 
     .name {
       text-decoration: none;
-      color: lighten($quaternary-color, 15%);
+      color: $lighter-text-color;
 
       strong {
-        color: $quaternary-color;
+        color: $text-color;
       }
 
       &:hover {
@@ -124,7 +131,7 @@
 
   .time {
     text-decoration: none;
-    color: lighten($quaternary-color, 15%);
+    color: $lighter-text-color;
 
     &:hover {
       text-decoration: underline;
@@ -133,15 +140,15 @@
 
   .counters {
     margin-top: 15px;
-    color: lighten($quaternary-color, 15%);
+    color: $lighter-text-color;
     cursor: default;
     padding: 10px;
     padding-top: 0;
 
     .counter {
       display: inline-block;
       margin-right: 10px;
-      color: lighten($quaternary-color, 50%);
+      color: $lighter-text-color;
     }
 
     .conversation-link {

app/helpers/profile_helper.rb

@@ -10,4 +10,21 @@ def profile_url(account)
   def status_url(status)
     status.local? ? super(name: status.account.username, id: status.stream_entry.id) : status.url
   end
+
+  def avatar_for_status_url(status)
+    status.reblog? ? status.reblog.account.avatar.url(:small) : status.account.avatar.url(:small)
+  end
+
+  def entry_classes(status, is_predecessor, is_successor, include_threads)
+    classes = ['entry']
+    classes << 'entry-reblog' if status.reblog?
+    classes << 'entry-predecessor' if is_predecessor
+    classes << 'entry-successor' if is_successor
+    classes << 'entry-center' if include_threads
+    classes.join(' ')
+  end
+
+  def relative_time(date)
+    date < 5.days.ago ? date.strftime("%d.%m.%Y") : "#{time_ago_in_words(date)} ago"
+  end
 end

app/views/profile/_status.html.haml

@@ -1,16 +1,23 @@
-%div.entry{ class: status.reblog? ? 'entry-reblog' : 'entry-status' }
+- if status.reply? && include_threads
+  = render partial: 'status', locals: { status: status.thread, include_threads: false, is_predecessor: true, is_successor: false }
+
+.entry{ class: entry_classes(status, is_predecessor, is_successor, include_threads) }
   - if status.reblog?
     .pre-header
       %i.fa.fa-retweet
       Shared by
       = link_to display_name(status.account), profile_url(status.account), class: 'name'
-  .entry-container
+  .entry__container
     .avatar
-      = image_tag status.reblog? ? status.reblog.account.avatar.url(:small) : status.account.avatar.url(:small)
-    .container
+      = image_tag avatar_for_status_url(status)
+    .entry__container__container
       .header
         = render partial: 'status_header', locals: { status: status.reblog? ? status.reblog : status }
       .content
         = status.content
       .counters
         = render partial: 'status_footer', locals: { status: status.reblog? ? status.reblog : status }
+
+- if include_threads
+  - status.replies.each do |status|
+    = render partial: 'status', locals: { status: status, include_threads: false, is_successor: true, is_predecessor: false }

app/views/profile/_status_header.html.haml

@@ -4,5 +4,4 @@
 
 = link_to status_url(status), class: 'time' do
   %span{ title: status.created_at }
-    = time_ago_in_words(status.created_at)
-    ago
+    = relative_time(status.created_at)

app/views/profile/entry.html.haml

@@ -1,2 +1,2 @@
 %div.activity-stream
-  = render partial: @type, locals: { @type.to_sym => @entry.activity }
+  = render partial: @type, locals: { @type.to_sym => @entry.activity, include_threads: true, is_predecessor: false, is_successor: false }

app/views/profile/show.html.haml

@@ -7,4 +7,4 @@
 
 .activity-stream
   - @account.statuses.order('id desc').each do |status|
-    = render partial: 'status', locals: { status: status }
+    = render partial: 'status', locals: { status: status, include_threads: false, is_successor: false, is_predecessor: false }