From bf0f80e798b38ee748c0a98ba844d83eac7057b9 Mon Sep 17 00:00:00 2001 From: Jay Sitter <jay@jaysitter.com> Date: Wed, 21 Jun 2023 19:40:24 -0400 Subject: [PATCH] fix: Add post body preview to desktop post listing view --- src/shared/components/post/post-listing.tsx | 76 +++++++++------------ 1 file changed, 34 insertions(+), 42 deletions(-) diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 46a31ba..3c27165 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -360,28 +360,25 @@ export class PostListing extends Component<PostListingProps, PostListingState> { createdLine() { const post_view = this.postView; return ( - <ul className="list-inline mb-1 text-muted small mt-2"> - <li className="list-inline-item"> - <PersonListing person={post_view.creator} /> - - {this.creatorIsMod_ && ( - <span className="mx-1 badge text-bg-light">{i18n.t("mod")}</span> - )} - {this.creatorIsAdmin_ && ( - <span className="mx-1 badge text-bg-light">{i18n.t("admin")}</span> - )} - {post_view.creator.bot_account && ( - <span className="mx-1 badge text-bg-light"> - {i18n.t("bot_account").toLowerCase()} - </span> - )} - {this.props.showCommunity && ( - <> - {" "} - {i18n.t("to")} <CommunityLink community={post_view.community} /> - </> - )} - </li> + <span className="small"> + <PersonListing person={post_view.creator} /> + {this.creatorIsMod_ && ( + <span className="mx-1 badge text-bg-light">{i18n.t("mod")}</span> + )} + {this.creatorIsAdmin_ && ( + <span className="mx-1 badge text-bg-light">{i18n.t("admin")}</span> + )} + {post_view.creator.bot_account && ( + <span className="mx-1 badge text-bg-light"> + {i18n.t("bot_account").toLowerCase()} + </span> + )} + {this.props.showCommunity && ( + <> + {" "} + {i18n.t("to")} <CommunityLink community={post_view.community} /> + </> + )} {post_view.post.language_id !== 0 && ( <span className="mx-1 badge text-bg-light"> { @@ -390,17 +387,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> { )?.name } </span> - )} - <li className="list-inline-item">â¢</li> - <li className="list-inline-item"> - <span> - <MomentTime - published={post_view.post.published} - updated={post_view.post.updated} - /> - </span> - </li> - </ul> + )}{" "} + â¢{" "} + <MomentTime + published={post_view.post.published} + updated={post_view.post.updated} + /> + </span> ); } @@ -737,10 +730,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> { to={`/post/${post_view.post.id}?scrollToComments=true`} data-tippy-content={title} > - <span className="me-1"> - <Icon icon="message-square" classes="me-1" inline /> - {post_view.counts.comments} - </span> + <Icon icon="message-square" classes="me-1" inline /> + {post_view.counts.comments} {this.unreadCount && ( <span className="text-muted fst-italic"> ({this.unreadCount} {i18n.t("new")}) @@ -1068,7 +1059,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { const post_view = this.postView; return ( this.state.showAdvanced && ( - <> + <div className="mt-3"> {this.canMod_ && ( <> {!this.creatorIsMod_ && @@ -1221,7 +1212,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { )} </> )} - </> + </div> ) ); } @@ -1408,11 +1399,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> { ); } - showMobilePreview() { + showBodyPreview() { const { body, id } = this.postView.post; 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> </Link> ) : ( @@ -1433,7 +1424,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { {this.mobileThumbnail()} {/* Show a preview of the post body */} - {this.showMobilePreview()} + {this.showBodyPreview()} {this.commentsLine(true)} {this.userActionsLine()} @@ -1455,6 +1446,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { <div className="col-12"> {this.postTitleLine()} {this.createdLine()} + {this.showBodyPreview()} {this.commentsLine()} {this.duplicatesLine()} {this.userActionsLine()} -- 2.44.1