diff --git a/src/app.css b/src/app.css index e0bed0a5..bb360a5c 100644 --- a/src/app.css +++ b/src/app.css @@ -1578,6 +1578,13 @@ body:has(.media-modal-container + .status-deck) .media-post-link { .tag.danger { background-color: var(--red-color); } +.tag.minimal { + margin: 0; + color: var(--text-insignificant-color); + background-color: var(--bg-faded-color); + text-shadow: 0 1px var(--bg-color); + line-height: 1; +} /* MENU POPUP */ diff --git a/src/components/account-block.css b/src/components/account-block.css index 0780f244..14309fb9 100644 --- a/src/components/account-block.css +++ b/src/components/account-block.css @@ -4,6 +4,10 @@ gap: 8px; color: var(--text-color); text-decoration: none; + + .account-block-acct { + display: inline-block; + } } .account-block:hover b { text-decoration: underline; @@ -13,44 +17,54 @@ color: var(--bg-faded-color); } -.account-block .short-desc { - max-height: 1.2em; /* just in case clamping ain't working */ -} -.account-block .short-desc, -.account-block .short-desc > * { - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; -} -.account-block .short-desc > * + * { - display: none; -} -.account-block .short-desc * { - margin: 0; - padding: 0; - color: inherit; - pointer-events: none; -} - .account-block .verified-field { - color: var(--green-color); display: inline-flex; - align-items: center; + align-items: baseline; gap: 2px; -} -.account-block .verified-field .icon { -} -.account-block .verified-field .invisible { - display: none; + + * { + -webkit-box-orient: vertical; + display: -webkit-box; + -webkit-line-clamp: 1; + line-clamp: 1; + text-overflow: ellipsis; + overflow: hidden; + } + + a { + pointer-events: none; + color: color-mix( + in lch, + var(--green-color) 20%, + var(--text-insignificant-color) 80% + ) !important; + } + + .icon { + color: var(--green-color); + transform: translateY(1px); + } + + .invisible { + display: none; + } + .ellipsis:after { + content: '…'; + } } .account-block .account-block-stats { + line-height: 1.25; margin-top: 2px; font-size: 0.9em; color: var(--text-insignificant-color); -} -.account-block .account-block-stats a { - color: inherit; - text-decoration: none; + display: flex; + flex-wrap: wrap; + align-items: center; + column-gap: 4px; + + a { + color: inherit; + text-decoration: none; + } } diff --git a/src/components/account-block.jsx b/src/components/account-block.jsx index 08bbe4fb..dde1b110 100644 --- a/src/components/account-block.jsx +++ b/src/components/account-block.jsx @@ -3,6 +3,7 @@ import './account-block.css'; // import { useNavigate } from 'react-router-dom'; import enhanceContent from '../utils/enhance-content'; import niceDateTime from '../utils/nice-date-time'; +import shortenNumber from '../utils/shorten-number'; import states from '../utils/states'; import Avatar from './avatar'; @@ -22,6 +23,8 @@ function AccountBlock({ showStats = false, accountInstance, hideDisplayName = false, + relationship = {}, + excludeRelationshipAttrs = [], }) { if (skeleton) { return ( @@ -53,6 +56,7 @@ function AccountBlock({ fields, note, group, + followersCount, } = account; let [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct]; if (accountInstance) { @@ -61,6 +65,17 @@ function AccountBlock({ const verifiedField = fields?.find((f) => !!f.verifiedAt && !!f.value); + const excludedRelationship = {}; + for (const r in relationship) { + if (!excludeRelationshipAttrs.includes(r)) { + excludedRelationship[r] = relationship[r]; + } + } + const hasRelationship = + excludedRelationship.following || + excludedRelationship.followedBy || + excludedRelationship.requested; + return ( {username} )} -
- )} + )}{' '} @{acct1} @@ -124,28 +138,44 @@ function AccountBlock({ )} {showStats && (