* 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 issuesmaster
@@ -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 |
@@ -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 | |||
@@ -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; | |||
.bio { | |||
text-align: center; | |||
margin-bottom: 20px; | |||
.card__bio { | |||
max-width: none; | |||
} | |||
.counter { | |||
flex: 1 1 auto; | |||
.name, | |||
.roles { | |||
text-align: center; | |||
margin-bottom: 15px; | |||
} | |||
.counter:last-child { | |||
border-right: none; | |||
.bio { | |||
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); | |||
} |
@@ -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; | |||
} | |||
} |
@@ -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; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
@@ -105,6 +105,7 @@ class Account < ApplicationRecord | |||
:current_sign_in_ip, | |||
:current_sign_in_at, | |||
:confirmed?, | |||
:admin?, | |||
:locale, | |||
to: :user, | |||
prefix: true, | |||
@@ -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) |
@@ -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') |
@@ -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' |
@@ -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) |
@@ -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 | |||
@@ -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 | |||