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

Author: Gargron

app/controllers/directories_controller.rb

@@ -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

app/helpers/statuses_helper.rb

@@ -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

app/javascript/mastodon/features/directory/components/account_card.js

@@ -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'>

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;
+        }
       }
     }
   }

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;

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