mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-22 12:21:13 +00:00
Comment border tweak (#1820)
* Tweak border depth * Tweak top level margins
This commit is contained in:
parent
546f0ad704
commit
2911cd8cdb
7 changed files with 12 additions and 16 deletions
|
@ -114,7 +114,7 @@ interface CommentNodeProps {
|
||||||
moderators?: CommunityModeratorView[];
|
moderators?: CommunityModeratorView[];
|
||||||
admins?: PersonView[];
|
admins?: PersonView[];
|
||||||
noBorder?: boolean;
|
noBorder?: boolean;
|
||||||
noIndent?: boolean;
|
isTopLevel?: boolean;
|
||||||
viewOnly?: boolean;
|
viewOnly?: boolean;
|
||||||
locked?: boolean;
|
locked?: boolean;
|
||||||
markable?: boolean;
|
markable?: boolean;
|
||||||
|
@ -292,11 +292,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
mark: this.isCommentNew || this.commentView.comment.distinguished,
|
mark: this.isCommentNew || this.commentView.comment.distinguished,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<div
|
<div className="ms-2">
|
||||||
className={classNames({
|
|
||||||
"ms-2": !this.props.noIndent,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div className="d-flex flex-wrap align-items-center text-muted small">
|
<div className="d-flex flex-wrap align-items-center text-muted small">
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-link text-muted me-2"
|
className="btn btn-sm btn-link text-muted me-2"
|
||||||
|
@ -1136,7 +1132,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
||||||
allLanguages={this.props.allLanguages}
|
allLanguages={this.props.allLanguages}
|
||||||
siteLanguages={this.props.siteLanguages}
|
siteLanguages={this.props.siteLanguages}
|
||||||
hideImages={this.props.hideImages}
|
hideImages={this.props.hideImages}
|
||||||
isChild={!this.props.noIndent}
|
isChild={!this.props.isTopLevel}
|
||||||
depth={this.props.node.depth + 1}
|
depth={this.props.node.depth + 1}
|
||||||
finished={this.props.finished}
|
finished={this.props.finished}
|
||||||
onCommentReplyRead={this.props.onCommentReplyRead}
|
onCommentReplyRead={this.props.onCommentReplyRead}
|
||||||
|
|
|
@ -35,7 +35,7 @@ interface CommentNodesProps {
|
||||||
admins?: PersonView[];
|
admins?: PersonView[];
|
||||||
maxCommentsShown?: number;
|
maxCommentsShown?: number;
|
||||||
noBorder?: boolean;
|
noBorder?: boolean;
|
||||||
noIndent?: boolean;
|
isTopLevel?: boolean;
|
||||||
viewOnly?: boolean;
|
viewOnly?: boolean;
|
||||||
locked?: boolean;
|
locked?: boolean;
|
||||||
markable?: boolean;
|
markable?: boolean;
|
||||||
|
@ -86,7 +86,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
|
||||||
this.props.nodes.length > 0 && (
|
this.props.nodes.length > 0 && (
|
||||||
<ul
|
<ul
|
||||||
className={classNames("comments", {
|
className={classNames("comments", {
|
||||||
"ms-1": !!this.props.isChild,
|
"ms-1": this.props.depth && this.props.depth > 1,
|
||||||
"border-top border-light": !this.props.noBorder,
|
"border-top border-light": !this.props.noBorder,
|
||||||
})}
|
})}
|
||||||
style={
|
style={
|
||||||
|
@ -100,7 +100,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
|
||||||
key={node.comment_view.comment.id}
|
key={node.comment_view.comment.id}
|
||||||
node={node}
|
node={node}
|
||||||
noBorder={this.props.noBorder}
|
noBorder={this.props.noBorder}
|
||||||
noIndent={this.props.noIndent}
|
isTopLevel={this.props.isTopLevel}
|
||||||
viewOnly={this.props.viewOnly}
|
viewOnly={this.props.viewOnly}
|
||||||
locked={this.props.locked}
|
locked={this.props.locked}
|
||||||
moderators={this.props.moderators}
|
moderators={this.props.moderators}
|
||||||
|
|
|
@ -448,7 +448,7 @@ export class Community extends Component<
|
||||||
nodes={commentsToFlatNodes(this.state.commentsRes.data.comments)}
|
nodes={commentsToFlatNodes(this.state.commentsRes.data.comments)}
|
||||||
viewType={CommentViewType.Flat}
|
viewType={CommentViewType.Flat}
|
||||||
finished={this.state.finished}
|
finished={this.state.finished}
|
||||||
noIndent
|
isTopLevel
|
||||||
showContext
|
showContext
|
||||||
enableDownvotes={enableDownvotes(site_res)}
|
enableDownvotes={enableDownvotes(site_res)}
|
||||||
moderators={communityRes.moderators}
|
moderators={communityRes.moderators}
|
||||||
|
|
|
@ -718,7 +718,7 @@ export class Home extends Component<any, HomeState> {
|
||||||
nodes={commentsToFlatNodes(comments)}
|
nodes={commentsToFlatNodes(comments)}
|
||||||
viewType={CommentViewType.Flat}
|
viewType={CommentViewType.Flat}
|
||||||
finished={this.state.finished}
|
finished={this.state.finished}
|
||||||
noIndent
|
isTopLevel
|
||||||
showCommunity
|
showCommunity
|
||||||
showContext
|
showContext
|
||||||
enableDownvotes={enableDownvotes(siteRes)}
|
enableDownvotes={enableDownvotes(siteRes)}
|
||||||
|
|
|
@ -252,7 +252,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
||||||
viewType={CommentViewType.Flat}
|
viewType={CommentViewType.Flat}
|
||||||
admins={this.props.admins}
|
admins={this.props.admins}
|
||||||
finished={this.props.finished}
|
finished={this.props.finished}
|
||||||
noIndent
|
isTopLevel
|
||||||
showCommunity
|
showCommunity
|
||||||
showContext
|
showContext
|
||||||
enableDownvotes={this.props.enableDownvotes}
|
enableDownvotes={this.props.enableDownvotes}
|
||||||
|
|
|
@ -542,7 +542,7 @@ export class Post extends Component<any, PostState> {
|
||||||
nodes={commentsToFlatNodes(commentsRes.data.comments)}
|
nodes={commentsToFlatNodes(commentsRes.data.comments)}
|
||||||
viewType={this.state.commentViewType}
|
viewType={this.state.commentViewType}
|
||||||
maxCommentsShown={this.state.maxCommentsShown}
|
maxCommentsShown={this.state.maxCommentsShown}
|
||||||
noIndent
|
isTopLevel
|
||||||
locked={postRes.data.post_view.post.locked}
|
locked={postRes.data.post_view.post.locked}
|
||||||
moderators={postRes.data.moderators}
|
moderators={postRes.data.moderators}
|
||||||
admins={this.state.siteRes.admins}
|
admins={this.state.siteRes.admins}
|
||||||
|
|
|
@ -721,7 +721,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
viewType={CommentViewType.Flat}
|
viewType={CommentViewType.Flat}
|
||||||
viewOnly
|
viewOnly
|
||||||
locked
|
locked
|
||||||
noIndent
|
isTopLevel
|
||||||
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
enableDownvotes={enableDownvotes(this.state.siteRes)}
|
||||||
allLanguages={this.state.siteRes.all_languages}
|
allLanguages={this.state.siteRes.all_languages}
|
||||||
siteLanguages={this.state.siteRes.discussion_languages}
|
siteLanguages={this.state.siteRes.discussion_languages}
|
||||||
|
@ -782,7 +782,7 @@ export class Search extends Component<any, SearchState> {
|
||||||
viewType={CommentViewType.Flat}
|
viewType={CommentViewType.Flat}
|
||||||
viewOnly
|
viewOnly
|
||||||
locked
|
locked
|
||||||
noIndent
|
isTopLevel
|
||||||
enableDownvotes={enableDownvotes(siteRes)}
|
enableDownvotes={enableDownvotes(siteRes)}
|
||||||
allLanguages={siteRes.all_languages}
|
allLanguages={siteRes.all_languages}
|
||||||
siteLanguages={siteRes.discussion_languages}
|
siteLanguages={siteRes.discussion_languages}
|
||||||
|
|
Loading…
Reference in a new issue