Adding avatars to profile page and statuses

custom
Eugen Rochko 7 years ago
parent 2c70f0ecaa
commit 5ae54f9e36
  1. 1
      .gitignore
  2. BIN
      app/assets/images/avatars/missing.png
  3. 13
      app/assets/stylesheets/application.scss
  4. 62
      app/assets/stylesheets/profile.scss
  5. 8
      app/models/account.rb
  6. 16
      app/views/profile/_status.html.haml
  7. 12
      app/views/profile/show.html.haml

1
.gitignore vendored

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

@ -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 {

@ -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;

@ -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)

@ -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 }

@ -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 }

Loading…
Cancel
Save