Change layout of public profile directory to be the same as in web UI (#11705)

This commit is contained in:
Eugen Rochko 2019-08-30 07:41:16 +02:00 committed by GitHub
parent 7235f538c6
commit 9871904172
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 83 additions and 5 deletions

View File

@ -28,7 +28,7 @@ class DirectoriesController < ApplicationController
end end
def set_accounts def set_accounts
@accounts = Account.local.discoverable.by_recent_status.page(params[:page]).per(15).tap do |query| @accounts = Account.local.discoverable.by_recent_status.page(params[:page]).per(20).tap do |query|
query.merge!(Account.tagged_with(@tag.id)) if @tag query.merge!(Account.tagged_with(@tag.id)) if @tag
query.merge!(Account.not_excluded_by_account(current_account)) if current_account query.merge!(Account.not_excluded_by_account(current_account)) if current_account
end end

View File

@ -34,6 +34,26 @@ module StatusesHelper
end end
end end
def minimal_account_action_button(account)
if user_signed_in?
return if account.id == current_user.account_id
if current_account.following?(account) || current_account.requested?(account)
link_to account_unfollow_path(account), class: 'icon-button active', data: { method: :post }, title: t('accounts.unfollow') do
fa_icon('user-times fw')
end
elsif !(account.memorial? || account.moved?)
link_to account_follow_path(account), class: "icon-button#{account.blocking?(current_account) ? ' disabled' : ''}", data: { method: :post }, title: t('accounts.follow') do
fa_icon('user-plus fw')
end
end
elsif !(account.memorial? || account.moved?)
link_to account_remote_follow_path(account), class: 'icon-button modal-button', target: '_new', title: t('accounts.follow') do
fa_icon('user-plus fw')
end
end
end
def svg_logo def svg_logo
content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976') content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976')
end end

View File

@ -119,7 +119,7 @@ class AccountCard extends ImmutablePureComponent {
return ( return (
<div className='directory__card'> <div className='directory__card'>
<div className='directory__card__img'> <div className='directory__card__img'>
<img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' className='parallax' /> <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' />
</div> </div>
<div className='directory__card__bar'> <div className='directory__card__bar'>
@ -134,7 +134,7 @@ class AccountCard extends ImmutablePureComponent {
</div> </div>
<div className='directory__card__extra'> <div className='directory__card__extra'>
{account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content' dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} />} <div className='account__header__content' dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} />
</div> </div>
<div className='directory__card__extra'> <div className='directory__card__extra'>

View File

@ -5367,6 +5367,7 @@ a.status-card.compact:hover {
height: 125px; height: 125px;
position: relative; position: relative;
background: darken($ui-base-color, 12%); background: darken($ui-base-color, 12%);
overflow: hidden;
img { img {
display: block; display: block;
@ -5388,6 +5389,7 @@ a.status-card.compact:hover {
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
overflow: hidden;
} }
&__relationship { &__relationship {
@ -5453,6 +5455,7 @@ a.status-card.compact:hover {
padding: 15px 10px; padding: 15px 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
width: 100%; width: 100%;
min-height: 18px + 30px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -5464,6 +5467,10 @@ a.status-card.compact:hover {
display: inline; display: inline;
} }
} }
br {
display: none;
}
} }
} }
} }

View File

@ -763,6 +763,24 @@
} }
} }
.directory__list {
display: grid;
grid-gap: 10px;
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
@media screen and (max-width: $no-gap-breakpoint) {
display: block;
}
.icon-button {
font-size: 18px;
}
}
.directory__card {
margin-bottom: 0;
}
.card-grid { .card-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

View File

@ -17,7 +17,40 @@
- if @accounts.empty? - if @accounts.empty?
= nothing_here = nothing_here
- else - else
.card-grid .directory__list
= render partial: 'application/card', collection: @accounts, as: :account - @accounts.each do |account|
.directory__card
.directory__card__img
= image_tag account.header.url, alt: ''
.directory__card__bar
= link_to TagManager.instance.url_for(account), class: 'directory__card__bar__name' do
.avatar
= image_tag account.avatar.url, alt: '', width: 48, height: 48, class: 'u-photo'
.display-name
%span{ id: "default_account_display_name", style: "display: none" }= account.username
%bdi
%strong.emojify.p-name= display_name(account, custom_emojify: true)
%span= acct(account)
.directory__card__bar__relationship.account__relationship
= minimal_account_action_button(account)
.directory__card__extra
.account__header__content.emojify= Formatter.instance.simplified_format(account, custom_emojify: true)
.directory__card__extra
.accounts-table__count
= number_to_human account.statuses_count, strip_insignificant_zeros: true
%small= t('accounts.posts', count: account.statuses_count).downcase
.accounts-table__count
= number_to_human account.followers_count, strip_insignificant_zeros: true
%small= t('accounts.followers', count: account.followers_count).downcase
.accounts-table__count
- if account.last_status_at.present?
%time.time-ago{ datetime: account.last_status_at.iso8601, title: l(account.last_status_at) }= l account.last_status_at
- else
= t('invites.expires_in_prompt')
%small= t('accounts.last_active')
= paginate @accounts = paginate @accounts