FB

src/client/js/components/Admin/Common/AdminDropdownOption.jsx

@@ -10,24 +10,22 @@ class AdminDropdownOption extends React.PureComponent {
 
   render() {
     return (
-      <div className="form-group row">
-        <div className="col-xs-offset-3 col-xs-6 text-left">
-          <FormGroup controlId="formControlsSelect" className="my-0">
-            <ControlLabel>{this.props.label}</ControlLabel>
-            <FormControl
-              componentClass="select"
-              placeholder="select"
-              className="btn-group-sm selectpicker"
-              onChange={event => this.props.onChange(event.target.value)}
-            >
-              {this.props.options.map((option) => {
-                return <option key={option} value={option}>{option}</option>;
-              })}
-            </FormControl>
-          </FormGroup>
-          {this.props.children}
-        </div>
-      </div>
+      <React.Fragment>
+        <FormGroup controlId="formControlsSelect" className="my-0">
+          <ControlLabel>{this.props.label}</ControlLabel>
+          <FormControl
+            componentClass="select"
+            placeholder="select"
+            className="btn-group-sm selectpicker"
+            onChange={event => this.props.onChange(event.target.value)}
+          >
+            {this.props.options.map((option) => {
+              return <option key={option} value={option}>{option}</option>;
+            })}
+          </FormControl>
+        </FormGroup>
+        {this.props.children}
+      </React.Fragment>
     );
   }
 

src/client/js/components/Admin/Customize/CustomizeFunctionOption.jsx

@@ -6,22 +6,20 @@ class CustomizeFunctionOption extends React.PureComponent {
 
   render() {
     return (
-      <div className="form-group row">
-        <div className="col-xs-offset-3 col-xs-9 text-left">
-          <div className="checkbox checkbox-success">
-            <input
-              type="checkbox"
-              id={this.props.optionId}
-              checked={this.props.isChecked}
-              onChange={this.props.onChecked}
-            />
-            <label htmlFor={this.props.optionId}>
-              <strong>{this.props.label}</strong>
-            </label>
-          </div>
-          {this.props.children}
+      <React.Fragment>
+        <div className="checkbox checkbox-success">
+          <input
+            type="checkbox"
+            id={this.props.optionId}
+            checked={this.props.isChecked}
+            onChange={this.props.onChecked}
+          />
+          <label htmlFor={this.props.optionId}>
+            <strong>{this.props.label}</strong>
+          </label>
         </div>
-      </div>
+        {this.props.children}
+      </React.Fragment>
     );
   }
 

src/client/js/components/Admin/Customize/CustomizeFunctionSetting.jsx

@@ -45,54 +45,70 @@ class CustomizeBehaviorSetting extends React.Component {
         <h2>{t('customize_page.Function')}</h2>
         <p className="well">{ t('customize_page.function_choose') }</p>
 
-        <CustomizeFunctionOption
-          optionId="isEnabledTimeline"
-          label={t('customize_page.Timeline function')}
-          isChecked={adminCustomizeContainer.state.isEnabledTimeline}
-          onChecked={() => { adminCustomizeContainer.switchEnableTimeline() }}
-        >
-          <p className="help-block">
-            { t('customize_page.subpage_display') }
-          </p>
-          <p className="help-block">
-            { t('customize_page.performance_decrease') }<br />
-            { t('customize_page.list_page_display') }
-          </p>
-        </CustomizeFunctionOption>
-
-        <CustomizeFunctionOption
-          optionId="isSavedStatesOfTabChanges"
-          label={t('customize_page.tab_switch')}
-          isChecked={adminCustomizeContainer.state.isSavedStatesOfTabChanges}
-          onChecked={() => { adminCustomizeContainer.switchSavedStatesOfTabChanges() }}
-        >
-          <p className="help-block">
-            { t('customize_page.save_edit') }<br />
-            { t('customize_page.by_invalidating') }
-          </p>
-        </CustomizeFunctionOption>
-
-        <CustomizeFunctionOption
-          optionId="isEnabledAttachTitleHeader"
-          label={t('customize_page.attach_title_header')}
-          isChecked={adminCustomizeContainer.state.isEnabledAttachTitleHeader}
-          onChecked={() => { adminCustomizeContainer.switchEnabledAttachTitleHeader() }}
-        >
-          <p className="help-block">
-            { t('customize_page.attach_title_header_desc') }
-          </p>
-        </CustomizeFunctionOption>
-
-        <AdminDropdownOption
-          label={t('customize_page.recent_created__n_draft_num_desc')}
-          value={adminCustomizeContainer.state.currentRecentCreatedLimit}
-          onChange={(value) => { adminCustomizeContainer.switchRecentCreatedLimit(value) }}
-          options={[10, 30, 50]}
-        >
-          <p className="help-block">
-            { t('customize_page.recently_created_n_draft_num_desc') }
-          </p>
-        </AdminDropdownOption>
+        <div className="form-group row">
+          <div className="col-xs-offset-2 col-xs-8 text-left">
+            <CustomizeFunctionOption
+              optionId="isEnabledTimeline"
+              label={t('customize_page.Timeline function')}
+              isChecked={adminCustomizeContainer.state.isEnabledTimeline}
+              onChecked={() => { adminCustomizeContainer.switchEnableTimeline() }}
+            >
+              <p className="help-block">
+                { t('customize_page.subpage_display') }
+              </p>
+              <p className="help-block">
+                { t('customize_page.performance_decrease') }<br />
+                { t('customize_page.list_page_display') }
+              </p>
+            </CustomizeFunctionOption>
+          </div>
+        </div>
+
+        <div className="form-group row">
+          <div className="col-xs-offset-2 col-xs-8 text-left">
+            <CustomizeFunctionOption
+              optionId="isSavedStatesOfTabChanges"
+              label={t('customize_page.tab_switch')}
+              isChecked={adminCustomizeContainer.state.isSavedStatesOfTabChanges}
+              onChecked={() => { adminCustomizeContainer.switchSavedStatesOfTabChanges() }}
+            >
+              <p className="help-block">
+                { t('customize_page.save_edit') }<br />
+                { t('customize_page.by_invalidating') }
+              </p>
+            </CustomizeFunctionOption>
+          </div>
+        </div>
+
+        <div className="form-group row">
+          <div className="col-xs-offset-2 col-xs-8 text-left">
+            <CustomizeFunctionOption
+              optionId="isEnabledAttachTitleHeader"
+              label={t('customize_page.attach_title_header')}
+              isChecked={adminCustomizeContainer.state.isEnabledAttachTitleHeader}
+              onChecked={() => { adminCustomizeContainer.switchEnabledAttachTitleHeader() }}
+            >
+              <p className="help-block">
+                { t('customize_page.attach_title_header_desc') }
+              </p>
+            </CustomizeFunctionOption>
+          </div>
+        </div>
+
+        <div className="form-group row">
+          <div className="col-xs-offset-2 col-xs-8 text-left">
+            <AdminDropdownOption
+              label={t('customize_page.recent_created__n_draft_num_desc')}
+              value={adminCustomizeContainer.state.currentRecentCreatedLimit}
+              onChange={(value) => { adminCustomizeContainer.switchRecentCreatedLimit(value) }}
+              options={[10, 30, 50]}
+            >
+              <p className="help-block">
+                { t('customize_page.recently_created_n_draft_num_desc') }
+              </p>
+            </AdminDropdownOption>
+          </div>
+        </div>
 
         <AdminUpdateButtonRow onClick={this.onClickSubmit} />
       </React.Fragment>