From 46483ae849bc06ee74f4745f4564b213e742c51c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 1 Apr 2023 09:27:23 +0200 Subject: [PATCH] Fix regressions from change in account row design in web UI (#24343) --- app/helpers/home_helper.rb | 2 +- .../mastodon/components/account.jsx | 30 +++++++++++-------- .../mastodon/components/server_banner.jsx | 2 +- .../mastodon/features/about/index.jsx | 2 +- .../styles/mastodon/components.scss | 21 +++++++------ 5 files changed, 32 insertions(+), 25 deletions(-) diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb index ea21960865..c5b83326db 100644 --- a/app/helpers/home_helper.rb +++ b/app/helpers/home_helper.rb @@ -8,7 +8,7 @@ module HomeHelper end def account_link_to(account, button = '', path: nil) - content_tag(:div, class: 'account') do + content_tag(:div, class: 'account account--minimal') do content_tag(:div, class: 'account__wrapper') do section = if account.nil? content_tag(:div, class: 'account__display-name') do diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index 0ee0e45517..a8a47ecacb 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import Avatar from './avatar'; @@ -13,6 +13,7 @@ import { Link } from 'react-router-dom'; import { counterRenderer } from 'mastodon/components/common_counter'; import ShortNumber from 'mastodon/components/short_number'; import Icon from 'mastodon/components/icon'; +import classNames from 'classnames'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -57,6 +58,7 @@ class Account extends ImmutablePureComponent { onMuteNotifications: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, hidden: PropTypes.bool, + minimal: PropTypes.bool, actionIcon: PropTypes.string, actionTitle: PropTypes.string, defaultAction: PropTypes.string, @@ -92,14 +94,14 @@ class Account extends ImmutablePureComponent { }; render () { - const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props; + const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; if (!account) { return ( -
+
-
+
@@ -113,10 +115,10 @@ class Account extends ImmutablePureComponent { if (hidden) { return ( - + <> {account.get('display_name')} {account.get('username')} - + ); } @@ -144,10 +146,10 @@ class Account extends ImmutablePureComponent { hidingNotificationsButton = ; } buttons = ( - + <> {hidingNotificationsButton} - + ); } else if (defaultAction === 'mute') { buttons = ; @@ -173,7 +175,7 @@ class Account extends ImmutablePureComponent { } return ( -
+
@@ -182,13 +184,15 @@ class Account extends ImmutablePureComponent {
- {verification} {muteTimeRemaining} + {!minimal && <> {verification} {muteTimeRemaining}}
-
- {buttons} -
+ {!minimal && ( +
+ {buttons} +
+ )}
); diff --git a/app/javascript/mastodon/components/server_banner.jsx b/app/javascript/mastodon/components/server_banner.jsx index c21e414b4a..e5f5aa8ee2 100644 --- a/app/javascript/mastodon/components/server_banner.jsx +++ b/app/javascript/mastodon/components/server_banner.jsx @@ -59,7 +59,7 @@ class ServerBanner extends React.PureComponent {

- +
diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx index aa3d5b7f83..2804c4a214 100644 --- a/app/javascript/mastodon/features/about/index.jsx +++ b/app/javascript/mastodon/features/about/index.jsx @@ -123,7 +123,7 @@ class About extends React.PureComponent {

- +

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6d20be5419..32dcd59b66 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1427,15 +1427,6 @@ body > [data-popper-placement] { padding: 16px; border-bottom: 1px solid lighten($ui-base-color, 8%); - &.compact { - padding: 0; - border-bottom: 0; - - .account__avatar-wrapper { - margin-inline-start: 0; - } - } - .account__display-name { flex: 1 1 auto; display: flex; @@ -1455,6 +1446,18 @@ body > [data-popper-placement] { } } + &--minimal { + .account__display-name { + .display-name { + margin-bottom: 0; + } + + .display-name strong { + display: block; + } + } + } + &__note { white-space: nowrap; overflow: hidden;