diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index c484f074b6c..03211036c94 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -681,6 +681,54 @@ $small-breakpoint: 960px; margin-bottom: 0; } + .account { + border-bottom: 0; + padding: 0; + + &__display-name { + align-items: center; + display: flex; + margin-right: 5px; + } + + div.account__display-name { + &:hover { + .display-name strong { + text-decoration: none; + } + } + + .account__avatar { + cursor: default; + } + } + + &__avatar-wrapper { + margin-left: 0; + flex: 0 0 auto; + } + + &__avatar { + width: 44px; + height: 44px; + background-size: 44px 44px; + } + + .display-name { + font-size: 15px; + + &__account { + font-size: 14px; + } + } + } + + @media screen and (max-width: $small-breakpoint) { + .contact { + margin-top: 30px; + } + } + @media screen and (max-width: $column-breakpoint) { padding: 25px 20px; } diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index 85e5442af3e..12213cda298 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -108,6 +108,28 @@ %div %h3= t 'about.what_is_mastodon' %p= t 'about.about_mastodon_html' + %div.contact + %h3= t 'about.administered_by' + + .account + .account__wrapper + - if @instance_presenter.contact_account + = link_to TagManager.instance.url_for(@instance_presenter.contact_account), class: 'account__display-name' do + .account__avatar-wrapper + .account__avatar{ style: "background-image: url(#{@instance_presenter.contact_account.avatar.url})" } + %span.display-name + %bdi + %strong.display-name__html.emojify= display_name(@instance_presenter.contact_account) + %span.display-name__account @#{@instance_presenter.contact_account.acct} + - else + .account__display-name + .account__avatar-wrapper + .account__avatar{ style: "background-image: url(#{full_asset_url('avatars/original/missing.png', skip_pipeline: true)})" } + %span.display-name + %strong= t 'about.contact_missing' + %span.display-name__account= t 'about.contact_unavailable' + + = link_to t('about.learn_more'), about_more_path, class: 'button button-alternative' = render 'features' diff --git a/config/locales/en.yml b/config/locales/en.yml index 51d9c906d08..945faa1e249 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -4,6 +4,7 @@ en: about_hashtag_html: These are public toots tagged with #%{hashtag}. You can interact with them if you have an account anywhere in the fediverse. about_mastodon_html: Mastodon is a social network based on open web protocols and free, open-source software. It is decentralized like e-mail. about_this: About + administered_by: 'Administered by:' closed_registrations: Registrations are currently closed on this instance. However! You can find a different instance to make an account on and get access to the very same network from there. contact: Contact contact_missing: Not set diff --git a/spec/views/about/show.html.haml_spec.rb b/spec/views/about/show.html.haml_spec.rb index 03d6fb7ab40..cbe5aa93b68 100644 --- a/spec/views/about/show.html.haml_spec.rb +++ b/spec/views/about/show.html.haml_spec.rb @@ -19,6 +19,7 @@ describe 'about/show.html.haml', without_verify_partial_doubles: true do hero: nil, user_count: 0, status_count: 0, + contact_account: nil, closed_registrations_message: 'yes') assign(:instance_presenter, instance_presenter) render