@ -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; | |||
} | |||
} | |||
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 { | |||
clear: both; | |||
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] { | |||
width: 100%; | |||
} | |||
.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; | |||
} | |||
&:last-child { | |||
&, | |||
.detailed-status.light, | |||
.status.light { | |||
.detailed-status, | |||
.status { | |||
border-bottom: 0; | |||
border-radius: 0 0 4px 4px; | |||
} | |||
} | |||
&:first-child { | |||
&, | |||
.detailed-status.light, | |||
.status.light { | |||
.detailed-status, | |||
.status { | |||
border-radius: 4px 4px 0 0; | |||
} | |||
&:last-child { | |||
&, | |||
.detailed-status.light, | |||
.status.light { | |||
.detailed-status, | |||
.status { | |||
border-radius: 4px; | |||
} | |||
} | |||
} | |||
@media screen and (max-width: 740px) { | |||
&, | |||
.detailed-status.light, | |||
.status.light { | |||
.detailed-status, | |||
.status { | |||
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 | |||
%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 | |||
%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 | |||
.activity-stream.activity-stream-headless | |||
.activity-stream.activity-stream--headless | |||
= render "stream_entries/#{@type}", @type.to_sym => @stream_entry.activity, centered: true |