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

app/controllers/accounts_controller.rb

@@ -7,8 +7,14 @@ class AccountsController < ApplicationController
   def show
     respond_to do |format|
       format.html do
-        @statuses = @account.statuses.permitted_for(@account, current_account).paginate_by_max_id(20, params[:max_id], params[:since_id])
+        if current_account && @account.blocking?(current_account)
+          @statuses = []
+          return
+        end
+
+        @statuses = filtered_statuses.paginate_by_max_id(20, params[:max_id], params[:since_id])
         @statuses = cache_collection(@statuses, Status)
+        @next_url = next_url unless @statuses.empty?
       end
 
       format.atom do
@@ -24,7 +30,40 @@ class AccountsController < ApplicationController
 
   private
 
+  def filtered_statuses
+    default_statuses.tap do |statuses|
+      statuses.merge!(only_media_scope) if request.path.ends_with?('/media')
+      statuses.merge!(no_replies_scope) unless request.path.ends_with?('/with_replies')
+    end
+  end
+
+  def default_statuses
+    @account.statuses.where(visibility: [:public, :unlisted])
+  end
+
+  def only_media_scope
+    Status.where(id: account_media_status_ids)
+  end
+
+  def account_media_status_ids
+    @account.media_attachments.attached.reorder(nil).select(:status_id).distinct
+  end
+
+  def no_replies_scope
+    Status.without_replies
+  end
+
   def set_account
     @account = Account.find_local!(params[:username])
   end
+
+  def next_url
+    if request.path.ends_with?('/media')
+      short_account_media_url(@account, max_id: @statuses.last.id)
+    elsif request.path.ends_with?('/with_replies')
+      short_account_with_replies_url(@account, max_id: @statuses.last.id)
+    else
+      short_account_url(@account, max_id: @statuses.last.id)
+    end
+  end
 end

app/helpers/application_helper.rb

@@ -5,6 +5,10 @@ module ApplicationHelper
     current_page?(path) ? 'active' : ''
   end
 
+  def active_link_to(label, path, options = {})
+    link_to label, path, options.merge(class: active_nav_class(path))
+  end
+
   def show_landing_strip?
     !user_signed_in? && !single_user_mode?
   end

app/javascript/styles/accounts.scss

@@ -1,21 +1,15 @@
 .card {
-  background: $ui-base-color;
+  background-color: lighten($ui-base-color, 4%);
   background-size: cover;
   background-position: center;
-  padding: 60px 0;
-  padding-bottom: 0;
   border-radius: 4px 4px 0 0;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   overflow: hidden;
   position: relative;
-
+  display: flex;
-  @media screen and (max-width: 740px) {
-    border-radius: 0;
-    box-shadow: none;
-  }
 
   &::after {
-    background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
+    background: rgba(darken($ui-base-color, 8%), 0.5);
     display: block;
     content: "";
     position: absolute;
@@ -26,6 +20,31 @@
     z-index: 1;
   }
 
+  @media screen and (max-width: 740px) {
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .card__illustration {
+    padding: 60px 0;
+    position: relative;
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card__bio {
+    max-width: 260px;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: rgba(darken($ui-base-color, 8%), 0.8);
+    position: relative;
+    z-index: 2;
+  }
+
   &.compact {
     padding: 30px 0;
     border-radius: 4px;
@@ -44,11 +63,12 @@
     font-size: 20px;
     line-height: 18px * 1.5;
     color: $primary-text-color;
+    padding: 10px 15px;
+    padding-bottom: 0;
     font-weight: 500;
-    text-align: center;
     position: relative;
     z-index: 2;
-    text-shadow: 0 0 2px $base-shadow-color;
+    margin-bottom: 30px;
 
     small {
       display: block;
@@ -61,7 +81,6 @@
   .avatar {
     width: 120px;
     margin: 0 auto;
-    margin-bottom: 15px;
     position: relative;
     z-index: 2;
 
@@ -70,43 +89,68 @@
       height: 120px;
       display: block;
       border-radius: 120px;
+      box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
     }
   }
 
   .controls {
     position: absolute;
-    top: 10px;
+    top: 15px;
-    right: 10px;
+    left: 15px;
     z-index: 2;
+
+    .icon-button {
+      color: rgba($white, 0.8);
+      text-decoration: none;
+      font-size: 13px;
+      line-height: 13px;
+      font-weight: 500;
+
+      .fa {
+        font-weight: 400;
+        margin-right: 5px;
       }
 
-  .details {
+      &:hover,
-    display: flex;
+      &:active,
-    margin-top: 30px;
+      &:focus {
-    position: relative;
+        color: $white;
-    z-index: 2;
+      }
-    flex-direction: row;
+    }
+  }
+
+  .roles {
+    margin-bottom: 30px;
+    padding: 0 15px;
   }
 
   .details-counters {
+    margin-top: 30px;
     display: flex;
     flex-direction: row;
-    order: 0;
+    width: 100%;
   }
 
   .counter {
-    width: 80px;
+    width: 33.3%;
+    box-sizing: border-box;
+    flex: 0 0 auto;
     color: $ui-primary-color;
     padding: 5px 10px 0;
     margin-bottom: 10px;
-    border-right: 1px solid $ui-primary-color;
+    border-right: 1px solid lighten($ui-base-color, 4%);
     cursor: default;
+    text-align: center;
     position: relative;
 
     a {
       display: block;
     }
 
+    &:last-child {
+      border-right: 0;
+    }
+
     &::after {
       display: block;
       content: "";
@@ -116,7 +160,7 @@
       width: 100%;
       border-bottom: 4px solid $ui-primary-color;
       opacity: 0.5;
-      transition: all 0.8s ease;
+      transition: all 400ms ease;
     }
 
     &.active {
@@ -129,7 +173,7 @@
     &:hover {
       &::after {
         opacity: 1;
-        transition-duration: 0.2s;
+        transition-duration: 100ms;
       }
     }
 
@@ -140,44 +184,40 @@
 
     .counter-label {
       font-size: 12px;
-      text-transform: uppercase;
       display: block;
       margin-bottom: 5px;
-      text-shadow: 0 0 2px $base-shadow-color;
     }
 
     .counter-number {
       font-weight: 500;
       font-size: 18px;
       color: $primary-text-color;
+      font-family: 'mastodon-font-display', sans-serif;
     }
   }
 
   .bio {
-    flex: 1;
     font-size: 14px;
     line-height: 18px;
-    padding: 5px 10px;
+    padding: 0 15px;
     color: $ui-secondary-color;
-    order: 1;
   }
 
   @media screen and (max-width: 480px) {
-    .details {
     display: block;
+
+    .card__bio {
+      max-width: none;
+    }
+
+    .name,
+    .roles {
+      text-align: center;
+      margin-bottom: 15px;
     }
 
     .bio {
-      text-align: center;
+      margin-bottom: 15px;
-      margin-bottom: 20px;
-    }
-
-    .counter {
-      flex: 1 1 auto;
-    }
-
-    .counter:last-child {
-      border-right: none;
     }
   }
 }
@@ -264,13 +304,15 @@
 
 .accounts-grid {
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  background: $simple-background-color;
+  background: darken($simple-background-color, 8%);
   border-radius: 0 0 4px 4px;
   padding: 20px 10px;
   padding-bottom: 10px;
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
+  z-index: 2;
+  position: relative;
 
   @media screen and (max-width: 740px) {
     border-radius: 0;
@@ -280,10 +322,11 @@
   .account-grid-card {
     box-sizing: border-box;
     width: 335px;
-    border: 1px solid $ui-secondary-color;
+    background: $simple-background-color;
     border-radius: 4px;
     color: $ui-base-color;
     margin-bottom: 10px;
+    position: relative;
 
     &:nth-child(odd) {
       margin-right: 10px;
@@ -291,26 +334,52 @@
 
     .account-grid-card__header {
       overflow: hidden;
-      padding: 10px;
+      height: 100px;
-      border-bottom: 1px solid $ui-secondary-color;
+      border-radius: 4px 4px 0 0;
+      background-color: lighten($ui-base-color, 4%);
+      background-size: cover;
+      background-position: center;
+      position: relative;
+
+      &::after {
+        background: rgba(darken($ui-base-color, 8%), 0.5);
+        display: block;
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+    }
+
+    .account-grid-card__avatar {
+      box-sizing: border-box;
+      padding: 15px;
+      position: absolute;
+      z-index: 2;
+      top: 100px - (40px + 2px);
+      left: -2px;
     }
 
     .avatar {
-      width: 60px;
+      width: 80px;
-      height: 60px;
+      height: 80px;
-      float: left;
-      margin-right: 15px;
 
       img {
         display: block;
-        width: 60px;
+        width: 80px;
-        height: 60px;
+        height: 80px;
-        border-radius: 60px;
+        border-radius: 80px;
+        border: 2px solid $simple-background-color;
       }
     }
 
     .name {
+      padding: 15px;
       padding-top: 10px;
+      padding-left: 15px + 80px + 15px;
 
       a {
         display: block;
@@ -318,6 +387,7 @@
         text-decoration: none;
         text-overflow: ellipsis;
         overflow: hidden;
+        font-weight: 500;
 
         &:hover {
           .display_name {
@@ -328,30 +398,36 @@
     }
 
     .display_name {
-      font-size: 14px;
+      font-size: 16px;
       display: block;
     }
 
     .username {
-      color: $ui-highlight-color;
+      color: lighten($ui-base-color, 34%);
+      font-size: 14px;
+      font-weight: 400;
     }
 
     .note {
-      padding: 10px;
+      padding: 10px 15px;
       padding-top: 15px;
-      color: $ui-primary-color;
+      box-sizing: border-box;
+      color: lighten($ui-base-color, 26%);
       word-wrap: break-word;
+      min-height: 80px;
     }
   }
 }
 
 .nothing-here {
+  width: 100%;
+  display: block;
   color: $ui-primary-color;
   font-size: 14px;
   font-weight: 500;
   text-align: center;
-  padding: 15px 0;
+  padding: 60px 0;
-  padding-bottom: 25px;
+  padding-top: 55px;
   cursor: default;
 }
 
@@ -416,3 +492,43 @@
     color: $ui-base-color;
   }
 }
+
+.activity-stream-tabs {
+  background: $simple-background-color;
+  border-bottom: 1px solid $ui-secondary-color;
+  position: relative;
+  z-index: 2;
+
+  a {
+    display: inline-block;
+    padding: 15px;
+    text-decoration: none;
+    color: $ui-highlight-color;
+    text-transform: uppercase;
+    font-weight: 500;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: lighten($ui-highlight-color, 8%);
+    }
+
+    &.active {
+      color: $ui-base-color;
+      cursor: default;
+    }
+  }
+}
+
+.account-role {
+  display: inline-block;
+  padding: 4px 6px;
+  cursor: default;
+  border-radius: 3px;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 500;
+  color: $success-green;
+  background-color: rgba($success-green, 0.1);
+  border: 1px solid rgba($success-green, 0.5);
+}

app/javascript/styles/landing_strip.scss

@@ -5,6 +5,8 @@
   padding: 14px;
   border-radius: 4px;
   margin-bottom: 20px;
+  display: flex;
+  align-items: center;
 
   strong,
   a {
@@ -15,4 +17,15 @@
     color: inherit;
     text-decoration: underline;
   }
+
+  .logo {
+    width: 30px;
+    height: 30px;
+    flex: 0 0 auto;
+    margin-right: 15px;
+  }
+
+  @media screen and (max-width: 740px) {
+    margin-bottom: 0;
+  }
 }

app/javascript/styles/stream_entries.scss

@@ -8,6 +8,7 @@
     .detailed-status.light,
     .status.light {
       border-bottom: 1px solid $ui-secondary-color;
+      animation: none;
     }
 
     &:last-child {
@@ -34,6 +35,14 @@
         }
       }
     }
+
+    @media screen and (max-width: 740px) {
+      &,
+      .detailed-status.light,
+      .status.light {
+        border-radius: 0 !important;
+      }
+    }
   }
 
   &.with-header {
@@ -44,6 +53,14 @@
         .status.light {
           border-radius: 0;
         }
+
+        &:last-child {
+          &,
+          .detailed-status.light,
+          .status.light {
+            border-radius: 0 0 4px 4px;
+          }
+        }
       }
     }
   }

app/models/account.rb

@@ -105,6 +105,7 @@ class Account < ApplicationRecord
            :current_sign_in_ip,
            :current_sign_in_at,
            :confirmed?,
+           :admin?,
            :locale,
            to: :user,
            prefix: true,

app/views/accounts/_grid_card.html.haml

@@ -1,5 +1,6 @@
 .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

app/views/accounts/_header.html.haml

@@ -1,34 +1,51 @@
 .card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" }
+  .card__illustration
     - 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'
+          = link_to account_unfollow_path(account), data: { method: :post }, class: 'icon-button' do
+            = fa_icon 'user-times'
+            = t('accounts.unfollow')
         - else
-        = link_to t('accounts.follow'), account_follow_path(account), data: { method: :post }, class: 'button'
+          = 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 t('accounts.remote_follow'), account_remote_follow_path(account), class: 'button'
+          = 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.username}
+        %span @#{account.local_username_and_domain}
         = fa_icon('lock') if account.locked?
-  .details
+
+    - 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')

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'

app/views/shared/_landing_strip.html.haml

@@ -1,4 +1,7 @@
 .landing-strip
+  = image_tag asset_pack_path('logo.svg'), class: 'logo'
+
+  %div
     = t('landing_strip_html', name: content_tag(:span, display_name(account), class: :emojify), link_to_root_path: link_to(content_tag(:strong, site_hostname), root_path))
 
     - if open_registrations?

config/locales/en.yml

@@ -40,7 +40,11 @@ en:
     nothing_here: There is nothing here!
     people_followed_by: People whom %{name} follows
     people_who_follow: People who follow %{name}
-    posts: Posts
+    posts: Toots
+    posts_with_replies: Toots with replies
+    media: Media
+    roles:
+      admin: Admin
     remote_follow: Remote follow
     reserved_username: The username is reserved
     unfollow: Unfollow

config/routes.rb

@@ -56,6 +56,8 @@ Rails.application.routes.draw do
   end
 
   get '/@:username', to: 'accounts#show', as: :short_account
+  get '/@:username/with_replies', to: 'accounts#show', as: :short_account_with_replies
+  get '/@:username/media', to: 'accounts#show', as: :short_account_media
   get '/@:account_username/:id', to: 'statuses#show', as: :short_account_status
 
   namespace :settings do