Comment border tweak (#1820)

* Tweak border depth

* Tweak top level margins

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 6c7d5c0040298cacfb198f4946c5ca1370b64360..7b7f29e5cbc5fda864a6df18f9dfb201150d597f 100644 (file)
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -114,7 +114,7 @@ interface CommentNodeProps {
   moderators?: CommunityModeratorView[];
   admins?: PersonView[];
   noBorder?: boolean;
-  noIndent?: boolean;
+  isTopLevel?: boolean;
   viewOnly?: boolean;
   locked?: boolean;
   markable?: boolean;
@@ -292,11 +292,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             mark: this.isCommentNew || this.commentView.comment.distinguished,
           })}
         >
-          <div
-            className={classNames({
-              "ms-2": !this.props.noIndent,
-            })}
-          >
+          <div className="ms-2">
             <div className="d-flex flex-wrap align-items-center text-muted small">
               <button
                 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}
             siteLanguages={this.props.siteLanguages}
             hideImages={this.props.hideImages}
-            isChild={!this.props.noIndent}
+            isChild={!this.props.isTopLevel}
             depth={this.props.node.depth + 1}
             finished={this.props.finished}
             onCommentReplyRead={this.props.onCommentReplyRead}

diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx
index 495b6bbc66d96949a6e1d4ab4e5f8844ad2de52f..2e60309eec0a86de84948aa13436418782aecf33 100644 (file)
--- a/src/shared/components/comment/comment-nodes.tsx
+++ b/src/shared/components/comment/comment-nodes.tsx
@@ -35,7 +35,7 @@ interface CommentNodesProps {
   admins?: PersonView[];
   maxCommentsShown?: number;
   noBorder?: boolean;
-  noIndent?: boolean;
+  isTopLevel?: boolean;
   viewOnly?: boolean;
   locked?: boolean;
   markable?: boolean;
@@ -86,7 +86,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
       this.props.nodes.length > 0 && (
         <ul
           className={classNames("comments", {
-            "ms-1": !!this.props.isChild,
+            "ms-1": this.props.depth && this.props.depth > 1,
             "border-top border-light": !this.props.noBorder,
           })}
           style={
@@ -100,7 +100,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
               key={node.comment_view.comment.id}
               node={node}
               noBorder={this.props.noBorder}
-              noIndent={this.props.noIndent}
+              isTopLevel={this.props.isTopLevel}
               viewOnly={this.props.viewOnly}
               locked={this.props.locked}
               moderators={this.props.moderators}

diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index b88d6f6100e03843ef387ad60a3c8d524a0b1650..f89eb832e2aeb7800cf5e3fa0ac1fa2ca8b6f42e 100644 (file)
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -448,7 +448,7 @@ export class Community extends Component<
               nodes={commentsToFlatNodes(this.state.commentsRes.data.comments)}
               viewType={CommentViewType.Flat}
               finished={this.state.finished}
-              noIndent
+              isTopLevel
               showContext
               enableDownvotes={enableDownvotes(site_res)}
               moderators={communityRes.moderators}

diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 741dfa57aa7576eb0138bf1d687ab2773ae4a70d..5d949f3edcd61792181f08d014925fe152124f27 100644 (file)
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -718,7 +718,7 @@ export class Home extends Component<any, HomeState> {
               nodes={commentsToFlatNodes(comments)}
               viewType={CommentViewType.Flat}
               finished={this.state.finished}
-              noIndent
+              isTopLevel
               showCommunity
               showContext
               enableDownvotes={enableDownvotes(siteRes)}

diff --git a/src/shared/components/person/person-details.tsx b/src/shared/components/person/person-details.tsx
index b2b74b6e4ad0ea95b2b4d410923f355456befa47..6af64f5b398275ac39cea709eae97d5eeab6bd1b 100644 (file)
--- a/src/shared/components/person/person-details.tsx
+++ b/src/shared/components/person/person-details.tsx
@@ -252,7 +252,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
           viewType={CommentViewType.Flat}
           admins={this.props.admins}
           finished={this.props.finished}
-          noIndent
+          isTopLevel
           showCommunity
           showContext
           enableDownvotes={this.props.enableDownvotes}

diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index eeb713a9cef6538bc483776b3cbb0dbf7313b6b5..003ad710ce65a07bbaf984ffd307a28eb14da16f 100644 (file)
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -542,7 +542,7 @@ export class Post extends Component<any, PostState> {
             nodes={commentsToFlatNodes(commentsRes.data.comments)}
             viewType={this.state.commentViewType}
             maxCommentsShown={this.state.maxCommentsShown}
-            noIndent
+            isTopLevel
             locked={postRes.data.post_view.post.locked}
             moderators={postRes.data.moderators}
             admins={this.state.siteRes.admins}

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 99b180356b87c5ab89f789a795c49c81f9ef8645..36bfca8113350c7b97c1a3291e0bcd22014ad58a 100644 (file)
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -721,7 +721,7 @@ export class Search extends Component<any, SearchState> {
                   viewType={CommentViewType.Flat}
                   viewOnly
                   locked
-                  noIndent
+                  isTopLevel
                   enableDownvotes={enableDownvotes(this.state.siteRes)}
                   allLanguages={this.state.siteRes.all_languages}
                   siteLanguages={this.state.siteRes.discussion_languages}
@@ -782,7 +782,7 @@ export class Search extends Component<any, SearchState> {
         viewType={CommentViewType.Flat}
         viewOnly
         locked
-        noIndent
+        isTopLevel
         enableDownvotes={enableDownvotes(siteRes)}
         allLanguages={siteRes.all_languages}
         siteLanguages={siteRes.discussion_languages}