LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-01 10:09:56 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1455 from jsit/feat/add-post-body-preview-to-desktop

Browse source 
feat: Add post body preview to desktop
This commit is contained in:
SleeplessOne1917 2023-06-22 21:57:32 +00:00 committed by GitHub
commit 7bfa837938
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/shared/components/post/post-listing.tsx
View file

@ -381,33 +381,30 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
createdLine() { createdLine() {
const post_view = this.postView; const post_view = this.postView;
return ( return (
<ul className="list-inline mb-1 text-muted small mt-2"> <span className="small">
<li className="list-inline-item"> <PersonListing person={post_view.creator} />
<PersonListing person={post_view.creator} /> {this.creatorIsMod_ && (
<span className="mx-1 badge text-bg-light">
{this.creatorIsMod_ && ( {I18NextService.i18n.t("mod")}
<span className="mx-1 badge text-bg-light"> </span>
{I18NextService.i18n.t("mod")} )}
</span> {this.creatorIsAdmin_ && (
)} <span className="mx-1 badge text-bg-light">
{this.creatorIsAdmin_ && ( {I18NextService.i18n.t("admin")}
<span className="mx-1 badge text-bg-light"> </span>
{I18NextService.i18n.t("admin")} )}
</span> {post_view.creator.bot_account && (
)} <span className="mx-1 badge text-bg-light">
{post_view.creator.bot_account && ( {I18NextService.i18n.t("bot_account").toLowerCase()}
<span className="mx-1 badge text-bg-light"> </span>
{I18NextService.i18n.t("bot_account").toLowerCase()} )}
</span> {this.props.showCommunity && (
)} <>
{this.props.showCommunity && ( {" "}
<> {I18NextService.i18n.t("to")}{" "}
{" "} <CommunityLink community={post_view.community} />
{I18NextService.i18n.t("to")}{" "} </>
<CommunityLink community={post_view.community} /> )}
</>
)}
</li>
{post_view.post.language_id !== 0 && ( {post_view.post.language_id !== 0 && (
<span className="mx-1 badge text-bg-light"> <span className="mx-1 badge text-bg-light">
{ {
@ -416,17 +413,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)?.name )?.name
} }
</span> </span>
)} )}{" "}
<li className="list-inline-item">•</li> •{" "}
<li className="list-inline-item"> <MomentTime
<span> published={post_view.post.published}
<MomentTime updated={post_view.post.updated}
published={post_view.post.published} />
updated={post_view.post.updated} </span>
/>
</span>
</li>
</ul>
); );
} }
@ -767,10 +760,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
to={`/post/${post_view.post.id}?scrollToComments=true`} to={`/post/${post_view.post.id}?scrollToComments=true`}
data-tippy-content={title} data-tippy-content={title}
> >
<span className="me-1"> <Icon icon="message-square" classes="me-1" inline />
<Icon icon="message-square" classes="me-1" inline /> {post_view.counts.comments}
{post_view.counts.comments}
</span>
{this.unreadCount && ( {this.unreadCount && (
<span className="text-muted fst-italic"> <span className="text-muted fst-italic">
({this.unreadCount} {I18NextService.i18n.t("new")}) ({this.unreadCount} {I18NextService.i18n.t("new")})
@ -1104,7 +1095,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const post_view = this.postView; const post_view = this.postView;
return ( return (
this.state.showAdvanced && ( this.state.showAdvanced && (
<> <div className="mt-3">
{this.canMod_ && ( {this.canMod_ && (
<> <>
{!this.creatorIsMod_ && {!this.creatorIsMod_ &&
@ -1265,7 +1256,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)} )}
</> </>
)} )}
</> </div>
) )
); );
} }
@ -1460,11 +1451,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
); );
} }
showMobilePreview() { showBodyPreview() {
const { body, id } = this.postView.post; const { body, id } = this.postView.post;
return !this.showBody && body ? ( return !this.showBody && body ? (
<Link className="text-body" to={`/post/${id}`}> <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
<div className="md-div mb-1 preview-lines">{body}</div> <div className="md-div mb-1 preview-lines">{body}</div>
</Link> </Link>
) : ( ) : (
@ -1485,7 +1476,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.mobileThumbnail()} {this.mobileThumbnail()}
{/* Show a preview of the post body */} {/* Show a preview of the post body */}
{this.showMobilePreview()} {this.showBodyPreview()}
{this.commentsLine(true)} {this.commentsLine(true)}
{this.userActionsLine()} {this.userActionsLine()}
@ -1507,6 +1498,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<div className="col-12"> <div className="col-12">
{this.postTitleLine()} {this.postTitleLine()}
{this.createdLine()} {this.createdLine()}
{this.showBodyPreview()}
{this.commentsLine()} {this.commentsLine()}
{this.duplicatesLine()} {this.duplicatesLine()}
{this.userActionsLine()} {this.userActionsLine()}