fix grid system

src/client/js/components/Admin/App/AppSetting.jsx

@@ -39,8 +39,8 @@ class AppSetting extends React.Component {
     return (
       <React.Fragment>
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">{t('admin:app_setting.site_name')}</label>
-          <div className="col-xs-6">
+          <label className="col-3 control-label">{t('admin:app_setting.site_name')}</label>
+          <div className="col-6">
             <input
               className="form-control"
               type="text"
@@ -53,8 +53,8 @@ class AppSetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">{t('admin:app_setting.confidential_name')}</label>
-          <div className="col-xs-6">
+          <label className="col-3 control-label">{t('admin:app_setting.confidential_name')}</label>
+          <div className="col-6">
             <input
               className="form-control"
               type="text"
@@ -67,8 +67,8 @@ class AppSetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">{t('admin:app_setting.default_language')}</label>
-          <div className="col-xs-6">
+          <label className="col-3 control-label">{t('admin:app_setting.default_language')}</label>
+          <div className="col-6">
             <div className="radio radio-primary radio-inline">
               <input
                 type="radio"
@@ -95,8 +95,8 @@ class AppSetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">{t('admin:app_setting.file_uploading')}</label>
-          <div className="col-xs-6">
+          <label className="col-3 control-label">{t('admin:app_setting.file_uploading')}</label>
+          <div className="col-6">
             <div className="checkbox checkbox-info">
               <input
                 type="checkbox"

src/client/js/components/Admin/App/AppSettingsPage.jsx

@@ -38,35 +38,35 @@ class AppSettingsPage extends React.Component {
     return (
       <Fragment>
         <div className="row">
-          <div className="col-md-12">
+          <div className="col-lg-12">
             <h2 className="admin-setting-header">{t('App Settings')}</h2>
             <AppSetting />
           </div>
         </div>
 
         <div className="row mt-5">
-          <div className="col-md-12">
+          <div className="col-lg-12">
             <h2 className="admin-setting-header">{t('Site URL settings')}</h2>
             <SiteUrlSetting />
           </div>
         </div>
 
         <div className="row mt-5">
-          <div className="col-md-12">
+          <div className="col-lg-12">
             <h2 className="admin-setting-header">{t('admin:app_setting.mail_settings')}</h2>
             <MailSetting />
           </div>
         </div>
 
         <div className="row mt-5">
-          <div className="col-md-12">
+          <div className="col-lg-12">
             <h2 className="admin-setting-header">{t('admin:app_setting.aws_settings')}</h2>
             <AwsSetting />
           </div>
         </div>
 
         <div className="row mt-5">
-          <div className="col-md-12">
+          <div className="col-lg-12">
             <h2 className="admin-setting-header">{t('admin:app_setting.plugin_settings')}</h2>
             <PluginSetting />
           </div>

src/client/js/components/Admin/App/AwsSetting.jsx

@@ -51,10 +51,10 @@ class AwsSetting extends React.Component {
         </p>
 
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">
+          <label className="col-3 control-label">
             {t('admin:app_setting.region')}
           </label>
-          <div className="col-xs-6">
+          <div className="col-6">
             <input
               className="form-control"
               placeholder={`${t('eg')} ap-northeast-1`}
@@ -67,10 +67,10 @@ class AwsSetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">
+          <label className="col-3 control-label">
             {t('admin:app_setting.custom_endpoint')}
           </label>
-          <div className="col-xs-6">
+          <div className="col-6">
             <input
               className="form-control"
               type="text"
@@ -85,10 +85,10 @@ class AwsSetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">
+          <label className="col-3 control-label">
             {t('admin:app_setting.bucket_name')}
           </label>
-          <div className="col-xs-6">
+          <div className="col-6">
             <input
               className="form-control"
               type="text"
@@ -102,10 +102,10 @@ class AwsSetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">
+          <label className="col-3 control-label">
             Access Key ID
           </label>
-          <div className="col-xs-6">
+          <div className="col-6">
             <input
               className="form-control"
               type="text"
@@ -118,10 +118,10 @@ class AwsSetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">
+          <label className="col-3 control-label">
             Secret Access Key
           </label>
-          <div className="col-xs-6">
+          <div className="col-6">
             <input
               className="form-control"
               type="text"

src/client/js/components/Admin/App/MailSetting.jsx

@@ -40,8 +40,8 @@ class MailSetting extends React.Component {
       <React.Fragment>
         <p className="well">{t('admin:app_setting.smtp_used')} {t('admin:app_setting.smtp_but_aws')}<br />{t('admin:app_setting.neihter_of')}</p>
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">{t('admin:app_setting.from_e-mail_address')}</label>
-          <div className="col-xs-6">
+          <label className="col-3 control-label">{t('admin:app_setting.from_e-mail_address')}</label>
+          <div className="col-6">
             <input
               className="form-control"
               type="text"
@@ -53,8 +53,8 @@ class MailSetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-xs-3 control-label">{t('admin:app_setting.smtp_settings')}</label>
-          <div className="col-xs-4">
+          <label className="col-3 control-label">{t('admin:app_setting.smtp_settings')}</label>
+          <div className="col-4">
             <label>{t('admin:app_setting.host')}</label>
             <input
               className="form-control"
@@ -63,7 +63,7 @@ class MailSetting extends React.Component {
               onChange={(e) => { adminAppContainer.changeSmtpHost(e.target.value) }}
             />
           </div>
-          <div className="col-xs-2">
+          <div className="col-2">
             <label>{t('admin:app_setting.port')}</label>
             <input
               className="form-control"
@@ -74,7 +74,7 @@ class MailSetting extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <div className="col-xs-3 col-xs-offset-3">
+          <div className="col-3 col-offset-3">
             <label>{t('admin:app_setting.user')}</label>
             <input
               className="form-control"
@@ -83,7 +83,7 @@ class MailSetting extends React.Component {
               onChange={(e) => { adminAppContainer.changeSmtpUser(e.target.value) }}
             />
           </div>
-          <div className="col-xs-3">
+          <div className="col-3">
             <label>{t('Password')}</label>
             <input
               className="form-control"

src/client/js/components/Admin/App/PluginSetting.jsx

@@ -42,7 +42,7 @@ class PluginSetting extends React.Component {
         <p className="well">{t('admin:app_setting.enable_plugin_loading')}</p>
 
         <div className="row mb-5">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="col-offset-3 col-6 text-left">
             <div className="checkbox checkbox-success">
               <input
                 id="isEnabledPlugins"

src/client/js/components/Admin/App/SiteUrlSetting.jsx

@@ -44,7 +44,7 @@ class SiteUrlSetting extends React.Component {
 
         <div className="row">
           <div className="col-md-12">
-            <div className="col-xs-offset-3">
+            <div className="col-offset-3">
               <table className="table settings-table">
                 <colgroup>
                   <col className="from-db" />

src/server/views/admin/app.html

@@ -16,7 +16,7 @@
 {% block content_main %}
 <div class="content-main row">
   {% parent %}
-  <div class="col-md-9" id="admin-app"></div>
+  <div class="col-lg-9" id="admin-app"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/export.html

@@ -13,7 +13,7 @@
 {% block content_main %}
 <div class="content-main admin-export row">
   {% parent %}
-  <div id="admin-export-page" class="col-md-9"></div>
+  <div id="admin-export-page" class="col-lg-9"></div>
 </div>
 
 {% endblock content_main %}

src/server/views/admin/importer.html

@@ -13,7 +13,7 @@
 {% block content_main %}
 <div class="content-main admin-importer row">
   {% parent %}
-  <div class="col-md-9" id="admin-importer"></div>
+  <div class="col-lg-9" id="admin-importer"></div>
 </div>
 
 {% endblock content_main %}