adjust layout MarkdownSettings

src/client/js/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -43,7 +43,7 @@ class LineBreakForm extends React.Component {
     const helpLineBreak = { __html: t('markdown_setting.Enable Line Break desc') };
 
     return (
-      <div className="form-group row my-3">
+      <div className="form-group my-3">
         <div className="col-xs-offset-4 col-xs-6 text-left">
           <div className="checkbox checkbox-success">
             <input
@@ -69,7 +69,7 @@ class LineBreakForm extends React.Component {
     const helpLineBreakInComment = { __html: t('markdown_setting.Enable Line Break for comment desc') };
 
     return (
-      <div className="form-group row my-3">
+      <div className="form-group my-3">
         <div className="col-xs-offset-4 col-xs-6 text-left">
           <div className="checkbox checkbox-success">
             <input
@@ -93,11 +93,11 @@ class LineBreakForm extends React.Component {
 
     return (
       <React.Fragment>
-        <fieldset className="row mx-auto">
+        <fieldset className="row mx-auto w-100">
           {this.renderLineBreakOption()}
           {this.renderLineBreakInCommentOption()}
         </fieldset>
-        <div className="form-group my-3">
+        <div className="form-group row mx-auto my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>
           </div>

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -38,71 +38,73 @@ class PresentationForm extends React.Component {
     const { pageBreakSeparator, pageBreakCustomSeparator } = markDownSettingContainer.state;
 
     return (
-      <fieldset className="form-group row my-2">
-
-        <label className="col-xs-3 control-label text-right">
-          { t('markdown_setting.Page break setting') }
-        </label>
-
-        <div className="col-xs-3 radio radio-primary">
-          <input
-            type="radio"
-            id="pageBreakOption1"
-            checked={pageBreakSeparator === 1}
-            onChange={() => markDownSettingContainer.switchPageBreakSeparator(1)}
-          />
-          <label htmlFor="pageBreakOption1">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset one separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset one separator desc') }
-              <pre><code>{ t('markdown_setting.Preset one separator value') }</code></pre>
-            </div>
+      <React.Fragment>
+        <fieldset className="form-group row mx-auto my-2 w-100">
+
+          <label className="col-xs-3 control-label text-left">
+            { t('markdown_setting.Page break setting') }
           </label>
-        </div>
 
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption2"
-            checked={pageBreakSeparator === 2}
-            onChange={() => markDownSettingContainer.switchPageBreakSeparator(2)}
-          />
-          <label htmlFor="pageBreakOption2">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset two separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset two separator desc') }
-              <pre><code>{ t('markdown_setting.Preset two separator value') }</code></pre>
+          <div className="form-group form-check-inline col-xs-12 my-3">
+            <div className="col-xs-3 radio radio-primary mt-3">
+              <input
+                type="radio"
+                id="pageBreakOption1"
+                checked={pageBreakSeparator === 1}
+                onChange={() => markDownSettingContainer.switchPageBreakSeparator(1)}
+              />
+              <label htmlFor="pageBreakOption1">
+                <p className="font-weight-bold">{ t('markdown_setting.Preset one separator') }</p>
+                <div className="mt-3">
+                  { t('markdown_setting.Preset one separator desc') }
+                  <pre><code>{ t('markdown_setting.Preset one separator value') }</code></pre>
+                </div>
+              </label>
             </div>
-          </label>
-        </div>
 
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption3"
-            checked={pageBreakSeparator === 3}
-            onChange={() => markDownSettingContainer.switchPageBreakSeparator(3)}
-          />
-          <label htmlFor="pageBreakOption3">
-            <p className="font-weight-bold">{ t('markdown_setting.Custom separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Custom separator desc') }
+            <div className="col-xs-3 radio radio-primary mt-3">
               <input
-                className="form-control"
-                value={pageBreakCustomSeparator}
-                onChange={(e) => { markDownSettingContainer.setPageBreakCustomSeparator(e.target.value) }}
+                type="radio"
+                id="pageBreakOption2"
+                checked={pageBreakSeparator === 2}
+                onChange={() => markDownSettingContainer.switchPageBreakSeparator(2)}
               />
+              <label htmlFor="pageBreakOption2">
+                <p className="font-weight-bold">{ t('markdown_setting.Preset two separator') }</p>
+                <div className="mt-3">
+                  { t('markdown_setting.Preset two separator desc') }
+                  <pre><code>{ t('markdown_setting.Preset two separator value') }</code></pre>
+                </div>
+              </label>
             </div>
-          </label>
-        </div>
 
-        <div className="form-group my-3">
+            <div className="col-xs-3 radio radio-primary mt-3">
+              <input
+                type="radio"
+                id="pageBreakOption3"
+                checked={pageBreakSeparator === 3}
+                onChange={() => markDownSettingContainer.switchPageBreakSeparator(3)}
+              />
+              <label htmlFor="pageBreakOption3">
+                <p className="font-weight-bold">{ t('markdown_setting.Custom separator') }</p>
+                <div className="mt-3">
+                  { t('markdown_setting.Custom separator desc') }
+                  <input
+                    className="form-control"
+                    value={pageBreakCustomSeparator}
+                    onChange={(e) => { markDownSettingContainer.setPageBreakCustomSeparator(e.target.value) }}
+                  />
+                </div>
+              </label>
+            </div>
+          </div>
+        </fieldset>
+        <div className="form-group mx-auto my-3">
           <div className="col-xs-offset-4 col-xs-5">
-            <div className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</div>
+            <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>
           </div>
         </div>
-
-      </fieldset>
+      </React.Fragment>
     );
   }
 

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -39,8 +39,8 @@ class XssForm extends React.Component {
     const { xssOption } = markDownSettingContainer.state;
 
     return (
-      <fieldset className="form-group col-xs-12 my-3">
-        <div className="col-xs-4 radio radio-primary">
+      <div className="form-group form-check-inline col-xs-12 my-3">
+        <div className="col-xs-4 align-self-start radio radio-primary">
           <input
             type="radio"
             id="xssOption1"
@@ -56,7 +56,7 @@ class XssForm extends React.Component {
           </label>
         </div>
 
-        <div className="col-xs-4 radio radio-primary">
+        <div className="col-xs-4 align-self-start radio radio-primary">
           <input
             type="radio"
             id="xssOption2"
@@ -70,7 +70,7 @@ class XssForm extends React.Component {
           </label>
         </div>
 
-        <div className="col-xs-4 radio radio-primary">
+        <div className="col-xs-4 align-self-start radio radio-primary">
           <input
             type="radio"
             id="xssOption3"
@@ -83,7 +83,7 @@ class XssForm extends React.Component {
             <WhiteListInput customizable />
           </label>
         </div>
-      </fieldset>
+      </div>
     );
   }
 
@@ -93,31 +93,28 @@ class XssForm extends React.Component {
 
     return (
       <React.Fragment>
-        <form className="row">
-          <div className="form-group">
-            <div className="col-xs-offset-4 col-xs-4 text-left">
-              <div className="checkbox checkbox-success">
-                <input
-                  type="checkbox"
-                  id="XssEnable"
-                  className="form-check-input"
-                  name="isEnabledXss"
-                  checked={isEnabledXss}
-                  onChange={markDownSettingContainer.switchEnableXss}
-                />
-                <label htmlFor="XssEnable">
-                  { t('markdown_setting.Enable XSS prevention') }
-                </label>
-              </div>
+        <fieldset className="row form-group my-3 mx-auto w-100">
+          <div className="col-xs-offset-4 col-xs-6 text-left">
+            <div className="checkbox checkbox-success">
+              <input
+                type="checkbox"
+                id="XssEnable"
+                name="isEnabledXss"
+                checked={isEnabledXss}
+                onChange={markDownSettingContainer.switchEnableXss}
+              />
+              <label htmlFor="XssEnable">
+                { t('markdown_setting.Enable XSS prevention') }
+              </label>
             </div>
-            {isEnabledXss && this.xssOptions()}
           </div>
-          <div className="form-group my-3">
-            <div className="col-xs-offset-4 col-xs-5">
-              <div className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</div>
-            </div>
+          {isEnabledXss && this.xssOptions()}
+        </fieldset>
+        <div className="form-group row mx-auto my-3">
+          <div className="col-xs-offset-4 col-xs-5">
+            <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>
           </div>
-        </form>
+        </div>
       </React.Fragment>
     );
   }