@ -1,39 +1,140 @@ | |||||
.footer { | |||||
text-align: center; | |||||
margin-top: 30px; | |||||
padding-bottom: 60px; | |||||
font-size: 12px; | |||||
color: $darker-text-color; | |||||
.footer__domain { | |||||
font-weight: 500; | |||||
a { | |||||
color: inherit; | |||||
text-decoration: none; | |||||
.public-layout { | |||||
.footer { | |||||
text-align: left; | |||||
padding-top: 20px; | |||||
padding-bottom: 60px; | |||||
font-size: 12px; | |||||
color: lighten($ui-base-color, 34%); | |||||
@media screen and (max-width: $no-gap-breakpoint) { | |||||
padding-left: 20px; | |||||
padding-right: 20px; | |||||
} | } | ||||
} | |||||
.powered-by, | |||||
.single-user-login { | |||||
font-weight: 400; | |||||
.grid { | |||||
display: grid; | |||||
grid-gap: 10px; | |||||
grid-template-columns: 1fr 1fr 2fr 1fr 1fr; | |||||
.column-0 { | |||||
grid-column: 1; | |||||
grid-row: 1; | |||||
min-width: 0; | |||||
} | |||||
.column-1 { | |||||
grid-column: 2; | |||||
grid-row: 1; | |||||
min-width: 0; | |||||
} | |||||
.column-2 { | |||||
grid-column: 3; | |||||
grid-row: 1; | |||||
min-width: 0; | |||||
text-align: center; | |||||
h4 a { | |||||
color: lighten($ui-base-color, 34%); | |||||
} | |||||
} | |||||
.column-3 { | |||||
grid-column: 4; | |||||
grid-row: 1; | |||||
min-width: 0; | |||||
} | |||||
.column-4 { | |||||
grid-column: 5; | |||||
grid-row: 1; | |||||
min-width: 0; | |||||
} | |||||
@media screen and (max-width: 690px) { | |||||
grid-template-columns: 1fr 2fr 1fr; | |||||
.column-0, | |||||
.column-1 { | |||||
grid-column: 1; | |||||
} | |||||
.column-1 { | |||||
grid-row: 2; | |||||
} | |||||
.column-2 { | |||||
grid-column: 2; | |||||
} | |||||
a { | |||||
color: inherit; | |||||
text-decoration: underline; | |||||
font-weight: 500; | |||||
.column-3, | |||||
.column-4 { | |||||
grid-column: 3; | |||||
} | |||||
&:hover { | |||||
.column-4 { | |||||
grid-row: 2; | |||||
} | |||||
} | |||||
@media screen and (max-width: 600px) { | |||||
.column-1 { | |||||
display: block; | |||||
} | |||||
} | |||||
@media screen and (max-width: $no-gap-breakpoint) { | |||||
.column-0, | |||||
.column-1, | |||||
.column-3, | |||||
.column-4 { | |||||
display: none; | |||||
} | |||||
} | |||||
} | |||||
h4 { | |||||
text-transform: uppercase; | |||||
font-weight: 700; | |||||
margin-bottom: 8px; | |||||
color: $darker-text-color; | |||||
a { | |||||
color: inherit; | |||||
text-decoration: none; | text-decoration: none; | ||||
} | } | ||||
} | } | ||||
img { | |||||
margin: 0 4px; | |||||
position: relative; | |||||
bottom: -1px; | |||||
height: 18px; | |||||
vertical-align: top; | |||||
ul a { | |||||
text-decoration: none; | |||||
color: lighten($ui-base-color, 34%); | |||||
&:hover, | |||||
&:active, | |||||
&:focus { | |||||
text-decoration: underline; | |||||
} | |||||
} | |||||
.brand { | |||||
svg { | |||||
display: block; | |||||
height: 36px; | |||||
width: auto; | |||||
margin: 0 auto; | |||||
path { | |||||
fill: lighten($ui-base-color, 34%); | |||||
} | |||||
} | |||||
&:hover, | |||||
&:focus, | |||||
&:active { | |||||
svg path { | |||||
fill: lighten($ui-base-color, 38%); | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } |
@ -1,111 +0,0 @@ | |||||
.landing-strip, | |||||
.memoriam-strip { | |||||
background: rgba(darken($ui-base-color, 7%), 0.8); | |||||
color: $darker-text-color; | |||||
font-weight: 400; | |||||
padding: 14px; | |||||
border-radius: 4px; | |||||
margin-bottom: 20px; | |||||
display: flex; | |||||
align-items: center; | |||||
strong, | |||||
a { | |||||
font-weight: 500; | |||||
@each $lang in $cjk-langs { | |||||
&:lang(#{$lang}) { | |||||
font-weight: 700; | |||||
} | |||||
} | |||||
} | |||||
a { | |||||
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; | |||||
} | |||||
} | |||||
.memoriam-strip { | |||||
background: rgba($base-shadow-color, 0.7); | |||||
} | |||||
.moved-strip { | |||||
padding: 14px; | |||||
border-radius: 4px; | |||||
background: rgba(darken($ui-base-color, 7%), 0.8); | |||||
color: $secondary-text-color; | |||||
font-weight: 400; | |||||
margin-bottom: 20px; | |||||
strong, | |||||
a { | |||||
font-weight: 500; | |||||
@each $lang in $cjk-langs { | |||||
&:lang(#{$lang}) { | |||||
font-weight: 700; | |||||
} | |||||
} | |||||
} | |||||
a { | |||||
color: inherit; | |||||
text-decoration: underline; | |||||
&.mention { | |||||
text-decoration: none; | |||||
span { | |||||
text-decoration: none; | |||||
} | |||||
&:focus, | |||||
&:hover, | |||||
&:active { | |||||
text-decoration: none; | |||||
span { | |||||
text-decoration: underline; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
&__message { | |||||
margin-bottom: 15px; | |||||
.fa { | |||||
margin-right: 5px; | |||||
color: $darker-text-color; | |||||
} | |||||
} | |||||
&__card { | |||||
.detailed-status__display-avatar { | |||||
position: relative; | |||||
cursor: pointer; | |||||
} | |||||
.detailed-status__display-name { | |||||
margin-bottom: 0; | |||||
text-decoration: none; | |||||
span { | |||||
color: $highlight-text-color; | |||||
font-weight: 400; | |||||
} | |||||
} | |||||
} | |||||
} |
@ -1,367 +1,145 @@ | |||||
.activity-stream { | .activity-stream { | ||||
clear: both; | |||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); | box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); | ||||
border-radius: 4px; | |||||
overflow: hidden; | |||||
margin-bottom: 10px; | |||||
@media screen and (max-width: $no-gap-breakpoint) { | |||||
margin-bottom: 0; | |||||
border-radius: 0; | |||||
box-shadow: none; | |||||
} | |||||
&--headless { | |||||
border-radius: 0; | |||||
margin: 0; | |||||
box-shadow: none; | |||||
.detailed-status, | |||||
.status { | |||||
border-radius: 0 !important; | |||||
} | |||||
} | |||||
div[data-component] { | div[data-component] { | ||||
width: 100%; | width: 100%; | ||||
} | } | ||||
.entry { | .entry { | ||||
background: $simple-background-color; | |||||
background: $ui-base-color; | |||||
.detailed-status.light, | |||||
.status.light, | |||||
.more.light { | |||||
border-bottom: 1px solid $ui-secondary-color; | |||||
.detailed-status, | |||||
.status, | |||||
.load-more { | |||||
animation: none; | animation: none; | ||||
} | } | ||||
&:last-child { | &:last-child { | ||||
&, | |||||
.detailed-status.light, | |||||
.status.light { | |||||
.detailed-status, | |||||
.status { | |||||
border-bottom: 0; | border-bottom: 0; | ||||
border-radius: 0 0 4px 4px; | border-radius: 0 0 4px 4px; | ||||
} | } | ||||
} | } | ||||
&:first-child { | &:first-child { | ||||
&, | |||||
.detailed-status.light, | |||||
.status.light { | |||||
.detailed-status, | |||||
.status { | |||||
border-radius: 4px 4px 0 0; | border-radius: 4px 4px 0 0; | ||||
} | } | ||||
&:last-child { | &:last-child { | ||||
&, | |||||
.detailed-status.light, | |||||
.status.light { | |||||
.detailed-status, | |||||
.status { | |||||
border-radius: 4px; | border-radius: 4px; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
@media screen and (max-width: 740px) { | @media screen and (max-width: 740px) { | ||||
&, | |||||
.detailed-status.light, | |||||
.status.light { | |||||
.detailed-status, | |||||
.status { | |||||
border-radius: 0 !important; | border-radius: 0 !important; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
} | |||||
&.with-header { | |||||
.entry { | |||||
&:first-child { | |||||
&, | |||||
.detailed-status.light, | |||||
.status.light { | |||||
border-radius: 0; | |||||
} | |||||
&:last-child { | |||||
&, | |||||
.detailed-status.light, | |||||
.status.light { | |||||
border-radius: 0 0 4px 4px; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.media-gallery__gifv__label { | |||||
bottom: 9px; | |||||
} | |||||
.status.light { | |||||
padding: 14px 14px 14px (48px + 14px * 2); | |||||
position: relative; | |||||
min-height: 48px; | |||||
cursor: default; | |||||
.status__header { | |||||
font-size: 15px; | |||||
.status__meta { | |||||
float: right; | |||||
font-size: 14px; | |||||
.status__relative-time { | |||||
color: $lighter-text-color; | |||||
} | |||||
} | |||||
} | |||||
.status__display-name { | |||||
display: block; | |||||
max-width: 100%; | |||||
padding-right: 25px; | |||||
color: $inverted-text-color; | |||||
} | |||||
.status__avatar { | |||||
position: absolute; | |||||
left: 14px; | |||||
top: 14px; | |||||
width: 48px; | |||||
height: 48px; | |||||
& > div { | |||||
width: 48px; | |||||
height: 48px; | |||||
} | |||||
img { | |||||
display: block; | |||||
border-radius: 4px; | |||||
} | |||||
} | |||||
.display-name { | |||||
display: block; | |||||
max-width: 100%; | |||||
overflow: hidden; | |||||
white-space: nowrap; | |||||
text-overflow: ellipsis; | |||||
strong { | |||||
font-weight: 500; | |||||
color: $inverted-text-color; | |||||
@each $lang in $cjk-langs { | |||||
&:lang(#{$lang}) { | |||||
font-weight: 700; | |||||
} | |||||
} | |||||
} | |||||
span { | |||||
font-size: 14px; | |||||
color: $light-text-color; | |||||
} | |||||
} | |||||
.status__content { | |||||
color: $inverted-text-color; | |||||
a { | |||||
color: $highlight-text-color; | |||||
} | |||||
a.status__content__spoiler-link { | |||||
color: $primary-text-color; | |||||
background: $ui-base-color; | |||||
&:hover { | |||||
background: lighten($ui-base-color, 8%); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.detailed-status.light { | |||||
padding: 14px; | |||||
background: $simple-background-color; | |||||
cursor: default; | |||||
.detailed-status__display-name { | |||||
display: block; | |||||
overflow: hidden; | |||||
margin-bottom: 15px; | |||||
& > div { | |||||
float: left; | |||||
margin-right: 10px; | |||||
} | |||||
.display-name { | |||||
display: block; | |||||
max-width: 100%; | |||||
overflow: hidden; | |||||
white-space: nowrap; | |||||
text-overflow: ellipsis; | |||||
strong { | |||||
font-weight: 500; | |||||
color: $inverted-text-color; | |||||
@each $lang in $cjk-langs { | |||||
&:lang(#{$lang}) { | |||||
font-weight: 700; | |||||
} | |||||
} | |||||
} | |||||
span { | |||||
font-size: 14px; | |||||
color: $light-text-color; | |||||
} | |||||
} | |||||
} | |||||
.avatar { | |||||
width: 48px; | |||||
height: 48px; | |||||
img { | |||||
display: block; | |||||
border-radius: 4px; | |||||
} | |||||
} | |||||
.status__content { | |||||
color: $inverted-text-color; | |||||
a { | |||||
color: $highlight-text-color; | |||||
} | |||||
a.status__content__spoiler-link { | |||||
color: $primary-text-color; | |||||
background: $ui-base-color; | |||||
&:hover { | |||||
background: lighten($ui-base-color, 8%); | |||||
} | |||||
} | |||||
} | |||||
.detailed-status__meta { | |||||
margin-top: 15px; | |||||
color: $light-text-color; | |||||
font-size: 14px; | |||||
line-height: 18px; | |||||
a { | |||||
color: inherit; | |||||
} | |||||
span > span { | |||||
font-weight: 500; | |||||
font-size: 12px; | |||||
margin-left: 6px; | |||||
display: inline-block; | |||||
} | |||||
} | |||||
.status-card { | |||||
border-color: lighten($ui-secondary-color, 4%); | |||||
color: $lighter-text-color; | |||||
&:hover { | |||||
background: lighten($ui-secondary-color, 4%); | |||||
} | |||||
} | |||||
.status-card__title, | |||||
.status-card__description { | |||||
color: $inverted-text-color; | |||||
} | |||||
.status-card__image { | |||||
background: $ui-secondary-color; | |||||
} | |||||
} | |||||
.media-spoiler { | |||||
background: $ui-base-color; | |||||
color: $darker-text-color; | |||||
} | |||||
.button.logo-button { | |||||
flex: 0 auto; | |||||
font-size: 14px; | |||||
background: $ui-highlight-color; | |||||
color: $primary-text-color; | |||||
text-transform: none; | |||||
line-height: 36px; | |||||
height: auto; | |||||
padding: 3px 15px; | |||||
border: 0; | |||||
.pre-header { | |||||
padding: 14px 0; | |||||
padding-left: (48px + 14px * 2); | |||||
padding-bottom: 0; | |||||
margin-bottom: -4px; | |||||
color: $light-text-color; | |||||
font-size: 14px; | |||||
position: relative; | |||||
svg { | |||||
width: 20px; | |||||
height: auto; | |||||
vertical-align: middle; | |||||
margin-right: 5px; | |||||
.pre-header__icon { | |||||
position: absolute; | |||||
left: (48px + 14px * 2 - 30px); | |||||
path:first-child { | |||||
fill: $primary-text-color; | |||||
} | } | ||||
.status__display-name.muted strong { | |||||
color: $light-text-color; | |||||
path:last-child { | |||||
fill: $ui-highlight-color; | |||||
} | } | ||||
} | } | ||||
.open-in-web-link { | |||||
text-decoration: none; | |||||
&:active, | |||||
&:focus, | |||||
&:hover { | |||||
background: lighten($ui-highlight-color, 10%); | |||||
&:hover { | |||||
text-decoration: underline; | |||||
svg path:last-child { | |||||
fill: lighten($ui-highlight-color, 10%); | |||||
} | } | ||||
} | } | ||||
.more { | |||||
color: $darker-text-color; | |||||
display: block; | |||||
padding: 14px; | |||||
text-align: center; | |||||
&:not(:hover) { | |||||
text-decoration: none; | |||||
@media screen and (max-width: $no-gap-breakpoint) { | |||||
svg { | |||||
display: none; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.embed { | |||||
.activity-stream { | |||||
box-shadow: none; | |||||
.embed, | |||||
.public-layout { | |||||
.detailed-status { | |||||
padding: 15px; | |||||
} | } | ||||
} | |||||
.entry { | |||||
.detailed-status.light { | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
justify-content: space-between; | |||||
align-items: flex-start; | |||||
.status { | |||||
padding: 15px 15px 15px (48px + 15px * 2); | |||||
min-height: 48px + 2px; | |||||
.detailed-status__display-name { | |||||
flex: 1; | |||||
margin: 0 5px 15px 0; | |||||
&__avatar { | |||||
left: 15px; | |||||
top: 17px; | |||||
} | } | ||||
.button.button-secondary.logo-button { | |||||
flex: 0 auto; | |||||
font-size: 14px; | |||||
background: $ui-highlight-color; | |||||
color: $primary-text-color; | |||||
border: 0; | |||||
svg { | |||||
width: 20px; | |||||
height: auto; | |||||
vertical-align: middle; | |||||
margin-right: 5px; | |||||
path:first-child { | |||||
fill: $primary-text-color; | |||||
} | |||||
path:last-child { | |||||
fill: $ui-highlight-color; | |||||
} | |||||
} | |||||
&__content { | |||||
padding-top: 5px; | |||||
} | |||||
&:active, | |||||
&:focus, | |||||
&:hover { | |||||
background: lighten($ui-highlight-color, 10%); | |||||
&__prepend { | |||||
margin-left: 48px + 15px * 2; | |||||
padding-top: 15px; | |||||
} | |||||
svg path:last-child { | |||||
fill: lighten($ui-highlight-color, 10%); | |||||
} | |||||
} | |||||
&__prepend-icon-wrapper { | |||||
left: -32px; | |||||
} | } | ||||
.status__content, | |||||
.detailed-status__meta { | |||||
flex: 100%; | |||||
.media-gallery, | |||||
&__action-bar, | |||||
.video-player { | |||||
margin-top: 10px; | |||||
} | } | ||||
} | } | ||||
} | } |
@ -0,0 +1,123 @@ | |||||
.hero-widget { | |||||
margin-bottom: 10px; | |||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); | |||||
&__img { | |||||
width: 100%; | |||||
height: 167px; | |||||
position: relative; | |||||
overflow: hidden; | |||||
border-radius: 4px 4px 0 0; | |||||
background: $base-shadow-color; | |||||
img { | |||||
object-fit: cover; | |||||
display: block; | |||||
width: 100%; | |||||
height: 100%; | |||||
margin: 0; | |||||
border-radius: 4px 4px 0 0; | |||||
} | |||||
} | |||||
&__text { | |||||
background: $ui-base-color; | |||||
padding: 20px; | |||||
border-radius: 0 0 4px 4px; | |||||
font-size: 14px; | |||||
color: $darker-text-color; | |||||
} | |||||
@media screen and (max-width: $no-gap-breakpoint) { | |||||
display: none; | |||||
} | |||||
} | |||||
.moved-account-widget { | |||||
padding: 15px; | |||||
padding-bottom: 20px; | |||||
border-radius: 4px; | |||||
background: $ui-base-color; | |||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); | |||||
color: $secondary-text-color; | |||||
font-weight: 400; | |||||
margin-bottom: 10px; | |||||
strong, | |||||
a { | |||||
font-weight: 500; | |||||
@each $lang in $cjk-langs { | |||||
&:lang(#{$lang}) { | |||||
font-weight: 700; | |||||
} | |||||
} | |||||
} | |||||
a { | |||||
color: inherit; | |||||
text-decoration: underline; | |||||
&.mention { | |||||
text-decoration: none; | |||||
span { | |||||
text-decoration: none; | |||||
} | |||||
&:focus, | |||||
&:hover, | |||||
&:active { | |||||
text-decoration: none; | |||||
span { | |||||
text-decoration: underline; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
&__message { | |||||
margin-bottom: 15px; | |||||
.fa { | |||||
margin-right: 5px; | |||||
color: $darker-text-color; | |||||
} | |||||
} | |||||
&__card { | |||||
.detailed-status__display-avatar { | |||||
position: relative; | |||||
cursor: pointer; | |||||
} | |||||
.detailed-status__display-name { | |||||
margin-bottom: 0; | |||||
text-decoration: none; | |||||
span { | |||||
font-weight: 400; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.memoriam-widget { | |||||
padding: 20px; | |||||
border-radius: 4px; | |||||
background: $base-shadow-color; | |||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); | |||||
font-size: 14px; | |||||
color: $darker-text-color; | |||||
margin-bottom: 10px; | |||||
} | |||||
.moved-account-widget, | |||||
.memoriam-widget { | |||||
@media screen and (max-width: $no-gap-breakpoint) { | |||||
margin-bottom: 0; | |||||
box-shadow: none; | |||||
border-radius: 0; | |||||
} | |||||
} |
@ -0,0 +1,15 @@ | |||||
.public-account-bio | |||||
- unless account.fields.empty? | |||||
.account__header__fields | |||||
- account.fields.each do |field| | |||||
%dl | |||||
%dt.emojify{ title: field.name }= field.name | |||||
%dd.emojify{ title: field.value }= Formatter.instance.format_field(account, field.value, custom_emojify: true) | |||||
= account_badge(account) | |||||
- if account.note.present? | |||||
.account__header__content.emojify= Formatter.instance.simplified_format(account, custom_emojify: true) | |||||
.public-account-bio__extra | |||||
= t 'accounts.joined', date: l(account.created_at, format: :month) |
@ -1,28 +0,0 @@ | |||||
- relationships ||= nil | |||||
- unless account.memorial? || account.moved? | |||||
- if user_signed_in? | |||||
- requested = relationships ? relationships.requested[account.id].present? : current_account.requested?(account) | |||||
- following = relationships ? relationships.following[account.id].present? : current_account.following?(account) | |||||
- if user_signed_in? && current_account.id != account.id && !requested | |||||
.controls | |||||
- if following | |||||
= link_to (account.local? ? account_unfollow_path(account) : remote_unfollow_path(acct: account.acct)), data: { method: :post }, class: 'icon-button' do | |||||
= fa_icon 'user-times' | |||||
= t('accounts.unfollow') | |||||
- else | |||||
= link_to (account.local? ? account_follow_path(account) : authorize_follow_path(acct: account.acct)), data: { method: :post }, class: 'icon-button' do | |||||
= fa_icon 'user-plus' | |||||
= t('accounts.follow') | |||||
- elsif user_signed_in? && current_account.id == account.id | |||||
.controls | |||||
= link_to settings_profile_url, class: 'icon-button' do | |||||
= fa_icon 'pencil' | |||||
= t('settings.edit_profile') | |||||
- elsif !user_signed_in? | |||||
.controls | |||||
.remote-follow | |||||
= link_to (account.local? ? account_remote_follow_path(account) : "web+mastodon://follow?uri=#{account.uri}"), class: 'icon-button' do | |||||
= fa_icon 'user-plus' | |||||
= t('accounts.remote_follow') |
@ -1,8 +0,0 @@ | |||||
.accounts-grid{ class: accounts.empty? ? 'empty' : '' } | |||||
- if accounts.empty? | |||||
= image_tag asset_pack_path('elephant_ui_greeting.svg'), alt: '', role: 'presentational' | |||||
= render partial: 'accounts/nothing_here' | |||||
- else | |||||
= render partial: 'accounts/grid_card', collection: accounts, as: :account, cached: !user_signed_in? | |||||
= paginate follows |
@ -1,3 +0,0 @@ | |||||
.accounts-grid.empty | |||||
= image_tag asset_pack_path('elephant_ui_greeting.svg'), alt: '', role: 'presentational' | |||||
%p.nothing-here= t('accounts.network_hidden') |
@ -1,12 +0,0 @@ | |||||
.account-grid-card | |||||
.account-grid-card__header{ style: "background-image: url(#{account.header.url(:original)})" } | |||||
= render 'accounts/follow_button', account: account, relationships: @relationships | |||||
.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, custom_emojify: true) | |||||
%span.username | |||||
@#{account.local? ? account.local_username_and_domain : account.acct} | |||||
= fa_icon('lock') if account.locked? | |||||
.account__header__content.p-note.emojify= Formatter.instance.simplified_format(account) |
@ -1,51 +1,43 @@ | |||||
.card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" } | |||||
.card__illustration | |||||
= render 'accounts/follow_button', account: account | |||||
.avatar= image_tag account.avatar.url(:original), class: 'u-photo' | |||||
.public-account-header | |||||
.public-account-header__image | |||||
= image_tag account.header.url, class: 'parallax' | |||||
.public-account-header__bar | |||||
= link_to short_account_url(account), class: 'avatar' do | |||||
= image_tag account.avatar.url | |||||
.public-account-header__tabs | |||||
.public-account-header__tabs__name | |||||
%h1 | |||||
= display_name(account) | |||||
%small | |||||
= acct(account) | |||||
= fa_icon('lock') if account.locked? | |||||
.public-account-header__tabs__tabs | |||||
.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-number= number_to_human account.statuses_count, strip_insignificant_zeros: true | |||||
%span.counter-label= t('accounts.posts') | |||||
.card__bio | |||||
%h1.name | |||||
%span.p-name.emojify= display_name(account, custom_emojify: true) | |||||
%small< | |||||
%span>< @#{account.local_username_and_domain} | |||||
= fa_icon('lock') if account.locked? | |||||
.counter{ class: active_nav_class(account_following_index_url(account)) } | |||||
= link_to account_following_index_url(account) do | |||||
%span.counter-number= number_to_human account.following_count, strip_insignificant_zeros: true | |||||
%span.counter-label= t('accounts.following') | |||||
- if account.bot? | |||||
.roles | |||||
.account-role.bot | |||||
= t 'accounts.roles.bot' | |||||
- elsif Setting.show_staff_badge | |||||
- if account.user_admin? | |||||
.roles | |||||
.account-role.admin | |||||
= t 'accounts.roles.admin' | |||||
- elsif account.user_moderator? | |||||
.roles | |||||
.account-role.moderator | |||||
= t 'accounts.roles.moderator' | |||||
.counter{ class: active_nav_class(account_followers_url(account)) } | |||||
= link_to account_followers_url(account) do | |||||
%span.counter-number= number_to_human account.followers_count, strip_insignificant_zeros: true | |||||
%span.counter-label= t('accounts.followers') | |||||
.spacer | |||||
.public-account-header__tabs__tabs__buttons | |||||
= account_action_button(account) | |||||
.bio | |||||
.account__header__content.p-note.emojify= Formatter.instance.simplified_format(account, custom_emojify: true) | |||||
.public-account-header__extra | |||||
= render 'accounts/bio', account: account | |||||
- unless account.fields.empty? | |||||
.account__header__fields | |||||
- account.fields.each do |field| | |||||
%dl | |||||
%dt.emojify{ title: field.name }= field.name | |||||
%dd.emojify{ title: field.value }= Formatter.instance.format_field(account, field.value, custom_emojify: true) | |||||
.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-number= number_to_human account.statuses_count, strip_insignificant_zeros: true | |||||
%span.counter-label= t('accounts.posts') | |||||
.counter{ class: active_nav_class(account_following_index_url(account)) } | |||||
.public-account-header__extra__links | |||||
= link_to account_following_index_url(account) do | = link_to account_following_index_url(account) do | ||||
%span.counter-number= number_to_human account.following_count, strip_insignificant_zeros: true | |||||
%span.counter-label= t('accounts.following') | |||||
.counter{ class: active_nav_class(account_followers_url(account)) } | |||||
%strong= number_to_human account.following_count, strip_insignificant_zeros: true | |||||
= t('accounts.following') | |||||
= link_to account_followers_url(account) do | = link_to account_followers_url(account) do | ||||
%span.counter-number= number_to_human account.followers_count, strip_insignificant_zeros: true | |||||
%span.counter-label= t('accounts.followers') | |||||
%strong= number_to_human account.followers_count, strip_insignificant_zeros: true | |||||
= t('accounts.followers') |
@ -1 +0,0 @@ | |||||
%p.nothing-here= t('accounts.nothing_here') |
@ -0,0 +1,16 @@ | |||||
- account_url = local_assigns[:admin] ? admin_account_path(account.id) : TagManager.instance.url_for(account) | |||||
.card.h-card | |||||
= link_to account_url, target: '_blank', rel: 'noopener' do | |||||
.card__img | |||||
= image_tag account.header.url, alt: '' | |||||
.card__bar | |||||
.avatar | |||||
= image_tag account.avatar.url, alt: '', width: 48, height: 48, class: 'u-photo' | |||||
.display-name | |||||
%bdi | |||||
%strong.emojify.p-name= display_name(account, custom_emojify: true) | |||||
%span | |||||
= acct(account) | |||||
= fa_icon('lock') if account.locked? |
@ -0,0 +1,6 @@ | |||||
.hero-widget | |||||
.hero-widget__img | |||||
= image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title | |||||
.hero-widget__text | |||||
%p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname) |
@ -1,23 +0,0 @@ | |||||
.account-card | |||||
.account-card__header{ style: "background-image: url(#{account.header.url(:original)})" } | |||||
.detailed-status__display-name | |||||
%div | |||||
= image_tag account.avatar.url(:original), alt: '', width: 48, height: 48, class: 'avatar' | |||||
%span.display-name | |||||
- account_url = local_assigns[:admin] ? admin_account_path(account.id) : TagManager.instance.url_for(account) | |||||
= link_to account_url, class: 'detailed-status__display-name p-author h-card', target: '_blank', rel: 'noopener' do | |||||
%strong.emojify= display_name(account, custom_emojify: true) | |||||
%span @#{account.acct} | |||||
.counter | |||||
%span.counter-number= number_to_human account.statuses_count, strip_insignificant_zeros: true | |||||
%span.counter-label= t('accounts.posts') | |||||
.counter | |||||
%span.counter-number= number_to_human account.following_count, strip_insignificant_zeros: true | |||||
%span.counter-label= t('accounts.following') | |||||
.counter | |||||
%span.counter-number= number_to_human account.followers_count, strip_insignificant_zeros: true | |||||
%span.counter-label= t('accounts.followers') |
@ -1,6 +0,0 @@ | |||||
.landing-strip | |||||
= image_tag asset_pack_path('logo.svg'), class: 'logo' | |||||
%div | |||||
= t('landing_strip_html', name: content_tag(:span, display_name(account, custom_emojify: true), class: :emojify), link_to_root_path: link_to(content_tag(:strong, site_hostname), root_path)) | |||||
= t('landing_strip_signup_html', sign_up_path: open_registrations? ? new_user_registration_path : 'https://joinmastodon.org/#getting-started') |
@ -1,7 +0,0 @@ | |||||
.media-spoiler-wrapper{ class: sensitive == false && 'media-spoiler-wrapper__visible' } | |||||
.spoiler-button | |||||
.icon-button.overlayed | |||||
%i.fa.fa-fw.fa-eye | |||||
.media-spoiler | |||||
%span= t('stream_entries.sensitive_content') | |||||
%span= t('stream_entries.click_to_show') |
@ -1,4 +0,0 @@ | |||||
.media-item | |||||
= link_to media.remote_url.blank? ? media.file.url(:original) : media.remote_url, style: media.image? ? "background-image: url(#{media.file.url(:original)})" : '', target: '_blank', rel: 'noopener', class: "u-#{media.video? || media.gifv? ? 'video' : 'photo'}" do | |||||
- unless media.image? | |||||
%video{ src: media.file.url(:original), autoplay: true, loop: true }/ |
@ -1,2 +0,0 @@ | |||||
= link_to url, class: 'more light' do | |||||
= t('statuses.show_more') |
@ -1,3 +1,3 @@ | |||||
- cache @stream_entry.activity do | - cache @stream_entry.activity do | ||||
.activity-stream.activity-stream-headless | |||||
.activity-stream.activity-stream--headless | |||||
= render "stream_entries/#{@type}", @type.to_sym => @stream_entry.activity, centered: true | = render "stream_entries/#{@type}", @type.to_sym => @stream_entry.activity, centered: true |