Adding avatars to profile page and statuses

This commit is contained in:
Eugen Rochko 2016-02-28 00:51:05 +01:00
parent 2c70f0ecaa
commit 5ae54f9e36
7 changed files with 80 additions and 30 deletions

1
.gitignore vendored
View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -14,11 +14,24 @@ body {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
color: $quaternary-color; color: $quaternary-color;
&::before {
display: block;
content: "";
position: absolute;
background: $secondary-color;
width: 100%;
height: 200px;
z-index: -1;
top: 0;
left: 0;
}
} }
.container { .container {
width: 800px; width: 800px;
margin: 0 auto; margin: 0 auto;
z-index: 2;
} }
.footer { .footer {

View File

@ -1,5 +1,13 @@
.card { .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 { .name {
font-size: 24px; font-size: 24px;
@ -12,24 +20,18 @@
} }
} }
.bio { .avatar {
width: 96px;
}
.counter {
display: block;
float: left; float: left;
width: 100px; margin-right: 10px;
text-align: center; padding: 10px;
border: 1px solid #A593E0; margin-top: -30px;
color: #A593E0;
border-radius: 5px;
padding: 3px 0;
margin-right: 3px;
.num { img {
width: 94px;
height: 94px;
display: block; 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 { .header {
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
padding-bottom: 0; padding-bottom: 0;
padding-left: 8px;
.name { .name {
text-decoration: none; text-decoration: none;
@ -79,6 +103,7 @@
color: $tertiary-color; color: $tertiary-color;
padding: 5px 10px; padding: 5px 10px;
padding-left: 8px; padding-left: 8px;
clear: both;
.name { .name {
color: $tertiary-color; color: $tertiary-color;
@ -112,7 +137,6 @@
cursor: default; cursor: default;
padding: 10px; padding: 10px;
padding-top: 0; padding-top: 0;
padding-left: 8px;
.counter { .counter {
display: inline-block; display: inline-block;

View File

@ -3,7 +3,8 @@ class Account < ActiveRecord::Base
has_one :user, inverse_of: :account has_one :user, inverse_of: :account
# Avatar upload # 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/ validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\Z/
# Timelines # 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) @subscription ||= OStatus2::Subscription.new(self.remote_url, secret: self.secret, token: self.verify_token, webhook: webhook_url, hub: self.hub_url)
end end
def avatar_remote_url=(url)
self.avatar = URI.parse(url)
@avatar_remote_url = url
end
before_create do before_create do
if local? if local?
keypair = OpenSSL::PKey::RSA.new(Rails.env.test? ? 48 : 2048) keypair = OpenSSL::PKey::RSA.new(Rails.env.test? ? 48 : 2048)

View File

@ -4,9 +4,13 @@
%i.fa.fa-retweet %i.fa.fa-retweet
Shared by Shared by
= link_to display_name(status.account), profile_url(status.account), class: 'name' = link_to display_name(status.account), profile_url(status.account), class: 'name'
.header .entry-container
= render partial: 'status_header', locals: { status: status.reblog? ? status.reblog : status } .avatar
.content = image_tag status.reblog? ? status.reblog.account.avatar.url(:small) : status.account.avatar.url(:small)
= status.content .container
.counters .header
= render partial: 'status_footer', locals: { status: status.reblog? ? status.reblog : status } = 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 }

View File

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