cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

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
This commit is contained in:
Eugen Rochko 2017-08-16 17:12:58 +02:00 committed by GitHub
parent f814661fca
commit ca7ea1aba9
12 changed files with 312 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/controllers/accounts_controller.rb
View File

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

4
app/helpers/application_helper.rb
View File

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

234
app/javascript/styles/accounts.scss
View File

@ -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;
@media screen and (max-width: 740px) {
border-radius: 0;
box-shadow: none;
}
display: flex;
&::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;
right: 10px;
top: 15px;
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;
}
&:hover,
&:active,
&:focus {
color: $white;
}
}
}
.details {
display: flex;
margin-top: 30px;
position: relative;
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;
display: block;
.card__bio {
max-width: none;
}
.name,
.roles {
text-align: center;
margin-bottom: 15px;
}
.bio {
text-align: center;
margin-bottom: 20px;
}
.counter {
flex: 1 1 auto;
}
.counter:last-child {
border-right: none;
margin-bottom: 15px;
}
}
}
@ -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;
border-bottom: 1px solid $ui-secondary-color;
height: 100px;
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;
height: 60px;
float: left;
margin-right: 15px;
width: 80px;
height: 80px;
img {
display: block;
width: 60px;
height: 60px;
border-radius: 60px;
width: 80px;
height: 80px;
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-bottom: 25px;
padding: 60px 0;
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);
}

13
app/javascript/styles/landing_strip.scss
View File

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

17
app/javascript/styles/stream_entries.scss
View File

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

1
app/models/account.rb
View File

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

11
app/views/accounts/_grid_card.html.haml
View File

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

57
app/views/accounts/_header.html.haml
View File

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

7
app/views/accounts/show.html.haml
View File

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

9
app/views/shared/_landing_strip.html.haml
View File

@ -1,5 +1,8 @@
.landing-strip
= 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))
= image_tag asset_pack_path('logo.svg'), class: 'logo'
- if open_registrations?
= t('landing_strip_signup_html', sign_up_path: new_user_registration_path)
%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?
= t('landing_strip_signup_html', sign_up_path: new_user_registration_path)

6
config/locales/en.yml
View File

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

2
config/routes.rb
View File

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