commit: 18513a978aecd36bf61a5cd7dba08f9f20729de9
parent: c33931b613c7da4cc2c22ff8411c38556dc579cb
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 26 Feb 2018 16:18:41 +0100
Improve public account cards (#6559)
- Add follow/unfollow/remote follow buttons
- Format the bio properly
- Always show username@domain, even for local accounts
Diffstat:
6 files changed, 73 insertions(+), 51 deletions(-)
diff --git a/app/controllers/follower_accounts_controller.rb b/app/controllers/follower_accounts_controller.rb
@@ -7,7 +7,9 @@ class FollowerAccountsController < ApplicationController
@follows = Follow.where(target_account: @account).recent.page(params[:page]).per(FOLLOW_PER_PAGE).preload(:account)
respond_to do |format|
- format.html
+ format.html do
+ @relationships = AccountRelationshipsPresenter.new(@follows.map(&:account_id), current_user.account_id) if user_signed_in?
+ end
format.json do
render json: collection_presenter,
diff --git a/app/controllers/following_accounts_controller.rb b/app/controllers/following_accounts_controller.rb
@@ -7,7 +7,9 @@ class FollowingAccountsController < ApplicationController
@follows = Follow.where(account: @account).recent.page(params[:page]).per(FOLLOW_PER_PAGE).preload(:target_account)
respond_to do |format|
- format.html
+ format.html do
+ @relationships = AccountRelationshipsPresenter.new(@follows.map(&:target_account_id), current_user.account_id) if user_signed_in?
+ end
format.json do
render json: collection_presenter,
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
@@ -97,32 +97,6 @@
}
}
- .controls {
- position: absolute;
- top: 15px;
- left: 15px;
- z-index: 2;
-
- .icon-button {
- color: rgba($white, 0.8);
- text-decoration: none;
- font-size: 13px;
- line-height: 13px;
- font-weight: 500;
-
- .fa {
- font-weight: 400;
- margin-right: 5px;
- }
-
- &:hover,
- &:active,
- &:focus {
- color: $white;
- }
- }
- }
-
.roles {
margin-bottom: 30px;
padding: 0 15px;
@@ -226,6 +200,40 @@
}
}
+.card,
+.account-grid-card {
+ .controls {
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ z-index: 2;
+
+ .icon-button {
+ color: rgba($white, 0.8);
+ text-decoration: none;
+ font-size: 13px;
+ line-height: 13px;
+ font-weight: 500;
+
+ .fa {
+ font-weight: 400;
+ margin-right: 5px;
+ }
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: $white;
+ }
+ }
+ }
+}
+
+.account-grid-card .controls {
+ left: auto;
+ right: 15px;
+}
+
.pagination {
padding: 30px 0;
text-align: center;
@@ -411,13 +419,14 @@
font-weight: 400;
}
- .note {
+ .account__header__content {
padding: 10px 15px;
padding-top: 15px;
- box-sizing: border-box;
color: lighten($ui-base-color, 26%);
word-wrap: break-word;
- min-height: 80px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ height: 5.5em;
}
}
}
diff --git a/app/views/accounts/_follow_button.html.haml b/app/views/accounts/_follow_button.html.haml
@@ -0,0 +1,23 @@
+- relationships ||= nil
+
+- unless account.memorial? || account.moved?
+ - if user_signed_in?
+ - requested = relationships ? relationships.requested[account.id].present? : current_account.requested?(account)
+ - following = relationships ? relationships.following[account.id].present? : current_account.following?(account)
+
+ - if user_signed_in? && current_account.id != account.id && !requested
+ .controls
+ - if following
+ = link_to account_unfollow_path(account), data: { method: :post }, class: 'icon-button' do
+ = fa_icon 'user-times'
+ = t('accounts.unfollow')
+ - else
+ = link_to account_follow_path(account), data: { method: :post }, class: 'icon-button' do
+ = fa_icon 'user-plus'
+ = t('accounts.follow')
+ - elsif !user_signed_in?
+ .controls
+ .remote-follow
+ = link_to account_remote_follow_path(account), class: 'icon-button' do
+ = fa_icon 'user-plus'
+ = t('accounts.remote_follow')
diff --git a/app/views/accounts/_grid_card.html.haml b/app/views/accounts/_grid_card.html.haml
@@ -1,9 +1,12 @@
.account-grid-card
.account-grid-card__header{ style: "background-image: url(#{account.header.url(:original)})" }
+ = render 'accounts/follow_button', account: account, relationships: @relationships
.account-grid-card__avatar
.avatar= image_tag account.avatar.url(:original)
.name
= link_to TagManager.instance.url_for(account) do
%span.display_name.emojify= display_name(account)
- %span.username @#{account.acct}
- %p.note.emojify= truncate(strip_tags(account.note), length: 150)
+ %span.username
+ @#{account.local? ? account.local_username_and_domain : account.acct}
+ = fa_icon('lock') if account.locked?
+ .account__header__content.p-note.emojify= Formatter.instance.simplified_format(account)
diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml
@@ -1,23 +1,6 @@
.card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" }
.card__illustration
- - unless account.memorial? || account.moved?
- - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account)
- .controls
- - if current_account.following?(account)
- = link_to account_unfollow_path(account), data: { method: :post }, class: 'icon-button' do
- = fa_icon 'user-times'
- = t('accounts.unfollow')
- - else
- = link_to account_follow_path(account), data: { method: :post }, class: 'icon-button' do
- = fa_icon 'user-plus'
- = t('accounts.follow')
- - elsif !user_signed_in?
- .controls
- .remote-follow
- = link_to account_remote_follow_path(account), class: 'icon-button' do
- = fa_icon 'user-plus'
- = t('accounts.remote_follow')
-
+ = render 'accounts/follow_button', account: account
.avatar= image_tag account.avatar.url(:original), class: 'u-photo'
.card__bio
