Merge pull request #1796 from weseek/imprv-mobile-support-for-comments

Imprv mobile support for comments

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

@@ -87,7 +87,7 @@ class Comment extends React.PureComponent {
   }
 
   getRootClassName(comment) {
-    let className = 'page-comment';
+    let className = 'page-comment flex-column';
 
     const { revisionId, revisionCreatedAt } = this.props.pageContainer.state;
     if (comment.revision === revisionId) {
@@ -197,8 +197,10 @@ class Comment extends React.PureComponent {
           />
         ) : (
           <div id={commentId} className={rootClassName}>
-            <UserPicture user={creator} />
-            <div className="page-comment-main">
+            <div className="page-comment-writer">
+              <UserPicture user={creator} />
+            </div>
+            <div className="page-comment-main ml-0">
               <div className="page-comment-creator">
                 <Username user={creator} />
               </div>

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

@@ -28,7 +28,7 @@ class ReplayComments extends React.PureComponent {
 
   renderReply(reply) {
     return (
-      <div key={reply._id} className="page-comment-reply">
+      <div key={reply._id} className="page-comment-reply ml-4 ml-sm-5 mr-3">
         <Comment
           comment={reply}
           deleteBtnClicked={this.props.deleteBtnClicked}

src/client/js/components/PageComments.jsx

@@ -165,7 +165,7 @@ class PageComments extends React.Component {
           </div>
         )}
         { showEditor && isLoggedIn && (
-          <div className="page-comment-reply-form">
+          <div className="page-comment-reply-form ml-4 ml-sm-5 mr-3">
             <CommentEditor
               growiRenderer={this.growiRenderer}
               replyTo={commentId}

src/client/styles/scss/_comment_growi.scss

@@ -48,6 +48,12 @@
     }
   }
 
+  .page-comment-writer {
+    @include media-breakpoint-down(xs) {
+      height: 3.5em;
+    }
+  }
+
   .page-comment {
     position: relative;
 
@@ -66,6 +72,14 @@
     // コメントセクション
     .page-comment-main {
       @extend %comment-section;
+      @include media-breakpoint-up(sm){
+        margin-left: 4.5em !important;
+      }
+      @include media-breakpoint-down(xs) {
+        &:before {
+          content: none;
+        }
+      }
     }
 
     // コメント本文
@@ -85,11 +99,6 @@
   .page-comments-hidden-replies + .page-comment-reply {
     margin-top: 0;
   }
-  .page-comment-reply,
-  .page-comment-reply-form {
-    margin-right: 15px;
-    margin-left: 6em;
-  }
   // reply button
   .btn.btn-comment-reply {
     width: 120px;