mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-01 01:59:56 +00:00
fix: Show metadata preview card on all post pages
This commit is contained in:
parent
1dd83dafdc
commit
5c964440da
2 changed files with 47 additions and 50 deletions
|
@ -8,60 +8,54 @@ interface MetadataCardProps {
|
|||
post: Post;
|
||||
}
|
||||
|
||||
interface MetadataCardState {
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
export class MetadataCard extends Component<
|
||||
MetadataCardProps,
|
||||
MetadataCardState
|
||||
> {
|
||||
export class MetadataCard extends Component<MetadataCardProps> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
|
||||
render() {
|
||||
const post = this.props.post;
|
||||
return (
|
||||
<>
|
||||
{post.embed_title && post.url && (
|
||||
<div className="post-metadata-card card border-secondary mt-3 mb-2">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="card-body">
|
||||
{post.name !== post.embed_title && (
|
||||
<>
|
||||
<h5 className="card-title d-inline">
|
||||
<a className="text-body" href={post.url} rel={relTags}>
|
||||
{post.embed_title}
|
||||
</a>
|
||||
</h5>
|
||||
<span className="d-inline-block ms-2 mb-2 small text-muted">
|
||||
<a
|
||||
className="text-muted fst-italic"
|
||||
href={post.url}
|
||||
rel={relTags}
|
||||
>
|
||||
{new URL(post.url).hostname}
|
||||
<Icon icon="external-link" classes="ms-1" />
|
||||
</a>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{post.embed_description && (
|
||||
<div
|
||||
className="card-text small text-muted md-div"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: sanitizeHtml(post.embed_description),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
if (post.embed_title && post.url) {
|
||||
return (
|
||||
<div className="post-metadata-card card border-secondary mt-3 mb-2">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="card-body">
|
||||
{post.name !== post.embed_title && (
|
||||
<>
|
||||
<h5 className="card-title d-inline">
|
||||
<a className="text-body" href={post.url} rel={relTags}>
|
||||
{post.embed_title}
|
||||
</a>
|
||||
</h5>
|
||||
<span className="d-inline-block ms-2 mb-2 small text-muted">
|
||||
<a
|
||||
className="text-muted fst-italic"
|
||||
href={post.url}
|
||||
rel={relTags}
|
||||
>
|
||||
{new URL(post.url).hostname}
|
||||
<Icon icon="external-link" classes="ms-1" />
|
||||
</a>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{post.embed_description && (
|
||||
<div
|
||||
className="card-text small text-muted md-div"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: sanitizeHtml(post.embed_description),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -105,6 +105,9 @@ interface PostListingProps {
|
|||
allLanguages: Language[];
|
||||
siteLanguages: number[];
|
||||
showCommunity?: boolean;
|
||||
/**
|
||||
* Controls whether to show both the body *and* the metadata preview card
|
||||
*/
|
||||
showBody?: boolean;
|
||||
hideImage?: boolean;
|
||||
enableDownvotes?: boolean;
|
||||
|
@ -200,7 +203,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<>
|
||||
{this.listing()}
|
||||
{this.state.imageExpanded && !this.props.hideImage && this.img}
|
||||
{post.url && this.state.showBody && post.embed_title && (
|
||||
{this.showBody && post.url && post.embed_title && (
|
||||
<MetadataCard post={post} />
|
||||
)}
|
||||
{this.showBody && this.body()}
|
||||
|
@ -483,10 +486,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</h5>
|
||||
|
||||
{/**
|
||||
* If there is a URL, or if the post has a body and we were told not to
|
||||
* show the body, show the MetadataCard/body toggle.
|
||||
* If there is a URL, an embed title, and we were not told to show the
|
||||
* body by the parent component, show the MetadataCard/body toggle.
|
||||
*/}
|
||||
{(post.url || (post.body && !this.props.showBody)) && (
|
||||
{!this.props.showBody && post.url && post.embed_title && (
|
||||
<button
|
||||
className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
|
||||
data-tippy-content={post.body && mdNoImages.render(post.body)}
|
||||
|
|
Loading…
Reference in a new issue