Adding avatars to profile page and statuses

.gitignore

@@ -16,3 +16,4 @@
 !/log/.keep
 /tmp
 coverage
+public/system

app/assets/stylesheets/application.scss

@@ -14,11 +14,24 @@ body {
   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;
+  }
 }
 
 .container {
   width: 800px;
   margin: 0 auto;
+  z-index: 2;
 }
 
 .footer {

app/assets/stylesheets/profile.scss

@@ -1,5 +1,13 @@
 .card {
-  padding-top: 20px;
+  margin-top: 40px;
+  display: flex;
+  background: darken($background-color, 10%);
+  border-bottom: 1px solid darken($background-color, 15%);
+  box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1);
+
+  .bio {
+    flex-grow: 1;
+  }
 
   .name {
     font-size: 24px;
@@ -12,24 +20,18 @@
     }
   }
 
-  .bio {
-
-  }
-
-  .counter {
-    display: block;
+  .avatar {
+    width: 96px;
     float: left;
-    width: 100px;
-    text-align: center;
-    border: 1px solid #A593E0;
-    color: #A593E0;
-    border-radius: 5px;
-    padding: 3px 0;
-    margin-right: 3px;
+    margin-right: 10px;
+    padding: 10px;
+    margin-top: -30px;
 
-    .num {
+    img {
+      width: 94px;
+      height: 94px;
       display: block;
-      font-size: 24px;
+      border: 2px solid $background-color;
     }
   }
 }
@@ -52,11 +54,33 @@
     }
   }
 
+  .entry-container {
+    display: flex;
+  }
+
+  .avatar {
+    width: 48px;
+    padding: 10px;
+    padding-left: 8px;
+    padding-right: 0;
+    padding-top: 12px;
+
+    img {
+      width: 48px;
+      height: 48px;
+      display: block;
+      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .container {
+    flex-grow: 1;
+  }
+
   .header {
     margin-bottom: 10px;
     padding: 10px;
     padding-bottom: 0;
-    padding-left: 8px;
 
     .name {
       text-decoration: none;
@@ -79,6 +103,7 @@
     color: $tertiary-color;
     padding: 5px 10px;
     padding-left: 8px;
+    clear: both;
 
     .name {
       color: $tertiary-color;
@@ -112,7 +137,6 @@
     cursor: default;
     padding: 10px;
     padding-top: 0;
-    padding-left: 8px;
 
     .counter {
       display: inline-block;

app/models/account.rb

@@ -3,7 +3,8 @@ class Account < ActiveRecord::Base
   has_one :user, inverse_of: :account
 
   # Avatar upload
-  has_attached_file :avatar, styles: { large: '300x300#', medium: '96x96#', small: '48x48#' }
+  attr_reader :avatar_remote_url
+  has_attached_file :avatar, styles: { large: '300x300#', medium: '96x96#', small: '48x48#' }, default_url: 'avatars/missing.png'
   validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\Z/
 
   # Timelines
@@ -64,6 +65,11 @@ class Account < ActiveRecord::Base
     @subscription ||= OStatus2::Subscription.new(self.remote_url, secret: self.secret, token: self.verify_token, webhook: webhook_url, hub: self.hub_url)
   end
 
+  def avatar_remote_url=(url)
+    self.avatar = URI.parse(url)
+    @avatar_remote_url = url
+  end
+
   before_create do
     if local?
       keypair = OpenSSL::PKey::RSA.new(Rails.env.test? ? 48 : 2048)

app/views/profile/_status.html.haml

@@ -4,6 +4,10 @@
       %i.fa.fa-retweet
       Shared by
       = link_to display_name(status.account), profile_url(status.account), class: 'name'
+  .entry-container
+    .avatar
+      = image_tag status.reblog? ? status.reblog.account.avatar.url(:small) : status.account.avatar.url(:small)
+    .container
       .header
         = render partial: 'status_header', locals: { status: status.reblog? ? status.reblog : status }
       .content

app/views/profile/show.html.haml

@@ -1,8 +1,10 @@
-%div.card
+.card
+  .avatar= image_tag @account.avatar.url(:medium)
+  .bio
     %h1.name
       = @account.display_name.blank? ? @account.username : @account.display_name
       %small= "@#{@account.username}"
 
-%div.activity-stream
+.activity-stream
   - @account.statuses.order('id desc').each do |status|
     = render partial: 'status', locals: { status: status }