forked from treehouse/mastodon
Change layout of public profile directory to be the same as in web UI (#11705)
parent
7235f538c6
commit
9871904172
|
@ -28,7 +28,7 @@ class DirectoriesController < ApplicationController
|
|||
end
|
||||
|
||||
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.not_excluded_by_account(current_account)) if current_account
|
||||
end
|
||||
|
|
|
@ -34,6 +34,26 @@ module StatusesHelper
|
|||
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
|
||||
content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976')
|
||||
end
|
||||
|
|
|
@ -119,7 +119,7 @@ class AccountCard extends ImmutablePureComponent {
|
|||
return (
|
||||
<div className='directory__card'>
|
||||
<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 className='directory__card__bar'>
|
||||
|
@ -134,7 +134,7 @@ class AccountCard extends ImmutablePureComponent {
|
|||
</div>
|
||||
|
||||
<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 className='directory__card__extra'>
|
||||
|
|
|
@ -5367,6 +5367,7 @@ a.status-card.compact:hover {
|
|||
height: 125px;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 12%);
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
|
@ -5388,6 +5389,7 @@ a.status-card.compact:hover {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__relationship {
|
||||
|
@ -5453,6 +5455,7 @@ a.status-card.compact:hover {
|
|||
padding: 15px 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
width: 100%;
|
||||
min-height: 18px + 30px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -5464,6 +5467,10 @@ a.status-card.compact:hover {
|
|||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
@ -17,7 +17,40 @@
|
|||
- if @accounts.empty?
|
||||
= nothing_here
|
||||
- else
|
||||
.card-grid
|
||||
= render partial: 'application/card', collection: @accounts, as: :account
|
||||
.directory__list
|
||||
- @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
|
||||
|
|
Loading…
Reference in New Issue