adjust layout

src/client/js/components/PageComment/Comment.jsx

@@ -46,12 +46,6 @@ class Comment extends React.Component {
 
   componentWillMount() {
     this.renderHtml(this.props.comment.comment);
-    this.init();
-  }
-
-  init() {
-    const layoutType = this.props.appContainer.getConfig().layoutType;
-    this.setState({ isLayoutTypeGrowi: layoutType === 'crowi-plus' || layoutType === 'growi' });
   }
 
   componentWillReceiveProps(nextProps) {
@@ -208,12 +202,12 @@ class Comment extends React.Component {
     return (
       <React.Fragment>
         { areThereHiddenReplies && (
-          <React.Fragment>
-            <Collapse className="page-comments-list-older" in={this.state.isOlderRepliesShown}>
+          <div className="page-comments-hidden-replies">
+            <Collapse in={this.state.isOlderRepliesShown}>
               <div>{hiddenElements}</div>
             </Collapse>
             <div className="text-center">{toggleButton}</div>
-          </React.Fragment>
+          </div>
         ) }
 
         {shownElements}

src/client/js/components/PageComments.jsx

@@ -158,7 +158,7 @@ class PageComments extends React.Component {
             </Button>
           </div>
         )}
-        { showEditor && (
+        { showEditor && isLoggedIn && (
           <div className="page-comment-reply-form">
             <CommentEditor
               growiRenderer={this.growiRenderer}
@@ -175,8 +175,11 @@ class PageComments extends React.Component {
     const topLevelComments = [];
     const allReplies = [];
 
+    const layoutType = this.props.appContainer.getConfig().layoutType;
+    const isBaloonStyle = layoutType.match(/crowi-plus|growi|kibela/);
+
     let comments = this.props.commentContainer.state.comments;
-    if (this.state.isLayoutTypeGrowi) {
+    if (isBaloonStyle) {
       // replace with asc order array
       comments = comments.slice().reverse(); // non-destructive reverse
     }

src/client/styles/scss/_comment_growi.scss

@@ -2,7 +2,8 @@
   %comment-section {
     position: relative;
     padding: 1em;
-    margin: 1em 0 0.2em 4.5em;
+    margin-left: 4.5em;
+
     // screen-xs
     @media (max-width: $screen-xs) {
       margin-left: 3.5em;
@@ -79,6 +80,13 @@
   /*
    * reply
    */
+  .page-comment-reply {
+    margin-top: 1em;
+  }
+  // remove margin after hidden replies
+  .page-comments-hidden-replies + .page-comment-reply {
+    margin-top: 0;
+  }
   .page-comment-reply,
   .page-comment-reply-form {
     margin-right: 15px;
@@ -87,6 +95,7 @@
   // reply button
   .btn.btn-comment-reply {
     width: 120px;
+    margin-top: 0.5em;
     margin-right: 15px;
 
     border-top: none;
@@ -106,7 +115,8 @@
     }
 
     position: relative;
-    margin-top: 2em;
+    margin-top: 1em;
+
     // user icon
     .picture {
       @extend %picture;

src/client/styles/scss/_comment_kibela.scss

@@ -3,7 +3,7 @@
   %comment-section {
     position: relative;
     padding: 1em;
-    margin: 1em 0 0.2em 4.5em;
+    margin-left: 4.5em;
 
     @media (max-width: $screen-xs) {
       margin-left: 3.5em;
@@ -82,6 +82,13 @@
   /*
    * reply
    */
+  .page-comment-reply {
+    margin-top: 1em;
+  }
+  // remove margin after hidden replies
+  .page-comments-hidden-replies + .page-comment-reply {
+    margin-top: 0;
+  }
   .page-comment-reply,
   .page-comment-reply-form {
     margin-right: 15px;
@@ -90,7 +97,12 @@
   // reply button
   .btn.btn-comment-reply {
     width: 120px;
+    margin-top: 0.5em;
     margin-right: 15px;
+
+    border-top: none;
+    border-right: none;
+    border-left: none;
   }
 
   // show when hover
@@ -105,7 +117,8 @@
     }
 
     position: relative;
-    margin-top: 2em;
+    margin-top: 1em;
+
     // user icon
     .picture {
       @extend %picture;