make grid responsive

src/client/js/components/Admin/ImportData/GrowiArchive/UploadForm.jsx

@@ -51,8 +51,8 @@ class UploadForm extends React.Component {
       <form onSubmit={this.uploadZipFile}>
         <fieldset>
           <div className="form-group row">
-            <label htmlFor="file" className="col-3 control-label">{t('admin:importer_management.growi_settings.growi_archive_file')}</label>
-            <div className="col-6">
+            <label htmlFor="file" className="col-md-3 control-label">{t('admin:importer_management.growi_settings.growi_archive_file')}</label>
+            <div className="col-md-6">
               <input
                 type="file"
                 name="file"
@@ -64,7 +64,7 @@ class UploadForm extends React.Component {
             </div>
           </div>
           <div className="form-group row">
-            <div className="offset-3 col-6">
+            <div className="mx-auto">
               <button type="submit" className="btn btn-primary" disabled={!this.validateForm()}>
                 {t('admin:importer_management.growi_settings.upload')}
               </button>

src/client/js/components/Admin/ImportDataPage.jsx

@@ -182,26 +182,26 @@ class ImportDataPage extends React.Component {
             </div>
 
             <div className="form-group row">
-              <label htmlFor="settingForm[importer:esa:team_name]" className="col-3 col-form-label">
+              <label htmlFor="settingForm[importer:esa:team_name]" className="text-left text-md-right col-md-3 col-form-label">
                 { t('admin:importer_management.esa_settings.team_name') }
               </label>
-              <div className="col-6">
+              <div className="col-md-6">
                 <input className="form-control" type="text" name="esaTeamName" value={esaTeamName} onChange={this.handleInputValue} />
               </div>
 
             </div>
 
             <div className="form-group row">
-              <label htmlFor="settingForm[importer:esa:access_token]" className="col-3 col-form-label">
+              <label htmlFor="settingForm[importer:esa:access_token]" className="text-left text-md-right col-md-3 col-form-label">
                 { t('admin:importer_management.esa_settings.access_token') }
               </label>
-              <div className="col-6">
+              <div className="col-md-6">
                 <input className="form-control" type="password" name="esaAccessToken" value={esaAccessToken} onChange={this.handleInputValue} />
               </div>
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6">
+              <div className="offset-md-3 col-md-6">
                 <input
                   id="testConnectionToEsa"
                   type="button"
@@ -211,12 +211,12 @@ class ImportDataPage extends React.Component {
                   value={t('admin:importer_management.import')}
                 />
                 <input type="button" className="btn btn-secondary" onClick={this.esaHandleSubmitUpdate} value={t('Update')} />
-                <span className="offset-md-1">
+                <span className="offset-0 offset-sm-1">
                   <input
                     id="importFromEsa"
                     type="button"
                     name="Esa"
-                    className="mt-3 mt-md-0 btn btn-secondary btn-esa"
+                    className="btn btn-secondary btn-esa"
                     onClick={this.esaHandleSubmitTest}
                     value={t('admin:importer_management.esa_settings.test_connection')}
                   />
@@ -275,26 +275,26 @@ class ImportDataPage extends React.Component {
               <input type="password" name="dummypass" style={{ display: 'none', top: '-100px', left: '-100px' }} />
             </div>
             <div className="form-group row">
-              <label htmlFor="settingForm[importer:qiita:team_name]" className="col-3 col-form-label">
+              <label htmlFor="settingForm[importer:qiita:team_name]" className="text-left text-md-right col-md-3 col-form-label">
                 { t('admin:importer_management.qiita_settings.team_name') }
               </label>
-              <div className="col-6">
+              <div className="col-md-6">
                 <input className="form-control" type="text" name="qiitaTeamName" value={qiitaTeamName} onChange={this.handleInputValue} />
               </div>
             </div>
 
             <div className="form-group row">
-              <label htmlFor="settingForm[importer:qiita:access_token]" className="col-3 col-form-label">
+              <label htmlFor="settingForm[importer:qiita:access_token]" className="text-left text-md-right col-md-3 col-form-label">
                 { t('admin:importer_management.qiita_settings.access_token') }
               </label>
-              <div className="col-6">
+              <div className="col-md-6">
                 <input className="form-control" type="password" name="qiitaAccessToken" value={qiitaAccessToken} onChange={this.handleInputValue} />
               </div>
             </div>
 
 
             <div className="form-group row">
-              <div className="offset-3 col-6">
+              <div className="offset-md-3 col-md-6">
                 <input
                   id="testConnectionToQiita"
                   type="button"
@@ -304,12 +304,12 @@ class ImportDataPage extends React.Component {
                   value={t('admin:importer_management.import')}
                 />
                 <input type="button" className="btn btn-secondary" onClick={this.qiitaHandleSubmitUpdate} value={t('Update')} />
-                <span className="offset-md-1">
+                <span className="offset-0 offset-sm-1">
                   <input
                     name="Qiita"
                     type="button"
                     id="importFromQiita"
-                    className="mt-3 mt-md-0 btn btn-secondary btn-qiita"
+                    className="btn btn-secondary btn-qiita"
                     onClick={this.qiitaHandleSubmitTest}
                     value={t('admin:importer_management.qiita_settings.test_connection')}
                   />