From 987190417228bb56041ea824772341f07f4263d6 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 30 Aug 2019 07:41:16 +0200 Subject: Change layout of public profile directory to be the same as in web UI (#11705) --- app/controllers/directories_controller.rb | 2 +- app/helpers/statuses_helper.rb | 20 ++++++++++++ .../features/directory/components/account_card.js | 4 +-- app/javascript/styles/mastodon/components.scss | 7 ++++ app/javascript/styles/mastodon/containers.scss | 18 +++++++++++ app/views/directories/index.html.haml | 37 ++++++++++++++++++++-- 6 files changed, 83 insertions(+), 5 deletions(-) diff --git a/app/controllers/directories_controller.rb b/app/controllers/directories_controller.rb index 7244f02f0..7da975a23 100644 --- a/app/controllers/directories_controller.rb +++ b/app/controllers/directories_controller.rb @@ -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 diff --git a/app/helpers/statuses_helper.rb b/app/helpers/statuses_helper.rb index e067380f6..8380b3c42 100644 --- a/app/helpers/statuses_helper.rb +++ b/app/helpers/statuses_helper.rb @@ -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 diff --git a/app/javascript/mastodon/features/directory/components/account_card.js b/app/javascript/mastodon/features/directory/components/account_card.js index a9c9976be..cb23a02ba 100644 --- a/app/javascript/mastodon/features/directory/components/account_card.js +++ b/app/javascript/mastodon/features/directory/components/account_card.js @@ -119,7 +119,7 @@ class AccountCard extends ImmutablePureComponent { return (
- +
@@ -134,7 +134,7 @@ class AccountCard extends ImmutablePureComponent {
- {account.get('note').length > 0 && account.get('note') !== '

' &&
} +
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 1129680f1..d7e90fcaf 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -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; + } } } } diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 2b6794ee2..e769c495b 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -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; diff --git a/app/views/directories/index.html.haml b/app/views/directories/index.html.haml index 54b27114c..30daa6bb1 100644 --- a/app/views/directories/index.html.haml +++ b/app/views/directories/index.html.haml @@ -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 -- cgit