From 5ae54f9e364880e1350ddcc8251a23cf79ae55fc Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 28 Feb 2016 00:51:05 +0100
Subject: [PATCH] Adding avatars to profile page and statuses

---
 .gitignore                              |   1 +
 app/assets/images/avatars/missing.png   | Bin 0 -> 3890 bytes
 app/assets/stylesheets/application.scss |  13 +++++
 app/assets/stylesheets/profile.scss     |  62 ++++++++++++++++--------
 app/models/account.rb                   |   8 ++-
 app/views/profile/_status.html.haml     |  16 +++---
 app/views/profile/show.html.haml        |  12 +++--
 7 files changed, 81 insertions(+), 31 deletions(-)
 create mode 100644 app/assets/images/avatars/missing.png

diff --git a/.gitignore b/.gitignore
index 6d3b79652..b4a53fe1b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@
 !/log/.keep
 /tmp
 coverage
+public/system
diff --git a/app/assets/images/avatars/missing.png b/app/assets/images/avatars/missing.png
new file mode 100644
index 0000000000000000000000000000000000000000..40353039fd4c94c018d765c97bcd935fd0307a88
GIT binary patch
literal 3890
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
SMri;l3)0s$)+y0K;r|6j?Dc~H

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 91b0d12fe..068480994 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss
index 5508b8424..e2b59268a 100644
--- a/app/assets/stylesheets/profile.scss
+++ b/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;
-
-    .num {
+    margin-right: 10px;
+    padding: 10px;
+    margin-top: -30px;
+
+    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;
diff --git a/app/models/account.rb b/app/models/account.rb
index 0940118dc..f1ac6fdd7 100644
--- a/app/models/account.rb
+++ b/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)
diff --git a/app/views/profile/_status.html.haml b/app/views/profile/_status.html.haml
index 44c58b84e..c2033b4f7 100644
--- a/app/views/profile/_status.html.haml
+++ b/app/views/profile/_status.html.haml
@@ -4,9 +4,13 @@
       %i.fa.fa-retweet
       Shared by
       = link_to display_name(status.account), profile_url(status.account), class: 'name'
-  .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 }
+  .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
+        = status.content
+      .counters
+        = render partial: 'status_footer', locals: { status: status.reblog? ? status.reblog : status }
diff --git a/app/views/profile/show.html.haml b/app/views/profile/show.html.haml
index c84cb7e81..b93791734 100644
--- a/app/views/profile/show.html.haml
+++ b/app/views/profile/show.html.haml
@@ -1,8 +1,10 @@
-%div.card
-  %h1.name
-    = @account.display_name.blank? ? @account.username : @account.display_name
-    %small= "@#{@account.username}"
+.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 }