adjust custom-radio

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

@@ -40,62 +40,72 @@ class PresentationForm extends React.Component {
     const { pageBreakSeparator, pageBreakCustomSeparator } = adminMarkDownContainer.state;
 
     return (
-      <fieldset className="form-group row my-2">
+      <fieldset className="form-group col-12 my-2">
 
-        <label className="col-xs-3 control-label text-right">
+        <label className="col-12 col-sm-3 control-label font-weight-bold text-left mt-3">
           {t('admin:markdown_setting.presentation_options.page_break_setting')}
         </label>
 
-        <div className="col-xs-3 radio radio-primary">
-          <input
-            type="radio"
-            id="pageBreakOption1"
-            checked={pageBreakSeparator === 1}
-            onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
-          />
-          <label htmlFor="pageBreakOption1">
-            <p className="font-weight-bold">{t('admin:markdown_setting.presentation_options.preset_one_separator')}</p>
-            <div className="mt-3">
-              {t('admin:markdown_setting.presentation_options.preset_one_separator_desc')}
-              <pre><code>{t('admin:markdown_setting.presentation_options.preset_one_separator_value')}</code></pre>
+        <div className="form-group form-check-inline col-12 my-3">
+          <div className="col-4 align-self-start">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="pageBreakOption1"
+                checked={pageBreakSeparator === 1}
+                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
+              />
+              <label className="custom-control-label" htmlFor="pageBreakOption1">
+                <p className="font-weight-bold">{t('admin:markdown_setting.presentation_options.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>
 
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption2"
-            checked={pageBreakSeparator === 2}
-            onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
-          />
-          <label htmlFor="pageBreakOption2">
-            <p className="font-weight-bold">{t('admin:markdown_setting.presentation_options.preset_two_separator')}</p>
-            <div className="mt-3">
-              {t('admin:markdown_setting.presentation_options.preset_two_separator_desc')}
-              <pre><code>{t('admin:markdown_setting.presentation_options.preset_two_separator_value')}</code></pre>
+          <div className="col-4 align-self-start">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="pageBreakOption2"
+                checked={pageBreakSeparator === 2}
+                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
+              />
+              <label className="custom-control-label" htmlFor="pageBreakOption2">
+                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_two_separator') }</p>
+                <div className="mt-3">
+                  { t('admin:markdown_setting.presentation_options.preset_two_separator_desc') }
+                  <pre><code>{ t('admin:markdown_setting.presentation_options.preset_two_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={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
-          />
-          <label htmlFor="pageBreakOption3">
-            <p className="font-weight-bold">{t('admin:markdown_setting.presentation_options.custom_separator')}</p>
-            <div className="mt-3">
-              {t('admin:markdown_setting.presentation_options.custom_separator_desc')}
+          </div>
+          <div className="col-4 align-self-start">
+            <div className="custom-control custom-radio">
               <input
-                className="form-control"
-                defaultValue={pageBreakCustomSeparator}
-                onChange={(e) => { adminMarkDownContainer.setPageBreakCustomSeparator(e.target.value) }}
+                type="radio"
+                id="pageBreakOption3"
+                className="custom-control-input"
+                checked={pageBreakSeparator === 3}
+                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
               />
+              <label className="custom-control-label" htmlFor="pageBreakOption3">
+                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.custom_separator') }</p>
+                <div className="mt-3">
+                  { t('admin:markdown_setting.presentation_options.custom_separator_desc') }
+                  <input
+                    className="form-control"
+                    defaultValue={pageBreakCustomSeparator}
+                    onChange={(e) => { adminMarkDownContainer.setPageBreakCustomSeparator(e.target.value) }}
+                  />
+                </div>
+              </label>
             </div>
-          </label>
+          </div>
         </div>
 
         <div className="form-group col-12 m-3">