Skip to content

Commit

Permalink
Change layout of public profile directory to be the same as in web UI
Browse files Browse the repository at this point in the history
  • Loading branch information
Gargron committed Aug 30, 2019
1 parent 7235f53 commit 06d1c2e
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 5 deletions.
2 changes: 1 addition & 1 deletion app/controllers/directories_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ def set_tag
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
Expand Down
20 changes: 20 additions & 0 deletions app/helpers/statuses_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,26 @@ def account_action_button(account)
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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand All @@ -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'>
Expand Down
7 changes: 7 additions & 0 deletions app/javascript/styles/mastodon/components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5367,6 +5367,7 @@ a.status-card.compact:hover {
height: 125px;
position: relative;
background: darken($ui-base-color, 12%);
overflow: hidden;

img {
display: block;
Expand All @@ -5388,6 +5389,7 @@ a.status-card.compact:hover {
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
}

&__relationship {
Expand Down Expand Up @@ -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;
Expand All @@ -5464,6 +5467,10 @@ a.status-card.compact:hover {
display: inline;
}
}

br {
display: none;
}
}
}
}
Expand Down
18 changes: 18 additions & 0 deletions app/javascript/styles/mastodon/containers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
37 changes: 35 additions & 2 deletions app/views/directories/index.html.haml
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit 06d1c2e

Please sign in to comment.