Merge branch 'support/apply-bootstrap4' into imprv/security-setting-responsive

resource/locales/en-US/sandbox-bootstrap3.md

@@ -14,47 +14,68 @@
 <div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
 <div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
 
-# Panels
+# Cards
 
-<div class="panel panel-default">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-primary">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-light">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-success">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-secondary text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-info">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-dark text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-warning">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-primary text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-danger">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-success text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-info text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-warning text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-danger text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
@@ -86,8 +107,8 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Alignment classes
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-left">Left aligned text.</p>
     <p class="text-center">Center aligned text.</p>
     <p class="text-right">Right aligned text.</p>
@@ -98,8 +119,8 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Transformation classes
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-lowercase">Lowercased text.</p>
     <p class="text-uppercase">Uppercased text.</p>
     <p class="text-capitalize">Capitalized text.</p>
@@ -111,9 +132,12 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Contextual colors
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p class="text-secondary">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
+    <p class="text-dark">Ut vel lorem aliquet, rhoncus libero at, condimentum mi. Fusce pellentesque quam nec magna maximus porta.</p>
     <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
     <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@@ -124,12 +148,15 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Contextual backgrounds
 
-<div class="panel panel-default">
-  <div class="panel-body">
-    <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-    <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-    <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-    <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-    <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+<div class="card">
+  <div class="card-body">
+    <p class="bg-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p class="bg-secondary text-white">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
+    <p class="bg-dark text-white">Ut vel lorem aliquet, rhoncus libero at, condimentum mi.</p>
+    <p class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+    <p class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+    <p class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    <p class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</p>
+    <p class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>
   </div>
 </div>

resource/locales/en-US/sandbox.md

@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
 
 # 目次
 

resource/locales/ja/sandbox-bootstrap3.md

@@ -14,47 +14,68 @@
 <div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
 <div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
 
-# Panels
+# Cards
 
-<div class="panel panel-default">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-primary">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-light">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-success">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-secondary text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-info">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-dark text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-warning">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-primary text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
-<div class="panel panel-danger">
-  <div class="panel-heading">Panel heading without title</div>
-  <div class="panel-body">
-    Panel content
+<div class="card bg-success text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-info text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-warning text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
+  </div>
+</div>
+
+<div class="card bg-danger text-white">
+  <div class="card-header">Card header without title</div>
+  <div class="card-body">
+    Card body content
   </div>
 </div>
 
@@ -86,8 +107,8 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Alignment classes
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-left">Left aligned text.</p>
     <p class="text-center">Center aligned text.</p>
     <p class="text-right">Right aligned text.</p>
@@ -98,8 +119,8 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Transformation classes
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-lowercase">Lowercased text.</p>
     <p class="text-uppercase">Uppercased text.</p>
     <p class="text-capitalize">Capitalized text.</p>
@@ -111,9 +132,12 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Contextual colors
 
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
     <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p class="text-secondary">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
+    <p class="text-dark">Ut vel lorem aliquet, rhoncus libero at, condimentum mi. Fusce pellentesque quam nec magna maximus porta.</p>
     <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
     <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@@ -124,12 +148,15 @@ You can use the mark tag to <mark>highlight</mark> text.
 
 ## Contextual backgrounds
 
-<div class="panel panel-default">
-  <div class="panel-body">
-    <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
-    <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-    <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-    <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
-    <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+<div class="card">
+  <div class="card-body">
+    <p class="bg-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p class="bg-secondary text-white">Sed luctus venenatis tellus, in aliquam ligula scelerisque eget.</p>
+    <p class="bg-dark text-white">Ut vel lorem aliquet, rhoncus libero at, condimentum mi.</p>
+    <p class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+    <p class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+    <p class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    <p class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</p>
+    <p class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>
   </div>
-</div>
+</div>

resource/locales/ja/sandbox.md

@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-body">
 
 # 目次
 
@@ -37,7 +37,7 @@
 
 ## Block 段落
 
-空白行を挟むことで段落となります。aaaa
+空白行を挟むことで段落となります。
 
 ```
 段落1

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

@@ -112,8 +112,6 @@ class AppSetting extends React.Component {
             </div>
 
             <p className="form-text text-muted">
-              {t('admin:app_setting.enable_files_except_image')}
-              <br />
               {t('admin:app_setting.attach_enable')}
             </p>
           </div>

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

@@ -46,74 +46,76 @@ class PresentationForm extends React.Component {
           {t('admin:markdown_setting.presentation_options.page_break_setting')}
         </label>
 
-        <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('admin:markdown_setting.presentation_options.preset_one_separator_desc') }
-                  <input
-                    className="form-control"
-                    type="text"
-                    value={t('admin:markdown_setting.presentation_options.preset_one_separator_value')}
-                    readOnly
-                  />
-                </div>
-              </label>
+        <div className="form-group col-12 my-3">
+          <div className="row">
+            <div className="col-md-4 col-sm-12 align-self-start mb-4">
+              <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 w-100" 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') }
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={t('admin:markdown_setting.presentation_options.preset_one_separator_value')}
+                      readOnly
+                    />
+                  </div>
+                </label>
+              </div>
             </div>
-          </div>
 
-          <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') }
-                  <input
-                    className="form-control"
-                    type="text"
-                    value={t('admin:markdown_setting.presentation_options.preset_two_separator_value')}
-                    readOnly
-                  />
-                </div>
-              </label>
+            <div className="col-md-4 col-sm-12 align-self-start mb-4">
+              <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 w-100" 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') }
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={t('admin:markdown_setting.presentation_options.preset_two_separator_value')}
+                      readOnly
+                    />
+                  </div>
+                </label>
+              </div>
             </div>
-          </div>
-          <div className="col-4 align-self-start">
-            <div className="custom-control custom-radio">
-              <input
-                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 className="col-md-4 col-sm-12 align-self-start mb-4">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  id="pageBreakOption3"
+                  className="custom-control-input"
+                  checked={pageBreakSeparator === 3}
+                  onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
+                />
+                <label className="custom-control-label w-100" 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>
             </div>
           </div>
         </div>

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

@@ -42,82 +42,84 @@ class XssForm extends React.Component {
     const { xssOption } = adminMarkDownContainer.state;
 
     return (
-      <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="xssOption1"
-              name="XssOption"
-              checked={xssOption === 1}
-              onChange={() => { adminMarkDownContainer.setState({ xssOption: 1 }) }}
-            />
-            <label className="custom-control-label" htmlFor="xssOption1">
-              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.ignore_all_tags') }</p>
-              <div className="mt-4">
-                {t('admin:markdown_setting.xss_options.ignore_all_tags_desc') }
-              </div>
-            </label>
+      <div className="form-group col-12 my-3">
+        <div className="row">
+          <div className="col-md-4 col-sm-12 align-self-start mb-4">
+            <div className="custom-control custom-radio ">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="xssOption1"
+                name="XssOption"
+                checked={xssOption === 1}
+                onChange={() => { adminMarkDownContainer.setState({ xssOption: 1 }) }}
+              />
+              <label className="custom-control-label w-100" htmlFor="xssOption1">
+                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.ignore_all_tags')}</p>
+                <div className="mt-4">
+                  {t('admin:markdown_setting.xss_options.ignore_all_tags_desc')}
+                </div>
+              </label>
+            </div>
           </div>
-        </div>
 
-        <div className="col-4 align-self-start">
-          <div className="custom-control custom-radio">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="xssOption2"
-              name="XssOption"
-              checked={xssOption === 2}
-              onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
-            />
-            <label className="custom-control-label" htmlFor="xssOption2">
-              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
-              <div className="m-t-15">
-                <div className="d-flex justify-content-between">
-                  {t('admin:markdown_setting.xss_options.tag_names')}
+          <div className="col-md-4 col-sm-12 align-self-start mb-4">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="xssOption2"
+                name="XssOption"
+                checked={xssOption === 2}
+                onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
+              />
+              <label className="custom-control-label w-100" htmlFor="xssOption2">
+                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
+                <div className="m-t-15">
+                  <div className="d-flex justify-content-between">
+                    {t('admin:markdown_setting.xss_options.tag_names')}
+                  </div>
+                  <textarea
+                    className="form-control xss-list"
+                    name="recommendedTags"
+                    rows="6"
+                    cols="40"
+                    readOnly
+                    defaultValue={tags}
+                  />
                 </div>
-                <textarea
-                  className="form-control xss-list"
-                  name="recommendedTags"
-                  rows="6"
-                  cols="40"
-                  readOnly
-                  defaultValue={tags}
-                />
-              </div>
-              <div className="m-t-15">
-                <div className="d-flex justify-content-between">
-                  {t('admin:markdown_setting.xss_options.tag_attributes')}
+                <div className="m-t-15">
+                  <div className="d-flex justify-content-between">
+                    {t('admin:markdown_setting.xss_options.tag_attributes')}
+                  </div>
+                  <textarea
+                    className="form-control xss-list"
+                    name="recommendedAttrs"
+                    rows="6"
+                    cols="40"
+                    readOnly
+                    defaultValue={attrs}
+                  />
                 </div>
-                <textarea
-                  className="form-control xss-list"
-                  name="recommendedAttrs"
-                  rows="6"
-                  cols="40"
-                  readOnly
-                  defaultValue={attrs}
-                />
-              </div>
-            </label>
+              </label>
+            </div>
           </div>
-        </div>
 
-        <div className="col-4 align-self-start">
-          <div className="custom-control custom-radio">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="xssOption3"
-              name="XssOption"
-              checked={xssOption === 3}
-              onChange={() => { adminMarkDownContainer.setState({ xssOption: 3 }) }}
-            />
-            <label className="custom-control-label" htmlFor="xssOption3">
-              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.custom_whitelist') }</p>
-              <WhiteListInput customizable />
-            </label>
+          <div className="col-md-4 col-sm-12 align-self-start mb-4">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="xssOption3"
+                name="XssOption"
+                checked={xssOption === 3}
+                onChange={() => { adminMarkDownContainer.setState({ xssOption: 3 }) }}
+              />
+              <label className="custom-control-label w-100" htmlFor="xssOption3">
+                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.custom_whitelist')}</p>
+                <WhiteListInput customizable />
+              </label>
+            </div>
           </div>
         </div>
       </div>
@@ -142,8 +144,8 @@ class XssForm extends React.Component {
                   checked={isEnabledXss}
                   onChange={adminMarkDownContainer.switchEnableXss}
                 />
-                <label className="custom-control-label" htmlFor="XssEnable">
-                  {t('admin:markdown_setting.xss_options.enable_xss_prevention') }
+                <label className="custom-control-label w-100" htmlFor="XssEnable">
+                  {t('admin:markdown_setting.xss_options.enable_xss_prevention')}
                 </label>
               </div>
             </div>

src/client/js/components/Admin/Notification/GlobalNotification.jsx

@@ -40,7 +40,7 @@ class GlobalNotification extends React.Component {
     return (
       <React.Fragment>
 
-        <h2 className="border-bottom">{t('notification_setting.valid_page')}</h2>
+        <h2 className="border-bottom my-4">{t('notification_setting.valid_page')}</h2>
 
         <p className="card well">
           {/* eslint-disable-next-line react/no-danger */}

src/client/js/components/Admin/Notification/UserTriggerNotification.jsx

@@ -82,7 +82,7 @@ class UserTriggerNotification extends React.Component {
 
     return (
       <React.Fragment>
-        <h2 className="border-bottom my-5">{t('notification_setting.user_trigger_notification_header')}</h2>
+        <h2 className="border-bottom my-4">{t('notification_setting.user_trigger_notification_header')}</h2>
 
         <table className="table table-bordered">
           <thead>

src/client/js/components/Admin/Security/BasicSecuritySetting.jsx

@@ -68,7 +68,7 @@ class BasicSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="col-6 offset-3">
+          <div className="col-md-6 offset-md-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isBasicEnabled"
@@ -95,7 +95,7 @@ class BasicSecurityManagement extends React.Component {
         {isBasicEnabled && (
         <React.Fragment>
           <div className="row mb-5">
-            <div className="offset-3 col-6">
+            <div className="offset-md-3 col-md-6">
               <div className="custom-control custom-checkbox custom-checkbox-success">
                 <input
                   id="bindByEmail-basic"

src/client/js/components/Admin/Security/GitHubSecuritySetting.jsx

@@ -69,7 +69,7 @@ class GitHubSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="offset-3 col-6 text-left">
+          <div className="col-12 offset-md-3 col-md-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isGitHubEnabled"
@@ -88,8 +88,8 @@ class GitHubSecurityManagement extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+          <label className="col-12 col-md-3 text-left text-md-right py-2">{t('security_setting.callback_URL')}</label>
+          <div className="col-12 col-md-6">
             <input
               className="form-control"
               type="text"

src/client/js/components/Admin/Security/LdapSecuritySetting.jsx

@@ -73,7 +73,7 @@ class LdapSecuritySetting extends React.Component {
           LDAP
         </h2>
 
-        <div className="row mb-5">
+        <div className="form-group row">
           <div className="col-6 offset-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
@@ -98,11 +98,11 @@ class LdapSecuritySetting extends React.Component {
 
             <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
 
-            <div className="row mb-5">
-              <label htmlFor="serverUrl" className="col-3 control-label text-right py-2">
+            <div className="form-group row">
+              <label htmlFor="serverUrl" className="text-left text-md-right col-md-3 col-form-label">
                 Server URL
               </label>
-              <div className="col-6">
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -121,11 +121,11 @@ class LdapSecuritySetting extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="col-3 text-right py-2">
+            <div className="form-group row">
+              <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong>{t('security_setting.ldap.bind_mode')}</strong>
-              </div>
-              <div className="col-6">
+              </label>
+              <div className="col-md-6">
                 <div className="dropdown">
                   <button
                     className="btn btn-outline-secondary dropdown-toggle"
@@ -151,11 +151,11 @@ class LdapSecuritySetting extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="col-3 text-right py-2">
+            <div className="form-group row">
+              <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong>Bind DN</strong>
-              </div>
-              <div className="col-6">
+              </label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -186,11 +186,11 @@ class LdapSecuritySetting extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div htmlFor="bindDNPassword" className="col-3 text-right py-2">
+            <div className="form-group row">
+              <div htmlFor="bindDNPassword" className="text-left text-md-right col-md-3 col-form-label">
                 <strong>{t('security_setting.ldap.bind_DN_password')}</strong>
               </div>
-              <div className="col-6">
+              <div className="col-md-6">
                 {(adminLdapSecurityContainer.state.isUserBind) ? (
                   <p className="well card passport-ldap-userbind">
                     <small>
@@ -217,11 +217,11 @@ class LdapSecuritySetting extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="col-3 text-right py-2">
+            <div className="form-group row">
+              <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong>{t('security_setting.ldap.search_filter')}</strong>
-              </div>
-              <div className="col-6">
+              </label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -253,11 +253,11 @@ class LdapSecuritySetting extends React.Component {
               Attribute Mapping ({t('security_setting.optional')})
             </h3>
 
-            <div className="row mb-5">
-              <div className="col-3 text-right py-2">
+            <div className="form-group row">
+              <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="attrMapUsername">{t('username')}</strong>
-              </div>
-              <div className="col-6">
+              </label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -273,8 +273,8 @@ class LdapSecuritySetting extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="offset-3 col-6">
+            <div className="form-group row">
+              <div className="offset-md-3 col-md-6">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     type="checkbox"
@@ -297,11 +297,11 @@ class LdapSecuritySetting extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="col-3 text-right py-2">
+            <div className="form-group row">
+              <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="attrMapMail">{t('Email')}</strong>
-              </div>
-              <div className="col-6">
+              </label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -318,11 +318,11 @@ class LdapSecuritySetting extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="col-3 text-right py-2">
+            <div className="form-group row">
+              <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="attrMapName">{t('Name')}</strong>
-              </div>
-              <div className="col-6">
+              </label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -343,11 +343,11 @@ class LdapSecuritySetting extends React.Component {
               {t('security_setting.ldap.group_search_filter')} ({t('security_setting.optional')})
             </h3>
 
-            <div className="row mb-5">
-              <div className="col-3 text-right py-2">
+            <div className="form-group row">
+              <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="groupSearchBase">{t('security_setting.ldap.group_search_base_DN')}</strong>
-              </div>
-              <div className="col-6">
+              </label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -365,11 +365,11 @@ class LdapSecuritySetting extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="col-3 text-right py-2">
+            <div className="form-group row">
+              <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="groupSearchFilter">{t('security_setting.ldap.group_search_filter')}</strong>
-              </div>
-              <div className="col-6">
+              </label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -396,11 +396,11 @@ class LdapSecuritySetting extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="col-3 text-right py-2">
+            <div className="form-group row">
+              <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="groupDnProperty">{t('security_setting.ldap.group_search_user_DN_property')}</strong>
-              </div>
-              <div className="col-6">
+              </label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"

src/client/js/components/Admin/Security/OidcSecuritySetting.jsx

@@ -63,7 +63,7 @@ class OidcSecurityManagement extends React.Component {
           {t('security_setting.OAuth.OIDC.name')}
         </h2>
 
-        <div className="row mb-5">
+        <div className="row mb-5 form-group">
           <div className="offset-3 col-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
@@ -82,9 +82,9 @@ class OidcSecurityManagement extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+        <div className="row mb-5 form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('security_setting.callback_URL')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -109,9 +109,9 @@ class OidcSecurityManagement extends React.Component {
 
             <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
 
-            <div className="row mb-5">
-              <label htmlFor="oidcProviderName" className="col-3 text-right py-2">{t('security_setting.providerName')}</label>
-              <div className="col-6">
+            <div className="row mb-5 form-group">
+              <label htmlFor="oidcProviderName" className="text-left text-md-right col-md-3 col-form-label">{t('security_setting.providerName')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -122,9 +122,9 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <label htmlFor="oidcIssuerHost" className="col-3 text-right py-2">{t('security_setting.issuerHost')}</label>
-              <div className="col-6">
+            <div className="row mb-5 form-group">
+              <label htmlFor="oidcIssuerHost" className="text-left text-md-right col-md-3 col-form-label">{t('security_setting.issuerHost')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -138,9 +138,9 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <label htmlFor="oidcClientId" className="col-3 text-right py-2">{t('security_setting.clientID')}</label>
-              <div className="col-6">
+            <div className="row mb-5 form-group">
+              <label htmlFor="oidcClientId" className="text-left text-md-right col-md-3 col-form-label">{t('security_setting.clientID')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -154,9 +154,9 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <label htmlFor="oidcClientSecret" className="col-3 text-right py-2">{t('security_setting.client_secret')}</label>
-              <div className="col-6">
+            <div className="row mb-5 form-group">
+              <label htmlFor="oidcClientSecret" className="text-left text-md-right col-md-3 col-form-label">{t('security_setting.client_secret')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -174,9 +174,9 @@ class OidcSecurityManagement extends React.Component {
               Attribute Mapping ({t('security_setting.optional')})
             </h3>
 
-            <div className="row mb-5">
-              <label htmlFor="oidcAttrMapId" className="col-3 text-right py-2">Identifier</label>
-              <div className="col-6">
+            <div className="row mb-5 form-group">
+              <label htmlFor="oidcAttrMapId" className="text-left text-md-right col-md-3 col-form-label">Identifier</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -190,9 +190,9 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <label htmlFor="oidcAttrMapUserName" className="col-3 text-right py-2">{t('username')}</label>
-              <div className="col-6">
+            <div className="row mb-5 form-group">
+              <label htmlFor="oidcAttrMapUserName" className="text-left text-md-right col-md-3 col-form-label">{t('username')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -206,9 +206,9 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <label htmlFor="oidcAttrMapName" className="col-3 text-right py-2">{t('Name')}</label>
-              <div className="col-6">
+            <div className="row mb-5 form-group">
+              <label htmlFor="oidcAttrMapName" className="text-left text-md-right col-md-3 col-form-label">{t('Name')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -222,9 +222,9 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <label htmlFor="oidcAttrMapEmail" className="col-3 text-right py-2">{t('Email')}</label>
-              <div className="col-6">
+            <div className="row mb-5 form-group">
+              <label htmlFor="oidcAttrMapEmail" className="text-left text-md-right col-md-3 col-form-label">{t('Email')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -238,9 +238,9 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-              <div className="col-6">
+            <div className="row mb-5 form-group">
+              <label className="text-left text-md-right col-md-3 col-form-label">{t('security_setting.callback_URL')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -260,8 +260,8 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-3">
-              <div className="offset-3 col-6">
+            <div className="row mb-5 form-group">
+              <div className="offset-md-3 col-md-6">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserName-oidc"
@@ -282,8 +282,8 @@ class OidcSecurityManagement extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="offset-3 col-6">
+            <div className="row mb-5 form-group">
+              <div className="offset-md-3 col-md-6">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByEmail-oidc"

src/client/js/components/Admin/Security/SamlSecuritySetting.jsx

@@ -89,7 +89,7 @@ class SamlSecurityManagement extends React.Component {
           />
         )}
 
-        <div className="row mb-5">
+        <div className="row form-group mb-5">
           <div className="col-6 offset-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
@@ -109,9 +109,9 @@ class SamlSecurityManagement extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+        <div className="row form-group mb-5">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('security_setting.callback_URL')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -420,8 +420,8 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
               Attribute Mapping Options
             </h3>
 
-            <div className="row mb-5">
-              <div className="offset-3 col-6 text-left">
+            <div className="row form-group mb-5">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserName-SAML"
@@ -442,8 +442,8 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
               </div>
             </div>
 
-            <div className="row mb-5">
-              <div className="offset-3 col-6 text-left">
+            <div className="row form-group mb-5">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByEmail-SAML"

src/client/js/components/Admin/Security/TwitterSecuritySetting.jsx

@@ -69,7 +69,7 @@ class TwitterSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="offset-3 col-6">
+          <div className="offset-md-3 col-md-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isTwitterEnabled"
@@ -88,8 +88,8 @@ class TwitterSecurityManagement extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+          <label className="col-md-3 text-md-right py-2">{t('security_setting.callback_URL')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -116,8 +116,8 @@ class TwitterSecurityManagement extends React.Component {
             <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
 
             <div className="row mb-5">
-              <label htmlFor="TwitterConsumerId" className="col-3 text-right py-2">{t('security_setting.clientID')}</label>
-              <div className="col-6">
+              <label htmlFor="TwitterConsumerId" className="col-md-3 text-md-right py-2">{t('security_setting.clientID')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -132,8 +132,8 @@ class TwitterSecurityManagement extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="TwitterConsumerSecret" className="col-3 text-right py-2">{t('security_setting.client_secret')}</label>
-              <div className="col-6">
+              <label htmlFor="TwitterConsumerSecret" className="col-md-3 text-md-right py-2">{t('security_setting.client_secret')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -148,7 +148,7 @@ class TwitterSecurityManagement extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <div className="offset-3 col-6">
+              <div className="offset-md-3 col-md-6">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserNameTwitter"
@@ -170,7 +170,7 @@ class TwitterSecurityManagement extends React.Component {
             </div>
 
             <div className="row my-3">
-              <div className="offset-3 col-5">
+              <div className="offset-4 col-5">
                 <button
                   type="button"
                   className="btn btn-primary"

src/client/js/components/Admin/UserGroupDetail/UserGroupPageList.jsx

@@ -56,7 +56,7 @@ class UserGroupPageList extends React.Component {
     return (
       <Fragment>
         <ul className="page-list-ul page-list-ul-flat mb-3">
-          {this.state.currentPages.map((page) => { return <Page key={page._id} page={page} /> })}
+          {this.state.currentPages.map(page => <li key={page._id}><Page page={page} /></li>)}
         </ul>
         {adminUserGroupDetailContainer.state.relatedPages.length === 0 ? <p>{t('admin:user_group_management.no_pages')}</p> : null}
         <PaginationWrapper

src/client/js/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -98,7 +98,7 @@ class UserGroupUserFormByInput extends React.Component {
     const user = option;
     return (
       <React.Fragment>
-        <UserPicture user={user} size="sm" withoutLink />
+        <UserPicture user={user} size="sm" noLink noTooltip />
         <strong className="ml-2">{user.username}</strong>
         {adminUserGroupDetailContainer.state.isAlsoNameSearched && <span className="ml-2">{user.name}</span>}
         {adminUserGroupDetailContainer.state.isAlsoMailSearched && <span className="ml-2">{user.email}</span>}

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

@@ -91,6 +91,25 @@ class UserManagement extends React.Component {
     this.props.adminUsersContainer.handleChangeSearchText(event.target.value);
   }
 
+  renderCheckbox(status, statusLabel, statusColor) {
+    return (
+      <div className={`custom-control custom-checkbox custom-checkbox-${statusColor} mr-2`}>
+        <input
+          className="custom-control-input"
+          type="checkbox"
+          id={`c_${status}`}
+          checked={this.props.adminUsersContainer.isSelected(status)}
+          onClick={() => { this.handleClick(status) }}
+        />
+        <label className="custom-control-label" htmlFor={`c_${status}`}>
+          <span className={`badge badge-pill badge-${statusColor} d-inline-block vt mt-1`}>
+            {statusLabel}
+          </span>
+        </label>
+      </div>
+    );
+  }
+
   render() {
     const { t, adminUsersContainer } = this.props;
 
@@ -138,11 +157,10 @@ class UserManagement extends React.Component {
         </p>
 
         <h2>{t('User_Management')}</h2>
-
         <div className="border-top border-bottom">
 
           <div className="d-flex justify-content-start align-items-center my-2">
-            <div>
+            <div className="d-flex align-items-baseline">
               <i className="icon-magnifier mr-1"></i>
               <span className="search-typeahead">
                 <input
@@ -154,70 +172,19 @@ class UserManagement extends React.Component {
               </span>
             </div>
 
-            <div className="mx-5 form-inline">
-              <div className="custom-control custom-checkbox custom-checkbox-primary mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c1"
-                  checked={adminUsersContainer.isSelected('all')}
-                  onClick={() => { this.handleClick('all') }}
-                />
-                <label className="custom-control-label" htmlFor="c1">
-                  <span className="badge badge-pill badge-primary d-inline-block vt mt-1">All</span>
-                </label>
-              </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-info mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c2"
-                  checked={adminUsersContainer.isSelected('registered')}
-                  onClick={() => { this.handleClick('registered') }}
-                />
-                <label className="custom-control-label" htmlFor="c2">
-                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Approval Pending</span>
-                </label>
-              </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-success mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c3"
-                  checked={adminUsersContainer.isSelected('active')}
-                  onClick={() => { this.handleClick('active') }}
-                />
-                <label className="custom-control-label" htmlFor="c3">
-                  <span className="badge badge-pill badge-success d-inline-block vt mt-1">Active</span>
-                </label>
-              </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-warning mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c4"
-                  checked={adminUsersContainer.isSelected('suspended')}
-                  onClick={() => { this.handleClick('suspended') }}
-                />
-                <label className="custom-control-label" htmlFor="c4">
-                  <span className="badge badge-pill badge-warning d-inline-block vt mt-1">Suspended</span>
-                </label>
+            <div className="mx-5">
+              <div className="form-inline">
+                {this.renderCheckbox('all', 'All', 'primary')}
+                {this.renderCheckbox('registered', 'Approval Pending', 'info')}
+                {this.renderCheckbox('active', 'Active', 'success')}
+                {this.renderCheckbox('suspended', 'Suspended', 'warning')}
+                {this.renderCheckbox('invited', 'Invited', 'info')}
               </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-info">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c5"
-                  checked={adminUsersContainer.isSelected('invited')}
-                  onClick={() => { this.handleClick('invited') }}
-                />
-                <label className="custom-control-label" htmlFor="c5">
-                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Invited</span>
-                </label>
+              <div>
+                {
+                  this.state.isNotifyCommentShow
+                  && <span className="text-warning">{t('admin:user_management.click_twice_same_checkbox')}</span>
+                }
               </div>
             </div>
 
@@ -234,11 +201,6 @@ class UserManagement extends React.Component {
                 Reset
               </button>
             </div>
-
-            <div className="ml-4">
-              {this.state.isNotifyCommentShow && <span className="text-warning">{t('admin:user_management.click_twice_same_checkbox')}</span>}
-            </div>
-
           </div>
         </div>
 

src/client/js/components/BookmarkButton.jsx

@@ -64,7 +64,9 @@ class BookmarkButton extends React.Component {
         href="#"
         title="Bookmark"
         onClick={this.handleClick}
-        className={`btn rounded-circle btn-outline-warning btn-bookmark border-0 ${`btn-${this.props.size}`} ${this.state.isBookmarked && 'active'}`}
+        className={`btn rounded-circle btn-bookmark border-0 d-edit-none
+          ${`btn-${this.props.size}`}
+          ${this.state.isBookmarked ? 'btn-warning active' : 'btn-outline-warning'}`}
       >
         <i className="icon-star"></i>
       </button>

src/client/js/components/LikeButton.jsx

@@ -43,7 +43,8 @@ class LikeButton extends React.Component {
       <button
         type="button"
         onClick={this.handleClick}
-        className={`btn rounded-circle btn-outline-info btn-like border-0 ${this.state.isLiked ? 'active' : ''}`}
+        className={`btn rounded-circle btn-like border-0 d-edit-none
+        ${this.state.isLiked ? 'btn-info active' : 'btn-outline-info'}`}
       >
         <i className="icon-like"></i>
       </button>

src/client/js/components/Me/ApiSettings.jsx

@@ -65,7 +65,7 @@ class ApiSettings extends React.Component {
 
 
         <div className="row">
-          <div className="offset-lg-1 col-lg-7">
+          <div className="offset-lg-2 col-lg-7">
 
             <p className="alert alert-warning">
               { t('page_me_apitoken.notice.update_token1') }<br />

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -78,7 +78,7 @@ const GrowiSubNavigation = (props) => {
         </div>
 
         {/* Page Authors */}
-        <ul className="authors text-nowrap d-none d-lg-block">
+        <ul className="authors text-nowrap d-none d-lg-block d-edit-none">
           { creator != null && (
             <li>
               <PageCreator creator={creator} createdAt={createdAt} isCompactMode={isSubnavCompact} />

src/client/js/components/Navbar/GrowiSubNavigationForUserPage.jsx

@@ -38,7 +38,7 @@ const GrowiSubNavigationForUserPage = (props) => {
 
       <div className="d-flex align-items-center justify-content-between">
 
-        <div className="users-info d-flex align-items-center">
+        <div className="users-info d-flex align-items-center d-edit-none">
           <UserPicture user={pageUser} />
 
           <div className="users-meta">

src/client/js/components/Navbar/PageCreator.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { userPageRoot } from '@commons/util/path-utils';
+
 import UserPicture from '../User/UserPicture';
-import { userPageRoot } from '../../../../lib/util/path-utils';
 
 const PageCreator = (props) => {
   const { creator, createdAt, isCompactMode } = props;
@@ -13,7 +14,7 @@ const PageCreator = (props) => {
 
   return (
     <div className="d-flex align-items-center">
-      <div className="mr-2" href={userPageRoot(creator)} data-toggle="tooltip" data-placement="bottom" title={creator.name}>
+      <div className="mr-2">
         <UserPicture user={creator} size={pictureSize} />
       </div>
       {creatInfo}

src/client/js/components/Navbar/PersonalDropdown.jsx

@@ -59,7 +59,7 @@ const PersonalDropdown = (props) => {
       {/* remove .dropdown-toggle for hide caret */}
       {/* See https://stackoverflow.com/a/44577512/13183572 */}
       <a className="nav-link waves-effect waves-light" data-toggle="dropdown">
-        <UserPicture user={user} withoutLink /><span className="d-none d-sm-inline-block">&nbsp;{user.name}</span>
+        <UserPicture user={user} noLink noTooltip /><span className="d-none d-sm-inline-block">&nbsp;{user.name}</span>
       </a>
 
       {/* Menu */}

src/client/js/components/Navbar/RevisionAuthor.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { userPageRoot } from '@commons/util/path-utils';
+
 import UserPicture from '../User/UserPicture';
-import { userPageRoot } from '../../../../lib/util/path-utils';
 
 const RevisionAuthor = (props) => {
   const { revisionAuthor, updatedAt, isCompactMode } = props;
@@ -13,7 +14,7 @@ const RevisionAuthor = (props) => {
 
   return (
     <div className="d-flex align-items-center">
-      <div className="mr-2" href={userPageRoot(revisionAuthor)} data-toggle="tooltip" data-placement="bottom" title={revisionAuthor.name}>
+      <div className="mr-2">
         <UserPicture user={revisionAuthor} size={pictureSize} />
       </div>
       {updateInfo}

src/client/js/components/Page/RevisionPath.jsx

@@ -153,7 +153,7 @@ class RevisionPath extends React.Component {
         <CopyDropdown t={this.props.t} pagePath={this.props.pagePath} pageId={this.props.pageId} buttonStyle={buttonStyle}></CopyDropdown>
 
         { !isPageInTrash && !isPageForbidden && (
-          <a href="#edit" className="d-block text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
+          <a href="#edit" className="d-block d-edit-none text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
             <i className="icon-note" />
           </a>
         ) }

src/client/js/components/PageList/ListView.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Page from './Page';
-
-export default class ListView extends React.Component {
-
-  render() {
-    const listView = this.props.pages.map((page) => {
-      return <Page page={page} key={`page-list:list-view:${page._id}`} />;
-    });
-
-    return (
-      <div className="page-list">
-        <ul className="page-list-ul page-list-ul-flat">
-          {listView}
-        </ul>
-      </div>
-    );
-  }
-
-}
-
-ListView.propTypes = {
-  pages: PropTypes.array.isRequired,
-};
-
-ListView.defaultProps = {
-};

src/client/js/components/PageList/Page.jsx

@@ -8,27 +8,21 @@ import PagePath from './PagePath';
 export default class Page extends React.Component {
 
   render() {
-    const page = this.props.page;
-    let link = this.props.linkTo;
-    if (link === '') {
-      link = page.path;
-    }
+    const {
+      page, noLink, excludePathString,
+    } = this.props;
 
-    const hasChildren = this.props.children != null;
+    let pagePath = <PagePath page={page} excludePathString={excludePathString} />;
+    if (!noLink != null) {
+      pagePath = <a className="text-break" href={page.pagePath}>{pagePath}</a>;
+    }
 
     return (
-      <li className="nav-item page-list-li w-100">
-        <a className="nav-link page-list-link d-flex align-items-center" href={link}>
-          <UserPicture user={page.lastUpdateUser} />
-          <PagePath page={page} excludePathString={this.props.excludePathString} />
-          <PageListMeta page={page} />
-          { hasChildren && (
-            <React.Fragment>
-              {this.props.children}
-            </React.Fragment>
-          )}
-        </a>
-      </li>
+      <>
+        <UserPicture user={page.lastUpdateUser} noLink={noLink} />
+        {pagePath}
+        <PageListMeta page={page} />
+      </>
     );
   }
 
@@ -36,12 +30,11 @@ export default class Page extends React.Component {
 
 Page.propTypes = {
   page: PropTypes.object.isRequired,
-  linkTo: PropTypes.string,
   excludePathString: PropTypes.string,
-  children: PropTypes.array,
+  noLink: PropTypes.bool,
 };
 
 Page.defaultProps = {
-  linkTo: '',
   excludePathString: '',
+  noLink: false,
 };

src/client/js/components/RecentCreated/RecentCreated.jsx

@@ -65,10 +65,11 @@ class RecentCreated extends React.Component {
    *
    */
   generatePageList(pages) {
-    return pages.map((page) => {
-      return <Page page={page} key={`recent-created:list-view:${page._id}`} />;
-    });
-
+    return pages.map(page => (
+      <li key={`recent-created:list-view:${page._id}`}>
+        <Page page={page} />
+      </li>
+    ));
   }
 
   render() {

src/client/js/components/SearchPage/SearchResult.jsx

@@ -170,6 +170,40 @@ class SearchResult extends React.Component {
     });
   }
 
+  renderListView(pages) {
+    return pages.map((page) => {
+      // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
+      const pageId = `#id_${page._id}`;
+      return (
+        <li key={page._id} className="nav-item page-list-li w-100">
+          <a className="nav-link page-list-link d-flex align-items-center" href={pageId}>
+            <Page page={page} noLink />
+            <div className="ml-auto d-flex">
+              { this.state.deletionMode
+                && (
+                  <div className="custom-control custom-checkbox custom-checkbox-danger">
+                    <input
+                      type="checkbox"
+                      id={`page-delete-check-${page._id}`}
+                      className="custom-control-input search-result-list-delete-checkbox"
+                      value={pageId}
+                      checked={this.state.selectedPages.has(page)}
+                      onChange={() => { return this.toggleCheckbox(page) }}
+                    />
+                    <label className="custom-control-label" htmlFor={`page-delete-check-${page._id}`}></label>
+                  </div>
+                )
+              }
+              <div className="page-list-option">
+                <a href={page.path}><i className="icon-login" /></a>
+              </div>
+            </div>
+          </a>
+        </li>
+      );
+    });
+  }
+
   render() {
     if (this.isError()) {
       return (
@@ -238,38 +272,7 @@ class SearchResult extends React.Component {
       );
     }
 
-    const listView = this.props.pages.map((page) => {
-      // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
-      const pageId = `#id_${page._id}`;
-      return (
-        <Page
-          page={page}
-          linkTo={pageId}
-          key={page._id}
-        >
-          <div className="ml-auto d-flex">
-            { this.state.deletionMode
-              && (
-                <div className="custom-control custom-checkbox custom-checkbox-danger">
-                  <input
-                    type="checkbox"
-                    id={`page-delete-check-${page._id}`}
-                    className="custom-control-input search-result-list-delete-checkbox"
-                    value={pageId}
-                    checked={this.state.selectedPages.has(page)}
-                    onChange={() => { return this.toggleCheckbox(page) }}
-                  />
-                  <label className="custom-control-label" htmlFor={`page-delete-check-${page._id}`}></label>
-                </div>
-              )
-            }
-            <div className="page-list-option">
-              <a href={page.path}><i className="icon-login" /></a>
-            </div>
-          </div>
-        </Page>
-      );
-    });
+    const listView = this.renderListView(this.props.pages);
 
     /*
     UI あとで考える

src/client/js/components/SearchTypeahead.jsx

@@ -163,7 +163,7 @@ class SearchTypeahead extends React.Component {
     const page = option;
     return (
       <span>
-        <UserPicture user={page.lastUpdateUser} size="sm" withoutLink />
+        <UserPicture user={page.lastUpdateUser} size="sm" noLink />
         <PagePath page={page} />
         <PageListMeta page={page} />
       </span>

src/client/js/components/User/UserPicture.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import md5 from 'md5';
 import PropTypes from 'prop-types';
 
+import { userPageRoot } from '@commons/util/path-utils';
+
 const DEFAULT_IMAGE = '/images/icons/user.svg';
 
 // TODO UserComponent?
@@ -49,6 +51,26 @@ export default class UserPicture extends React.Component {
     );
   }
 
+  RootElmWithoutLink = (props) => {
+    return <span {...props}>{props.children}</span>;
+  }
+
+  RootElmWithLink = (props) => {
+    const { user } = this.props;
+    const href = userPageRoot(user);
+
+    return <a href={href} {...props}>{props.children}</a>;
+  }
+
+  withTooltip = (RootElm) => {
+    const { user } = this.props;
+    const title = `@${user.username}<br />${user.name}`;
+
+    return props => (
+      <RootElm data-toggle="tooltip" data-placement="bottom" data-html="true" title={title}>{props.children}</RootElm>
+    );
+  }
+
   render() {
     const user = this.props.user;
 
@@ -56,18 +78,22 @@ export default class UserPicture extends React.Component {
       return this.renderForNull();
     }
 
-    const imgElem = (
-      <img
-        src={this.getUserPicture(user)}
-        alt={user.username}
-        className={this.getClassName()}
-      />
-    );
+    const { noLink, noTooltip } = this.props;
+
+    // determine RootElm
+    let RootElm = noLink ? this.RootElmWithoutLink : this.RootElmWithLink;
+    if (!noTooltip) {
+      RootElm = this.withTooltip(RootElm);
+    }
 
     return (
-      (this.props.withoutLink)
-        ? <span>{imgElem}</span>
-        : <a href={`/user/${user.username}`}>{imgElem}</a>
+      <RootElm>
+        <img
+          src={this.getUserPicture(user)}
+          alt={user.username}
+          className={this.getClassName()}
+        />
+      </RootElm>
     );
   }
 
@@ -76,9 +102,12 @@ export default class UserPicture extends React.Component {
 UserPicture.propTypes = {
   user: PropTypes.object,
   size: PropTypes.string,
-  withoutLink: PropTypes.bool,
+  noLink: PropTypes.bool,
+  noTooltip: PropTypes.bool,
 };
 
 UserPicture.defaultProps = {
   size: null,
+  noLink: false,
+  noTooltip: false,
 };

src/client/js/components/User/UserPictureList.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
+
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
@@ -24,30 +24,12 @@ class UserPictureList extends React.Component {
 
   }
 
-  renderPictAndTooltip(user) {
-    const userId = user._id;
-    const userPictureContainerId = `userPictureContainer-${userId}`;
-
-    return (
-      <span key={userId}>
-        <span id={userPictureContainerId}>
-          <UserPicture user={user} size="xs" />
-        </span>
-        <UncontrolledTooltip
-          key={`tooltip-${userId}`}
-          placement="bottom"
-          target={userPictureContainerId}
-        >
-          @{user.username}<br />{user.name}
-        </UncontrolledTooltip>
-      </span>
-    );
-  }
-
   render() {
-    return this.state.users.map((user) => {
-      return this.renderPictAndTooltip(user);
-    });
+    return this.state.users.map(user => (
+      <span key={user._id}>
+        <UserPicture user={user} size="xs" />
+      </span>
+    ));
   }
 
 }

src/client/styles/scss/_layout_kibela.scss

@@ -121,13 +121,8 @@ body.kibela {
 
     @include expand-editor($header-plus-footer);
 
-    .main {
-      > .row.page-content {
-        > .col-xs-12 {
-          width: 100%;
-          padding: 0;
-        }
-      }
+    .kibela-block {
+      max-width: unset;
     }
 
     .tab-content {

src/client/styles/scss/_on-edit.scss

@@ -26,21 +26,8 @@ body.on-edit {
 
   // hide unnecessary elements
   header,
-  .grw-subnav,
-  .row.row-alerts,
-  .row.page-list,
-  .row.page-comments-row,
-  .row.page-attachments-row,
-  .row.not-found-message-row,
-  .users-info,
-  .user-page-content-container,
-  .portal-form-button,
-  .btn-like,
-  .btn-bookmark,
-  .btn-edit,
-  .authors,
-  .hide-on-edit,
-  footer {
+  footer,
+  .d-edit-none {
     display: none !important;
   }
 
@@ -60,6 +47,16 @@ body.on-edit {
     display: none;
   }
 
+  &.hackmd .grw-nav-item-edit {
+    display: none;
+  }
+
+  &.hackmd {
+    #page-editor-options-selector {
+      display: none !important;
+    }
+  }
+
   &:not(.hackmd) .nav-tab-hackmd {
     display: none;
   }

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -64,6 +64,17 @@ textarea.form-control {
 /*
  * Table
  */
+.table {
+  @extend .table-dark;
+}
+
+/*
+ * Card
+ */
+.card:not([class*='bg-']) {
+  @extend .bg-dark;
+}
+
 .table > thead > tr > th,
 .table > tbody > tr > th,
 .table > tfoot > tr > th,

src/client/styles/scss/theme/_apply-colors.scss

@@ -11,6 +11,7 @@ $link-hover-color: $color-link-hover;
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
+@import 'mixins-for-tables';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-toastr-colors';
@@ -117,6 +118,13 @@ $link-hover-color: $color-link-hover;
   }
 }
 
+/*
+ * Icon
+ */
+.editor-container .navbar-editor svg {
+  fill: $color-editor-icons;
+}
+
 /*
  * code color of inline-code
  */
@@ -151,10 +159,6 @@ $link-hover-color: $color-link-hover;
 /*
  * cards
  */
-.card-header {
-  border: 0;
-}
-
 .card.well {
   background-color: $bgcolor-card;
   border-color: $light;

src/client/styles/scss/theme/_mixins-for-tables.scss

@@ -0,0 +1,34 @@
+//== Table
+$table-variants: (
+  'light': $light,
+  'dark': $dark,
+);
+
+// remove when master version is released
+// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $table-hover-bg-factor: 0.075 !default;
+    $table-striped-bg-factor: 0.05 !default;
+    $body-bg: $white !default;
+    $table-active-bg-factor: 0.1 !default;
+    $table-border-factor: 0.1 !default;
+
+    $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
+    $color: gray;
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+
+    --bs-table-bg: #{$background};
+    --bs-table-striped-bg: #{$striped-bg};
+    --bs-table-striped-color: #{color-contrast($striped-bg)};
+    --bs-table-active-bg: #{$active-bg};
+    --bs-table-active-color: #{color-contrast($active-bg)};
+    --bs-table-hover-bg: #{$hover-bg};
+    --bs-table-hover-color: #{color-contrast($hover-bg)};
+
+    color: $color;
+    border-color: mix($color, $background, percentage($table-border-factor));
+  }
+}

src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -63,3 +63,7 @@
     background: $color;
   }
 }
+
+@each $color, $value in $table-variants {
+  @include table-variant($color, $value);
+}

src/client/styles/scss/theme/antarctic.scss

@@ -74,6 +74,9 @@ html[light] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -127,6 +130,9 @@ html[dark] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
+  // Icon colors
+  $color-editor-icons: darken($accentcolor, 15%);
+
   // Border colors
   $border-color-theme: black; // former: `$navbar-border: #ccc;`
 

src/client/styles/scss/theme/default.scss

@@ -1,6 +1,5 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
-
 // == Define Bootstrap theme colors
 //
 
@@ -46,6 +45,9 @@ html[light] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -99,6 +101,9 @@ html[dark] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: black; // former: `$navbar-border: #ccc;`
 

src/client/styles/scss/theme/kibela.scss

@@ -12,9 +12,8 @@ html[light] {
   $bgcolor-navbar: white;
   $bgcolor-navbar-active: $bgcolor-theme;
   $bgcolor-global: $themelight;
-  $bgcolor-card: $lightthemecolor;
   $bgcolor-inline-code: lighten($subthemecolor, 70%);
-
+  $bgcolor-card: $lightthemecolor;
   $color-header: $bgcolor-theme;
   $color-global: #3c4a60;
   $color-link: rgb(74, 109, 204);
@@ -36,6 +35,9 @@ html[light] {
   $bgcolor-logo: transparent;
   $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   $color-link-wiki: lighten($bgcolor-theme, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-global;
@@ -68,9 +70,8 @@ html[dark] {
   $bgcolor-navbar: transparent;
   $bgcolor-navbar-active: $bgcolor-theme;
   $bgcolor-global: $themelight;
-  $bgcolor-card: #e3e5e7;
   $bgcolor-inline-code: lighten($subthemecolor, 70%);
-
+  $bgcolor-card: #e3e5e7;
   $color-header: $bgcolor-theme;
   $color-global: #3c4a60;
   $color-link: rgb(74, 109, 204);
@@ -92,6 +93,9 @@ html[dark] {
   $bgcolor-logo: red;
   $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   $color-link-wiki: lighten($bgcolor-theme, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-global;

src/server/views/_form.html

@@ -12,7 +12,7 @@
 <div class="page-editor-footer d-flex flex-row align-items-center justify-content-between">
 
   <div>
-    <div id="page-editor-options-selector" class="d-none d-sm-block"></div>
+    <div id="page-editor-options-selector" class="d-none d-md-block"></div>
   </div>
 
   <div id="save-page-controls"

src/server/views/layout-crowi/base/layout.html

@@ -30,7 +30,7 @@
     {% include '../../widget/system-version.html' %}
   </aside>
 
-  <div class="row grw-subnav">
+  <div class="row grw-subnav d-edit-none">
     <div class="col-md-9">
       {% block content_header %}
       {% endblock %}

src/server/views/layout-crowi/page_list.html

@@ -46,7 +46,7 @@
     {% include '../widget/page_content.html' %}
   </div>
 
-  <div class="row page-list d-print-none {% if page.isPortal() %}mt-5{% endif %}">
+  <div class="row page-list d-edit-none d-print-none {% if page.isPortal() %}mt-5{% endif %}">
     <div class="col-md-12">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

src/server/views/layout-crowi/user_page.html

@@ -13,7 +13,7 @@
 
 
 {% block content_main_before %}
-  <div class="m-b-30 user-page-content-container hidden-print">
+  <div class="m-b-30 user-page-content-container d-edit-none hidden-print">
     {% include '../widget/user_page_content.html' %}
   </div>
 {% endblock %}

src/server/views/layout-growi/page.html

@@ -35,7 +35,7 @@
   </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list d-print-none mt-5">
+  <div class="row page-list d-edit-none d-print-none mt-5">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

src/server/views/layout-growi/page_list.html

@@ -34,7 +34,7 @@
 
   </div>
 
-  <div class="row page-list d-print-none {% if page.isPortal() %}mt-5{% endif %}">
+  <div class="row page-list d-edit-none d-print-none {% if page.isPortal() %}mt-5{% endif %}">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

src/server/views/layout-growi/user_page.html

@@ -27,7 +27,7 @@
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
         #}
-      <div class="m-b-30 user-page-content-container hidden-print">
+      <div class="m-b-30 user-page-content-container d-edit-none hidden-print">
         {% include '../widget/user_page_content.html' %}
       </div>
 
@@ -61,7 +61,7 @@
   </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list d-print-none mt-5">
+  <div class="row page-list d-edit-none d-print-none mt-5">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

src/server/views/layout-growi/widget/comments.html

@@ -1,4 +1,4 @@
-<div class="page-comments-row row hidden-print">
+<div class="page-comments-row row d-edit-none d-print-none">
 
   <div class="page-comments col-xl-7 col-lg-9">
 

src/server/views/layout-growi/widget/header.html

@@ -1,4 +1,4 @@
-<div id="grw-subnav" class="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
+<div id="grw-subnav" class="grw-subnav d-edit-none" data-is-forbidden-page="{{ forbidden }}"></div>
 
 {% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
   {% if '/' === path.slice(-1) %}

src/server/views/layout-kibela/base/layout.html

@@ -12,7 +12,7 @@
   <div class="row body m-0 p-0">
 
     <div id="main" class="main col-12 kibela-block bg-white round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
-      <div class="row grw-subnav">
+      <div class="row grw-subnav d-edit-none">
         <div class="col-12">
           {% block content_header %} {% endblock %}
         </div>

src/server/views/layout-kibela/page.html

@@ -24,7 +24,7 @@
   </div>
 
   {# relocate #revision-toc #}
-  <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
+  <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container bg-white">
     <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="80">
       <div id="revision-toc-content" class="revision-toc-content"></div>
     </div>
@@ -33,7 +33,7 @@
 </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list grw-pt-10px my-5 round-corner">
+  <div class="row page-list grw-pt-10px my-5 round-corner d-edit-none">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

src/server/views/layout-kibela/page_list.html

@@ -24,7 +24,7 @@
   </script>
 
   {# relocate #revision-toc #}
-  <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
+  <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container bg-white">
     <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="80">
       <div id="revision-toc-content" class="revision-toc-content"></div>
     </div>
@@ -32,7 +32,7 @@
 
 </div>
 
-  <div class="row page-list bg-white round-corner grw-pt-10px mb-5 {% if page.isPortal() %}mt-5{% endif %}">
+  <div class="row page-list bg-white round-corner grw-pt-10px mb-5 d-edit-none {% if page.isPortal() %}mt-5{% endif %}">
     <div class="col">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>

src/server/views/layout-kibela/user_page.html

@@ -25,7 +25,7 @@
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
         #}
-      <div class="m-b-30 user-page-content-container">
+      <div class="m-b-30 user-page-content-container d-edit-none">
         {% include '../widget/user_page_content.html' %}
       </div>
 
@@ -43,7 +43,7 @@
     </div>
 
     {# relocate #revision-toc #}
-    <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
+    <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container bg-white">
       <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="75">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
@@ -52,7 +52,7 @@
   </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list mt-5">
+  <div class="row page-list mt-5 d-edit-none">
     <div class="col-xs-12">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>

src/server/views/layout-kibela/widget/comments.html

@@ -1,6 +1,6 @@
-<div class="page-comments-row row">
+<div class="page-comments-row row d-edit-none">
 
-    <div class="page-comments">
+    <div class="page-comments col-12">
 
       <h4 class="my-2"><i class="icon-fw icon-bubbles"></i> Comments</h4>
 

src/server/views/layout/layout.html

@@ -131,7 +131,6 @@
   {% include '../modal/create_page.html' %}
   {% endblock  %} {# layout_head_nav #}
 
-  {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
   {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}
 
   <div class="d-flex">
@@ -139,6 +138,7 @@
     <div id="grw-sidebar-wrapper"></div>
 
     <div id="page-wrapper" class="flex-grow-1">
+      {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
       {% block layout_main %}
       {% endblock %} {# layout_main #}
     </div>
@@ -146,7 +146,7 @@
 
 </div><!-- /#wrapper -->
 
-<div class="grw-fixed-controls-container d-md-none animated fadeInUp faster">
+<div class="grw-fixed-controls-container d-md-none d-edit-none animated fadeInUp faster">
   <div class="grw-fixed-controls-button-container rounded-circle">
     <button class="btn btn-lg btn-primary rounded-circle waves-effect waves-light" type="button" data-target="#create-page" data-toggle="modal">
       <i class="icon-pencil"></i>

src/server/views/modal/create_template.html

@@ -19,7 +19,7 @@
                   <p class="text-center"><code>_template</code></p>
                   <p class="form-text text-muted text-center"><small>{{ t('template.children.desc') }}</small></p>
                 </div>
-                <div class="card-footer text-center bg-white">
+                <div class="card-footer text-center">
                   <a href="{{templateParentPath}}_template#edit"
                       class="btn btn-sm btn-primary" id="template-button-children">
                       {{ t("Edit") }}
@@ -34,7 +34,7 @@
                   <p class="text-center"><code>__template</code></p>
                   <p class="form-text text-muted text-center"><small>{{ t('template.decendants.desc') }}</small></p>
                 </div>
-                <div class="card-footer text-center bg-white">
+                <div class="card-footer text-center">
                   <a href="{{templateParentPath}}__template#edit"
                       class="btn btn-sm btn-primary" id="template-button-decendants">
                       {{ t("Edit") }}

src/server/views/widget/create_portal.html

@@ -1,4 +1,4 @@
-<div class="portal-form-button">
+<div class="portal-form-button d-edit-none">
   <a class="btn btn-primary" id="create-portal-button" href="#edit" data-toggle="tab" {% if not user %}disabled{% endif %}>Create Portal</a>
   <p class="form-text text-muted"><a href="#" data-target="#help-portal" data-toggle="modal"><i class="icon-question"></i> What is Portal?</a></p>
 </div>

src/server/views/widget/forbidden_content.html

@@ -12,7 +12,7 @@
   data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
   >
 
-  <div class="row row-alerts">
+  <div class="row row-alerts d-edit-none">
     <div class="col-sm-12">
         <p class="alert alert-primary py-3 px-4">
           <i class="icon-fw icon-lock" aria-hidden="true"></i> Browsing of this page is restricted

src/server/views/widget/not_found_content.html

@@ -1,4 +1,4 @@
-<div class="row not-found-message-row mb-4">
+<div class="row not-found-message-row mb-4 d-edit-none">
   <div class="col-md-12">
     <h2 class="text-muted">
       <i class="icon-info" aria-hidden="true"></i>

src/server/views/widget/page_alerts.html

@@ -1,4 +1,4 @@
-<div class="row row-alerts">
+<div class="row row-alerts d-edit-none">
   <div class="col-sm-12">
     {% if page && page.grant && page.grant > 1 %}
 
@@ -29,7 +29,7 @@
     {% endif %}
 
     {% if redirectFrom or req.query.renamed or req.query.redirectFrom %}
-    <div class="alert alert-info hide-on-edit py-3 px-4 d-flex align-items-center justify-content-between">
+    <div class="alert alert-info d-edit-none py-3 px-4 d-flex align-items-center justify-content-between">
       <span>
         {% set fromPath = req.query.renamed or req.query.redirectFrom %}
         {% if redirectFrom or req.query.redirectFrom %}
@@ -61,7 +61,7 @@
     {% endif %}
 
     {% if req.query.unlinked %}
-    <div class="alert alert-info hide-on-edit py-3 px-4">
+    <div class="alert alert-info d-edit-none py-3 px-4">
       <strong>{{ t('Unlinked') }}: </strong> {{ t('page_page.notice.unlinked') }}
     </div>
     {% endif %}

src/server/views/widget/page_attachments.html

@@ -1,4 +1,4 @@
-<div class="row page-attachments-row hidden-print">
+<div class="row page-attachments-row d-edit-none d-print-none">
   <div class="col-12">
     <div class="mt-4 mb-4">
       <div class="page-attachments" id="page-attachment"></div>

src/server/views/widget/page_list.html

@@ -10,7 +10,7 @@
 <li>
   <img src="{{ page.lastUpdateUser|picture }}" class="picture rounded-circle">
   <a href="{{ page.path }}"
-    class="page-list-link text-break"
+    class="text-break"
     data-path="{{ page.path }}">{{ decodeURIComponent(page.path) }}
   </a>
   <span class="page-list-meta">