From f24f98ce40a144762f4b7343797c2d754cb41afb Mon Sep 17 00:00:00 2001 From: Echo Date: Thu, 7 May 2026 11:41:03 +0200 Subject: [PATCH] Profile: Remove old classes (#38920) --- .../components/account_header/buttons.tsx | 7 +- .../components/account_header/fields.tsx | 18 +- .../components/account_header/index.tsx | 49 +-- .../account_header/styles.module.scss | 120 +++++- .../components/account_authorize.jsx | 8 +- app/javascript/styles/mastodon/accounts.scss | 69 ---- app/javascript/styles/mastodon/admin.scss | 106 ++++- .../styles/mastodon/components.scss | 366 ------------------ app/views/admin/accounts/_field.html.haml | 15 +- app/views/admin/accounts/show.html.haml | 4 +- 10 files changed, 232 insertions(+), 530 deletions(-) diff --git a/app/javascript/mastodon/components/account_header/buttons.tsx b/app/javascript/mastodon/components/account_header/buttons.tsx index 737a3b9ca5a..7a5ca4332cd 100644 --- a/app/javascript/mastodon/components/account_header/buttons.tsx +++ b/app/javascript/mastodon/components/account_header/buttons.tsx @@ -3,8 +3,6 @@ import type { FC } from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import classNames from 'classnames'; - import { followAccount } from '@/mastodon/actions/accounts'; import { useAccount } from '@/mastodon/hooks/useAccount'; import { getAccountHidden } from '@/mastodon/selectors/accounts'; @@ -18,6 +16,7 @@ import { FollowButton } from '../follow_button'; import { IconButton } from '../icon_button'; import { AccountMenu } from './menu'; +import classes from './styles.module.scss'; const messages = defineMessages({ enableNotifications: { @@ -49,7 +48,7 @@ export const AccountButtons: FC = ({ const me = useAppSelector((state) => state.meta.get('me') as string); return ( -
+
{!hidden && ( )} @@ -94,7 +93,7 @@ const AccountButtonsOther: FC< {!isMovedAndUnfollowedAccount && ( )} diff --git a/app/javascript/mastodon/components/account_header/fields.tsx b/app/javascript/mastodon/components/account_header/fields.tsx index ce2fe9d3225..e71f3a213d5 100644 --- a/app/javascript/mastodon/components/account_header/fields.tsx +++ b/app/javascript/mastodon/components/account_header/fields.tsx @@ -107,15 +107,8 @@ const FieldCard: FC<{ field: AccountField; }> = ({ htmlHandlers, field }) => { const intl = useIntl(); - const { - name, - name_emojified, - nameHasEmojis, - value_emojified, - value_plain, - valueHasEmojis, - verified_at, - } = field; + const { name, nameHasEmojis, value_plain, valueHasEmojis, verified_at } = + field; const { wrapperRef, isLabelOverflowing, isValueOverflowing } = useFieldOverflow(); @@ -139,7 +132,6 @@ const FieldCard: FC<{ label={ void; @@ -183,9 +173,7 @@ type FieldHTMLProps = { const FieldHTML: FC = ({ className, - extraEmojis, text, - textEmojified, textHasCustomEmoji, isOverflowing, onOverflowClick, @@ -198,7 +186,7 @@ const FieldHTML: FC = ({ const html = ( +
{!hidden && account.memorial && } {!hidden && account.moved && ( )} {!suspendedOrHidden && !account.moved && relationship?.requested_by && ( )} -
+
{!suspendedOrHidden && ( -
-
+
+ -
+
-
- {me && account.id !== me && ( - - )} +
+ {me && account.id !== me && } - + - -
+ {!me && account.email_subscriptions && ( diff --git a/app/javascript/mastodon/components/account_header/styles.module.scss b/app/javascript/mastodon/components/account_header/styles.module.scss index 2953fd0ec27..65775147cdf 100644 --- a/app/javascript/mastodon/components/account_header/styles.module.scss +++ b/app/javascript/mastodon/components/account_header/styles.module.scss @@ -1,26 +1,79 @@ +.moved { + opacity: 0.5; +} + +// Account header .header { height: 120px; + overflow: hidden; background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border-primary); + + img { + object-fit: cover; + display: block; + width: 100%; + height: 100%; + margin: 0; + } @container (width >= 500px) { height: 160px; } + + :global(.inactive) & { + filter: grayscale(100%); + } } +// Wraps everything except the header image. .barWrapper { - border-bottom: none; padding-inline: 16px; } +// Avatar .avatarWrapper { margin-top: -64px; padding-top: 0; + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 8px; + overflow: hidden; + margin-inline-start: -2px; // aligns the pfp with content below +} + +.avatar { + background: var(--color-bg-primary); + border: 1px solid var(--color-border-primary); + border-radius: var(--avatar-border-radius); + + .moved & { + filter: grayscale(100%); + } } .displayNameWrapper { display: flex; align-items: start; gap: 16px; + margin-top: 16px; + margin-bottom: 16px; + + h1 { + font-size: 17px; + line-height: 22px; + color: var(--color-text-primary); + font-weight: 600; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + :global(.emojione) { + width: 22px; + height: 22px; + } } .nameWrapper { @@ -112,21 +165,6 @@ } } -$button-breakpoint: 420px; -$button-fallback-breakpoint: $button-breakpoint + 55px; - -.buttonsDesktop { - @container (width < #{$button-breakpoint}) { - display: none; - } - - @supports (not (container-type: inline-size)) { - @media (max-width: #{$button-fallback-breakpoint}) { - display: none; - } - } -} - .handleCopy { border: 1px solid var(--color-border-primary); border-radius: 8px; @@ -147,6 +185,45 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; } } +$button-breakpoint: 420px; +$button-fallback-breakpoint: $button-breakpoint + 55px; + +.buttonsDesktop, +.buttonsMobile { + display: flex; + align-items: center; + gap: 8px; + + :global(.button) { + flex-shrink: 1; + white-space: nowrap; + min-width: 80px; + } + + :global(.icon-button) { + border: 1px solid var(--color-border-primary); + border-radius: 4px; + box-sizing: content-box; + padding: 5px; + + &:global(.copied) { + border-color: var(--color-text-success); + } + } +} + +.buttonsDesktop { + @container (width < #{$button-breakpoint}) { + display: none; + } + + @supports (not (container-type: inline-size)) { + @media (max-width: #{$button-fallback-breakpoint}) { + display: none; + } + } +} + .buttonsMobile { position: sticky; bottom: var(--mobile-bottom-nav-height); @@ -188,6 +265,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; .bio { font-size: 15px; + color: var(--color-text-primary); } .familiarFollowers { @@ -420,3 +498,13 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; background: var(--color-bg-primary); } } + +// Buttons + +.followButton { + flex-grow: 1; +} + +.bioButtonsWrapper { + margin-top: 16px; +} diff --git a/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx b/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx index 6aff30bd47a..847a088e516 100644 --- a/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx +++ b/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx @@ -10,11 +10,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import CheckIcon from '@/material-icons/400-24px/check.svg?react'; import CloseIcon from '@/material-icons/400-24px/close.svg?react'; +import { AccountBio } from '@/mastodon/components/account_bio'; import { Avatar } from '@/mastodon/components/avatar'; import { DisplayName } from '@/mastodon/components/display_name'; import { IconButton } from '@/mastodon/components/icon_button'; import { injectIntl } from '@/mastodon/components/intl'; -import { EmojiHTML } from '@/mastodon/components/emoji/html'; const messages = defineMessages({ authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' }, @@ -41,11 +41,7 @@ class AccountAuthorize extends ImmutablePureComponent { - +
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 924b12434ba..d4eb434a2b8 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -231,75 +231,6 @@ border-color: var(--color-border-error-soft); } -.account__header__fields { - max-width: 100vw; - padding: 0; - margin: 15px -15px -15px; - border: 0 none; - border-top: 1px solid var(--color-border-primary); - border-bottom: 1px solid var(--color-border-primary); - font-size: 14px; - line-height: 20px; - - dl { - display: flex; - border-bottom: 1px solid var(--color-border-primary); - } - - dt, - dd { - box-sizing: border-box; - padding: 14px; - text-align: center; - max-height: 48px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - dt { - font-weight: 500; - width: 120px; - flex: 0 0 auto; - color: var(--color-text-primary); - background: var(--color-bg-secondary); - } - - dd { - flex: 1 1 auto; - color: var(--color-text-secondary); - } - - a { - color: var(--color-text-brand); - text-decoration: none; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } - } - - .verified { - border: 1px solid var(--color-border-success-soft); - background: var(--color-bg-success-softest); - - a { - color: var(--color-text-success); - font-weight: 500; - } - - &__mark { - color: var(--color-text-success); - } - } - - dl:last-child { - border-bottom: 0; - } -} - .directory__tag .trends__item__current { width: auto; } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index f2fe35d13ef..5ad9576b8f3 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -1035,35 +1035,121 @@ a.name-tag, max-width: 100%; } - .account__header__fields, - .account__header__content { + &__fields, + &__content { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: 4px; height: 100%; } - .account__header__fields { - margin: 0; + &__fields { border: 1px solid var(--color-border-primary); + font-size: 14px; + line-height: 20px; + display: grid; + grid-template-columns: 120px auto; + grid-auto-flow: row; + + dl { + display: flex; + } + + dt, + dd { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + padding: 14px; + text-align: center; + border-bottom: 1px solid var(--color-border-primary); + + &:last-of-type:not(.verified) { + border-bottom: none; + } + } + + dt { + font-weight: 500; + width: 120px; + flex: 0 0 auto; + color: var(--color-text-primary); + background: var(--color-bg-secondary); + } + + dd { + flex: 1 1 auto; + color: var(--color-text-secondary); + + &:first-of-type.verified { + border-top-right-radius: 4px; + } + + &:last-of-type.verified { + border-bottom-right-radius: 4px; + } + } a { color: var(--color-text-brand); + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } } - dl:first-child .verified { - border-radius: 0 4px 0 0; - } + .verified { + border: 1px solid var(--color-border-success-soft); + background: var(--color-bg-success-softest); - .verified a { - color: var(--color-text-success); + a { + color: var(--color-text-success); + font-weight: 500; + } + + &__mark { + color: var(--color-text-success); + + > svg { + vertical-align: middle; + } + } } } - .account__header__content { + &__content { box-sizing: border-box; padding: 20px; color: var(--color-text-primary); + font-size: 14px; + font-weight: 400; + overflow: hidden; + word-break: normal; + overflow-wrap: break-word; + + p { + margin-bottom: 20px; + unicode-bidi: plaintext; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: var(--color-text-brand); + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } } } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index eb0869d04fa..b931d46d116 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -8320,372 +8320,6 @@ noscript { } } -.account__header__content { - color: var(--color-text-secondary); - font-size: 14px; - font-weight: 400; - overflow: hidden; - word-break: normal; - overflow-wrap: break-word; - - p { - margin-bottom: 20px; - unicode-bidi: plaintext; - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: inherit; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } -} - -.account__header { - container: account-header / inline-size; - - &.inactive { - opacity: 0.5; - - .account__header__image, - .account__avatar { - filter: grayscale(100%); - } - } - - &__info { - position: absolute; - top: 20px; - inset-inline-end: 20px; - display: flex; - flex-wrap: wrap; - gap: 2px; - } - - &__image { - overflow: hidden; - height: 145px; - position: relative; - background: var(--color-bg-tertiary); - border-bottom: 1px solid var(--color-border-primary); - - img { - object-fit: cover; - display: block; - width: 100%; - height: 100%; - margin: 0; - } - } - - &__bar { - position: relative; - padding: 0 20px; - border-bottom: 1px solid var(--color-border-primary); - - .avatar { - display: block; - flex: 0 0 auto; - - .account__avatar { - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - border-radius: var(--avatar-border-radius); - } - } - } - - &__tabs { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-top: -55px; - padding-top: 10px; - gap: 8px; - overflow: hidden; - margin-inline-start: -2px; // aligns the pfp with content below - - &__name { - margin-top: 16px; - margin-bottom: 16px; - - .emojione { - width: 22px; - height: 22px; - } - - h1 { - font-size: 17px; - line-height: 22px; - color: var(--color-text-primary); - font-weight: 600; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - small { - display: flex; - align-items: center; - gap: 4px; - font-size: 14px; - line-height: 20px; - color: var(--color-text-secondary); - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - - span { - overflow: hidden; - text-overflow: ellipsis; - user-select: all; - } - - .icon-lock { - height: 18px; - width: 18px; - } - } - } - } - - .spacer { - flex: 1 1 auto; - } - } - - &__follow-button { - flex-grow: 1; - } - - &__buttons { - display: flex; - align-items: center; - gap: 8px; - - $button-breakpoint: 420px; - $button-fallback-breakpoint: $button-breakpoint + 55px; - - &--desktop { - margin-top: 55px; - - @container (width < #{$button-breakpoint}) { - display: none; - } - - @supports (not (container-type: inline-size)) { - @media (max-width: #{$button-fallback-breakpoint}) { - display: none; - } - } - } - - &--mobile { - margin-block: 16px; - - @container (width >= #{$button-breakpoint}) { - display: none; - } - - @supports (not (container-type: inline-size)) { - @media (min-width: ($button-fallback-breakpoint + 1px)) { - display: none; - } - } - } - - .button { - flex-shrink: 1; - white-space: nowrap; - min-width: 80px; - } - - .icon-button { - border: 1px solid var(--color-border-primary); - border-radius: 4px; - box-sizing: content-box; - padding: 5px; - - .icon { - width: 24px; - height: 24px; - } - - &.copied { - border-color: var(--color-text-success); - } - } - } - - &__bio { - .account__header__content { - color: var(--color-text-primary); - } - - .account__header__fields { - margin: 0; - margin-top: 16px; - border-radius: 4px; - border: 1px solid var(--color-border-primary); - - dl { - display: block; - padding: 11px 16px; - border-bottom-color: var(--color-border-primary); - } - - dd, - dt { - font-size: 13px; - line-height: 18px; - padding: 0; - text-align: initial; - } - - dt { - width: auto; - background: transparent; - text-transform: uppercase; - color: var(--color-text-tertiary); - } - - dd { - color: var(--color-text-secondary); - } - - a { - color: var(--color-text-brand); - } - - .icon { - width: 18px; - height: 18px; - } - - .verified { - border: 1px solid var(--color-text-success); - margin-top: -1px; - margin-inline: -1px; - - &:first-child { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - } - - &:last-child { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - margin-bottom: -1px; - } - - dt, - dd { - color: var(--color-text-success); - } - - dd { - display: flex; - align-items: center; - gap: 4px; - - span { - display: flex; - } - } - - a { - color: var(--color-text-success); - } - } - } - } - - &__extra { - margin-top: 16px; - - &__links { - font-size: 14px; - color: var(--color-text-secondary); - margin: 0 -10px; - padding-top: 16px; - padding-bottom: 10px; - - a { - display: inline-block; - color: var(--color-text-secondary); - text-decoration: none; - padding: 5px 10px; - font-weight: 500; - - strong { - font-weight: 700; - color: var(--color-text-primary); - } - } - } - } - - &__account-note { - color: var(--color-text-primary); - font-size: 14px; - font-weight: 400; - margin-bottom: 10px; - - &__loading-indicator-wrapper { - position: relative; - height: 37px; - - .loading-indicator { - left: 10px; - } - - .circular-progress { - width: 14px; - height: 14px; - } - } - - label { - display: block; - font-size: 12px; - font-weight: 500; - color: var(--color-text-secondary); - text-transform: uppercase; - margin-bottom: 5px; - } - - textarea { - display: block; - box-sizing: border-box; - width: calc(100% + 20px); - color: var(--color-text-primary); - background: transparent; - padding: 10px; - margin: 0 -10px; - font-family: inherit; - font-size: 14px; - resize: none; - border: 0; - outline: 0; - border-radius: 4px; - - &::placeholder { - color: var(--color-text-tertiary); - opacity: 1; - } - - &:focus { - background: var(--color-bg-brand-softest); - } - } - } -} - .account__contents { overflow: hidden; } diff --git a/app/views/admin/accounts/_field.html.haml b/app/views/admin/accounts/_field.html.haml index ce8d80785e6..fa68d08d378 100644 --- a/app/views/admin/accounts/_field.html.haml +++ b/app/views/admin/accounts/_field.html.haml @@ -1,9 +1,8 @@ -# locals: (field:, account:) -%dl - %dt.emojify{ title: field.name } - = prerender_custom_emojis(h(field.name), account.emojis) - %dd{ title: field.value, class: field_verified_class(field.verified?) } - - if field.verified? - %span.verified__mark{ title: t('accounts.link_verified_on', date: l(field.verified_at)) } - = material_symbol 'check' - = prerender_custom_emojis(account_field_value_format(field, with_rel_me: false), account.emojis) +%dt.emojify{ title: field.name } + = prerender_custom_emojis(h(field.name), account.emojis) +%dd{ title: field.value, class: field_verified_class(field.verified?) } + - if field.verified? + %span.verified__mark{ title: t('accounts.link_verified_on', date: l(field.verified_at)) } + = material_symbol 'check' + = prerender_custom_emojis(account_field_value_format(field, with_rel_me: false), account.emojis) diff --git a/app/views/admin/accounts/show.html.haml b/app/views/admin/accounts/show.html.haml index 977967c58fb..d3a8a1f6fb5 100644 --- a/app/views/admin/accounts/show.html.haml +++ b/app/views/admin/accounts/show.html.haml @@ -11,12 +11,12 @@ .admin-account-bio - if @account.fields? %div - .account__header__fields + %dl.admin-account-bio__fields = render partial: 'field', collection: @account.fields, locals: { account: @account } - if @account.note? %div - .account__header__content.emojify + .admin-account-bio__content.emojify = prerender_custom_emojis(account_bio_format(@account), @account.emojis) = render 'admin/accounts/counters', account: @account