Redesign public profiles (#4608)

* Redesign public profiles

* Responsive design

* Change public profile status filtering defaults and add options

- No longer displays private/direct toots even if you are permitted access
- By default omits replies
- "With replies" option
- "Media only" option

* Redesign account grid cards

* Fix style issues

3 files changed, 49 insertions, 26 deletions

diff --git a/app/views/accounts/_grid_card.html.haml b/app/views/accounts/_grid_card.html.haml
index 0571d1d5e..305eb2c44 100644
--- a/app/views/accounts/_grid_card.html.haml
+++ b/app/views/accounts/_grid_card.html.haml
@@ -1,8 +1,9 @@
 .account-grid-card
-  .account-grid-card__header
+  .account-grid-card__header{ style: "background-image: url(#{account.header.url(:original)})" }
+  .account-grid-card__avatar
     .avatar= image_tag account.avatar.url(:original)
-    .name
-      = link_to TagManager.instance.url_for(account) do
-        %span.display_name.emojify= display_name(account)
-        %span.username @#{account.acct}
+  .name
+    = link_to TagManager.instance.url_for(account) do
+      %span.display_name.emojify= display_name(account)
+      %span.username @#{account.acct}
   %p.note.emojify= truncate(strip_tags(account.note), length: 150)
diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml
index 6451a5573..8009e903e 100644
--- a/app/views/accounts/_header.html.haml
+++ b/app/views/accounts/_header.html.haml
@@ -1,34 +1,51 @@
 .card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" }
-  - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account)
-    .controls
-      - if current_account.following?(account)
-        = link_to t('accounts.unfollow'), account_unfollow_path(account), data: { method: :post }, class: 'button'
-      - else
-        = link_to t('accounts.follow'), account_follow_path(account), data: { method: :post }, class: 'button'
-  - elsif !user_signed_in?
-    .controls
-      .remote-follow
-        = link_to t('accounts.remote_follow'), account_remote_follow_path(account), class: 'button'
-  .avatar= image_tag account.avatar.url(:original), class: 'u-photo'
-  %h1.name
-    %span.p-name.emojify= display_name(account)
-    %small
-      %span @#{account.username}
-      = fa_icon('lock') if account.locked?
-  .details
+  .card__illustration
+    - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account)
+      .controls
+        - if current_account.following?(account)
+          = link_to account_unfollow_path(account), data: { method: :post }, class: 'icon-button' do
+            = fa_icon 'user-times'
+            = t('accounts.unfollow')
+        - else
+          = link_to account_follow_path(account), data: { method: :post }, class: 'icon-button' do
+            = fa_icon 'user-plus'
+            = t('accounts.follow')
+    - elsif !user_signed_in?
+      .controls
+        .remote-follow
+          = link_to account_remote_follow_path(account), class: 'icon-button' do
+            = fa_icon 'user-plus'
+            = t('accounts.remote_follow')
+
+    .avatar= image_tag account.avatar.url(:original), class: 'u-photo'
+
+  .card__bio
+    %h1.name
+      %span.p-name.emojify= display_name(account)
+      %small
+        %span @#{account.local_username_and_domain}
+        = fa_icon('lock') if account.locked?
+
+    - if account.user_admin?
+      .roles
+        .account-role
+          = t 'accounts.roles.admin'
+
     .bio
       .account__header__content.p-note.emojify= Formatter.instance.simplified_format(account)
 
     .details-counters
       .counter{ class: active_nav_class(short_account_url(account)) }
         = link_to short_account_url(account), class: 'u-url u-uid' do
-          %span.counter-label= t('accounts.posts')
           %span.counter-number= number_with_delimiter account.statuses_count
+          %span.counter-label= t('accounts.posts')
+
       .counter{ class: active_nav_class(account_following_index_url(account)) }
         = link_to account_following_index_url(account) do
-          %span.counter-label= t('accounts.following')
           %span.counter-number= number_with_delimiter account.following_count
+          %span.counter-label= t('accounts.following')
+
       .counter{ class: active_nav_class(account_followers_url(account)) }
         = link_to account_followers_url(account) do
-          %span.counter-label= t('accounts.followers')
           %span.counter-number= number_with_delimiter account.followers_count
+          %span.counter-label= t('accounts.followers')
diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml
index 74e695fc3..ec44f4c74 100644
--- a/app/views/accounts/show.html.haml
+++ b/app/views/accounts/show.html.haml
@@ -20,6 +20,11 @@
 
   = render 'header', account: @account
 
+  .activity-stream-tabs
+    = active_link_to t('accounts.posts'), short_account_url(@account)
+    = active_link_to t('accounts.posts_with_replies'), short_account_with_replies_url(@account)
+    = active_link_to t('accounts.media'), short_account_media_url(@account)
+
   - if @statuses.empty?
     .accounts-grid
       = render 'nothing_here'
@@ -29,4 +34,4 @@
 
   - if @statuses.size == 20
     .pagination
-      = link_to safe_join([t('pagination.next'), fa_icon('chevron-right')], ' '), short_account_url(@account, max_id: @statuses.last.id), class: 'next', rel: 'next'
+      = link_to safe_join([t('pagination.next'), fa_icon('chevron-right')], ' '), @next_url, class: 'next', rel: 'next'