diff --git a/app/javascript/flavours/glitch/features/status/components/card.jsx b/app/javascript/flavours/glitch/features/status/components/card.jsx
index 4c535b0a46..c6094d0beb 100644
--- a/app/javascript/flavours/glitch/features/status/components/card.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/card.jsx
@@ -11,8 +11,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import DescriptionIcon from '@/material-icons/400-24px/description-fill.svg?react';
import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react';
import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react';
+import { Avatar } from 'flavours/glitch/components/avatar';
import { Blurhash } from 'flavours/glitch/components/blurhash';
import { Icon } from 'flavours/glitch/components/icon';
+import { Permalink } from 'flavours/glitch/components/permalink';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
import { useBlurhash } from 'flavours/glitch/initial_state';
import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
@@ -46,6 +48,20 @@ const addAutoPlay = html => {
return html;
};
+const MoreFromAuthor = ({ author }) => (
+
+
+
+
{author.get('display_name')} }} />
+
+);
+
+MoreFromAuthor.propTypes = {
+ author: ImmutablePropTypes.map,
+};
+
export default class Card extends PureComponent {
static propTypes = {
@@ -126,6 +142,7 @@ export default class Card extends PureComponent {
const interactive = card.get('type') === 'video';
const language = card.get('language') || '';
const largeImage = (card.get('image')?.length > 0 && card.get('width') > card.get('height')) || interactive;
+ const showAuthor = !!card.get('author_account');
const description = (
@@ -136,7 +153,7 @@ export default class Card extends PureComponent {
{card.get('title')}
- {card.get('author_name').length > 0 ? {card.get('author_name')} }} /> : {card.get('description')}}
+ {!showAuthor && (card.get('author_name').length > 0 ? {card.get('author_name')} }} /> : {card.get('description')})}
);
@@ -225,10 +242,14 @@ export default class Card extends PureComponent {
}
return (
-
- {embed}
- {description}
-
+ <>
+
+ {embed}
+ {description}
+
+
+ {showAuthor && }
+ >
);
}
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 07b18b2936..424b65a3f1 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -4133,6 +4133,10 @@ input.glitch-setting-text {
border: 1px solid var(--background-border-color);
border-radius: 8px;
+ &.bottomless {
+ border-radius: 8px 8px 0 0;
+ }
+
&__actions {
bottom: 0;
inset-inline-start: 0;
@@ -10811,3 +10815,42 @@ noscript {
}
}
}
+
+.more-from-author {
+ font-size: 14px;
+ color: $darker-text-color;
+ background: var(--surface-background-color);
+ border: 1px solid var(--background-border-color);
+ border-top: 0;
+ border-radius: 0 0 8px 8px;
+ padding: 15px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .logo {
+ height: 16px;
+ color: $darker-text-color;
+ }
+
+ & > span {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ a {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-weight: 500;
+ color: $primary-text-color;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $highlight-text-color;
+ }
+ }
+}