adjust layout for mobile

lib/views/_form.html

@@ -21,11 +21,11 @@
   <input type="hidden" name="pageForm[currentRevision]" value="{{ pageForm.currentRevision|default(page.revision._id.toString()) }}">
   <div class="page-editor-footer d-flex flex-row align-items-center justify-content-between">
     <div>
-      <div id="page-editor-options-selector"></div>
+      <div id="page-editor-options-selector" class="hidden-xs"></div>
     </div>
 
     <div class="form-inline d-flex align-items-center" id="page-form-setting">
-      <div id="editor-slack-notification"></div>
+      <div id="editor-slack-notification" class="mr-2"></div>
       <div id="page-grant-selector"></div>
       <input type="hidden" id="page-grant" name="pageForm[grant]" value="{{ page.grant }}">
       <input type="hidden" id="grant-group" name="pageForm[grantUserGroupId]" value="{{ pageRelatedGroup._id.toString() }}">

resource/js/components/PageComment/CommentForm.js

@@ -210,6 +210,10 @@ export default class CommentForm extends React.Component {
     });
   }
 
+  renderControls() {
+
+  }
+
   render() {
     const crowi = this.props.crowi;
     const username = crowi.me;
@@ -219,6 +223,13 @@ export default class CommentForm extends React.Component {
     const commentPreview = this.state.isMarkdown ? this.getCommentHtml(): ReactUtils.nl2br(comment);
     const emojiStrategy = this.props.crowi.getEmojiStrategy();
 
+    const errorMessage = <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>;
+    const submitButton = (
+      <Button type="submit"bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
+        Comment
+      </Button>
+    );
+
     return (
       <div>
         <form className="form page-comment-form" id="page-comment-form" onSubmit={this.postComment}>
@@ -256,33 +267,35 @@ export default class CommentForm extends React.Component {
                     }
                   </Tabs>
                 </div>
-                <div className="comment-submit d-flex">
-                  { this.state.key == 1 &&
-                    <label>
-                      <input type="checkbox" id="comment-form-is-markdown" name="isMarkdown" checked={this.state.isMarkdown} value="1" onChange={this.updateStateCheckbox} /> Markdown
-                    </label>
-                  }
-
-                  <div style={{flex: 1}}></div>{/* spacer */}
-                  { this.state.errorMessage &&
-                    <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>
-                  }
-                  { this.state.hasSlackConfig &&
-                    <div className="form-inline d-flex align-items-center">
-                      <SlackNotification
-                      crowi={this.props.crowi}
-                      pageId={this.props.pageId}
-                      pagePath={this.props.pagePath}
-                      onSlackOnChange={this.onSlackOnChange}
-                      onChannelChange={this.onChannelChange}
-                      isSlackEnabled={this.state.isSlackEnabled}
-                      slackChannels={this.state.slackChannels}
-                      />
+                <div className="comment-submit">
+                  <div className="d-flex">
+                    { this.state.key == 1 &&
+                      <label style={{flex: 1}}>
+                        <input type="checkbox" id="comment-form-is-markdown" name="isMarkdown" checked={this.state.isMarkdown} value="1" onChange={this.updateStateCheckbox} /> Markdown
+                      </label>
+                    }
+                    <span className="hidden-xs">{ this.state.errorMessage && errorMessage }</span>
+                    { this.state.hasSlackConfig &&
+                      <div className="form-inline align-self-center mr-md-2">
+                        <SlackNotification
+                          crowi={this.props.crowi}
+                          pageId={this.props.pageId}
+                          pagePath={this.props.pagePath}
+                          onSlackOnChange={this.onSlackOnChange}
+                          onChannelChange={this.onChannelChange}
+                          isSlackEnabled={this.state.isSlackEnabled}
+                          slackChannels={this.state.slackChannels}
+                        />
+                      </div>
+                    }
+                    <div className="hidden-xs">{submitButton}</div>
+                  </div>
+                  <div className="visible-xs mt-2">
+                    <div className="d-flex justify-content-end">
+                      { this.state.errorMessage && errorMessage }
+                      <div>{submitButton}</div>
                     </div>
-                  }
-                  <Button type="submit" value="Submit" bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
-                    Comment
-                  </Button>
+                  </div>
                 </div>
               </div>
             </div>

resource/js/components/SlackNotification.js

@@ -47,7 +47,7 @@ export default class SlackNotification extends React.Component {
     const formNameChannels = this.props.formName && this.props.formName + '[notify][slack][channel]';
 
     return (
-      <div className="input-group input-group-sm input-group-slack extended-setting m-r-5">
+      <div className="input-group input-group-sm input-group-slack extended-setting">
         <label className="input-group-addon">
           <img id="slack-mark-white" src="/images/icons/slack/mark-monochrome_white.svg" width="18" height="18"/>
           <img id="slack-mark-black" src="/images/icons/slack/mark-monochrome_black.svg" width="18" height="18"/>