From 2d9a85db6efe0c9ccfda1420551ce3d6025bc27e Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 31 Oct 2022 13:06:17 +0100 Subject: [PATCH] Change design of link footer (#19562) --- app/javascript/mastodon/components/account.js | 9 ++- .../mastodon/components/server_banner.js | 2 +- .../mastodon/features/about/index.js | 6 +- .../features/ui/components/link_footer.js | 64 ++++++++-------- .../styles/mastodon/components.scss | 75 +++++++++---------- 5 files changed, 84 insertions(+), 72 deletions(-) diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index 92d14da8b0..51d2b8ba2c 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -27,6 +27,7 @@ export default @injectIntl class Account extends ImmutablePureComponent { static propTypes = { + size: PropTypes.number, account: ImmutablePropTypes.map, onFollow: PropTypes.func.isRequired, onBlock: PropTypes.func.isRequired, @@ -40,6 +41,10 @@ class Account extends ImmutablePureComponent { onActionClick: PropTypes.func, }; + static defaultProps = { + size: 46, + }; + handleFollow = () => { this.props.onFollow(this.props.account); } @@ -65,7 +70,7 @@ class Account extends ImmutablePureComponent { } render () { - const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction } = this.props; + const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props; if (!account) { return ( @@ -136,7 +141,7 @@ class Account extends ImmutablePureComponent {
-
+
{mute_expires_at} diff --git a/app/javascript/mastodon/components/server_banner.js b/app/javascript/mastodon/components/server_banner.js index c2336e43d3..617fdecdfe 100644 --- a/app/javascript/mastodon/components/server_banner.js +++ b/app/javascript/mastodon/components/server_banner.js @@ -61,7 +61,7 @@ class ServerBanner extends React.PureComponent {

- +
diff --git a/app/javascript/mastodon/features/about/index.js b/app/javascript/mastodon/features/about/index.js index 75fed9b95b..8328362725 100644 --- a/app/javascript/mastodon/features/about/index.js +++ b/app/javascript/mastodon/features/about/index.js @@ -125,7 +125,7 @@ class About extends React.PureComponent {

- +
@@ -209,6 +209,10 @@ class About extends React.PureComponent { + +
+

+
diff --git a/app/javascript/mastodon/features/ui/components/link_footer.js b/app/javascript/mastodon/features/ui/components/link_footer.js index cc3d835727..c29aac4185 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.js +++ b/app/javascript/mastodon/features/ui/components/link_footer.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { version, repository, source_url, profile_directory as profileDirectory } from 'mastodon/initial_state'; +import { domain, version, source_url, profile_directory as profileDirectory } from 'mastodon/initial_state'; import { logOut } from 'mastodon/utils/log_out'; import { openModal } from 'mastodon/actions/modal'; import { PERMISSION_INVITE_USERS } from 'mastodon/permissions'; @@ -48,40 +48,44 @@ class LinkFooter extends React.PureComponent { render () { const { signedIn, permissions } = this.context.identity; - const items = []; - items.push(); - items.push(); - items.push(); - items.push(); - items.push(); - items.push(); - - if (profileDirectory) { - items.push(); - } - - if (signedIn) { - if ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS) { - items.push(); - } - - items.push(); - items.push(); - } + const canInvite = signedIn && ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS); + const canProfileDirectory = profileDirectory; return ( -
-
    -
  • {items.reduce((prev, curr) => [prev, ' · ', curr])}
    • -
+
+

+ {domain}: + {' '} + + {canInvite && ( + <> + {' · '} + + + )} + {canProfileDirectory && ( + <> + {' · '} + + + )} + {' · '} + +

- {repository} (v{version}) }} - /> + Mastodon: + {' '} + + {' · '} + + {' · '} + + {' · '} + + {' · '} + v{version}

); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index ded5634d65..f60ad6050d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3120,43 +3120,6 @@ $ui-header-height: 55px; color: $dark-text-color; overflow: auto; - &__footer { - flex: 0 0 auto; - padding: 10px; - padding-top: 20px; - z-index: 1; - font-size: 13px; - - ul { - margin-bottom: 10px; - } - - ul li { - display: inline; - } - - p { - color: $dark-text-color; - margin-bottom: 20px; - - a { - color: $dark-text-color; - text-decoration: underline; - } - } - - a { - text-decoration: none; - color: $darker-text-color; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - } - &__trends { flex: 0 1 auto; opacity: 1; @@ -8382,6 +8345,34 @@ noscript { } } +.link-footer { + flex: 0 0 auto; + padding: 10px; + padding-top: 20px; + z-index: 1; + font-size: 13px; + + p { + color: $dark-text-color; + margin-bottom: 20px; + + strong { + font-weight: 500; + } + + a { + color: $dark-text-color; + text-decoration: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } + } +} + .about { padding: 20px; @@ -8389,6 +8380,14 @@ noscript { border-radius: 4px; } + &__footer { + color: $dark-text-color; + text-align: center; + font-size: 15px; + line-height: 22px; + margin-top: 20px; + } + &__header { margin-bottom: 30px; @@ -8509,7 +8508,7 @@ noscript { } } - .getting-started__footer { + .link-footer { padding: 0; margin-top: 60px; text-align: center;