Merge branch 'support/apply-bootstrap4' into support/chenge-into-checkbox

# Conflicts:
#	src/client/js/components/Admin/MarkdownSetting/LineBreakForm.jsx

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

@@ -14,8 +14,8 @@ class CustomizeLayoutOptions extends React.Component {
     const { t, adminCustomizeContainer } = this.props;
 
     return (
-      <div className="row">
-        <div className="col-md-4">
+      <div className="row row-cols-1 row-cols-md-2">
+        <div className="col text-center">
           <CustomizeLayoutOption
             layoutType="crowi-plus"
             isSelected={adminCustomizeContainer.state.currentLayout === 'growi'}
@@ -23,15 +23,17 @@ class CustomizeLayoutOptions extends React.Component {
             labelHtml={`GROWI Enhanced Layout <small class="text-success">${t('admin:customize_setting.recommended')}</small>`}
           >
             <h4>{t('admin:customize_setting.layout_desc.growi_title')}</h4>
-            <ul>
-              <li>{t('admin:customize_setting.layout_desc.growi_text1')}</li>
-              <li>{t('admin:customize_setting.layout_desc.growi_text2')}</li>
-              <li>{t('admin:customize_setting.layout_desc.growi_text3')}</li>
-            </ul>
+            <div className="text-justify d-inline-block">
+              <ul>
+                <li>{t('admin:customize_setting.layout_desc.growi_text1')}</li>
+                <li>{t('admin:customize_setting.layout_desc.growi_text2')}</li>
+                <li>{t('admin:customize_setting.layout_desc.growi_text3')}</li>
+              </ul>
+            </div>
           </CustomizeLayoutOption>
         </div>
 
-        <div className="col-md-4">
+        <div className="col text-center">
           <CustomizeLayoutOption
             layoutType="kibela"
             isSelected={adminCustomizeContainer.state.currentLayout === 'kibela'}
@@ -39,27 +41,13 @@ class CustomizeLayoutOptions extends React.Component {
             labelHtml="Kibela Like Layout"
           >
             <h4>{t('admin:customize_setting.layout_desc.kibela_title')}</h4>
-            <ul>
-              <li>{t('admin:customize_setting.layout_desc.kibela_text1')}</li>
-              <li>{t('admin:customize_setting.layout_desc.kibela_text2')}</li>
-              <li>{t('admin:customize_setting.layout_desc.kibela_text3')}</li>
-            </ul>
-          </CustomizeLayoutOption>
-        </div>
-
-        <div className="col-md-4">
-          <CustomizeLayoutOption
-            layoutType="classic"
-            isSelected={adminCustomizeContainer.state.currentLayout === 'crowi'}
-            onSelected={() => adminCustomizeContainer.switchLayoutType('crowi')}
-            labelHtml="Crowi Classic Layout"
-          >
-            <h4>{t('admin:customize_setting.layout_desc.crowi_title')}</h4>
-            <ul>
-              <li>{t('admin:customize_setting.layout_desc.crowi_text1')}</li>
-              <li>{t('admin:customize_setting.layout_desc.crowi_text2')}</li>
-              <li>{t('admin:customize_setting.layout_desc.crowi_text3')}</li>
-            </ul>
+            <div className="text-justify d-inline-block">
+              <ul>
+                <li>{t('admin:customize_setting.layout_desc.kibela_text1')}</li>
+                <li>{t('admin:customize_setting.layout_desc.kibela_text2')}</li>
+                <li>{t('admin:customize_setting.layout_desc.kibela_text3')}</li>
+              </ul>
+            </div>
           </CustomizeLayoutOption>
         </div>
       </div>

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

@@ -203,7 +203,7 @@ export default class ImportCollectionItem extends React.Component {
     return (
       <div className="card border-light">
         <div className="card-header bg-light">
-          <div className="d-flex justify-content-between align-items-center">
+          <div className="d-flex justify-content-between align-items-center flex-wrap">
             {/* left */}
             {this.renderCheckbox()}
             {/* right */}

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

@@ -387,7 +387,7 @@ class ImportForm extends React.Component {
           const isConfigButtonAvailable = Object.keys(IMPORT_OPTION_CLASS_MAPPING).includes(collectionName);
 
           return (
-            <div className="col-6 my-1" key={collectionName}>
+            <div className="col-md-6 my-1" key={collectionName}>
               <ImportCollectionItem
                 isImporting={isImporting}
                 isImported={collectionProgress ? isImported : false}

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

@@ -44,22 +44,20 @@ class LineBreakForm extends React.Component {
     const helpLineBreak = { __html: t('admin:markdown_setting.lineBreak_options.enable_lineBreak_desc') };
 
     return (
-      <div className="form-group text-left my-3">
-        <div className="col-8 offset-4">
-          <div className="custom-control custom-checkbox custom-checkbox-success">
-            <input
-              type="checkbox"
-              className="custom-control-input"
-              id="isEnabledLinebreaks"
-              checked={isEnabledLinebreaks}
-              onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}
-            />
-            <label className="custom-control-label" htmlFor="isEnabledLinebreaks">
-              {t('admin:markdown_setting.lineBreak_options.enable_lineBreak') }
-            </label>
-          </div>
-          <p className="help-block" dangerouslySetInnerHTML={helpLineBreak} />
+      <div className="col">
+        <div className="custom-control custom-checkbox custom-checkbox-success">
+          <input
+            type="checkbox"
+            className="custom-control-input"
+            id="isEnabledLinebreaks"
+            checked={isEnabledLinebreaks}
+            onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}
+          />
+          <label className="custom-control-label" htmlFor="isEnabledLinebreaks">
+            {t('admin:markdown_setting.lineBreak_options.enable_lineBreak') }
+          </label>
         </div>
+        <p className="form-text text-muted" dangerouslySetInnerHTML={helpLineBreak} />
       </div>
     );
   }
@@ -71,22 +69,20 @@ class LineBreakForm extends React.Component {
     const helpLineBreakInComment = { __html: t('admin:markdown_setting.lineBreak_options.enable_lineBreak_for_comment_desc') };
 
     return (
-      <div className="form-group text-left my-3">
-        <div className="col-8 offset-4">
-          <div className="custom-control custom-checkbox custom-checkbox-success">
-            <input
-              type="checkbox"
-              className="custom-control-input"
-              id="isEnabledLinebreaksInComments"
-              checked={isEnabledLinebreaksInComments}
-              onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}
-            />
-            <label className="custom-control-label" htmlFor="isEnabledLinebreaksInComments">
-              {t('admin:markdown_setting.lineBreak_options.enable_lineBreak') }
-            </label>
-          </div>
-          <p className="help-block" dangerouslySetInnerHTML={helpLineBreakInComment} />
+      <div className="col">
+        <div className="custom-control custom-checkbox custom-checkbox-success">
+          <input
+            type="checkbox"
+            className="custom-control-input"
+            id="isEnabledLinebreaksInComments"
+            checked={isEnabledLinebreaksInComments}
+            onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}
+          />
+          <label className="custom-control-label" htmlFor="isEnabledLinebreaksInComments">
+            {t('admin:markdown_setting.lineBreak_options.enable_lineBreak') }
+          </label>
         </div>
+        <p className="form-text text-muted" dangerouslySetInnerHTML={helpLineBreakInComment} />
       </div>
     );
   }
@@ -96,7 +92,7 @@ class LineBreakForm extends React.Component {
 
     return (
       <React.Fragment>
-        <fieldset className="col-12">
+        <fieldset className="form-group row row-cols-1 row-cols-md-2 mx-3">
           {this.renderLineBreakOption()}
           {this.renderLineBreakInCommentOption()}
         </fieldset>

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

@@ -157,7 +157,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('all') }}
                 />
                 <label className="custom-control-label" htmlFor="c1">
-                  <span className="badge badge-primary d-inline-block vt mt-1">All</span>
+                  <span className="badge badge-pill badge-primary d-inline-block vt mt-1">All</span>
                 </label>
               </div>
 
@@ -170,7 +170,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('registered') }}
                 />
                 <label className="custom-control-label" htmlFor="c2">
-                  <span className="badge badge-info d-inline-block vt mt-1">Approval Pending</span>
+                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Approval Pending</span>
                 </label>
               </div>
 
@@ -183,7 +183,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('active') }}
                 />
                 <label className="custom-control-label" htmlFor="c3">
-                  <span className="badge badge-success d-inline-block vt mt-1">Active</span>
+                  <span className="badge badge-pill badge-success d-inline-block vt mt-1">Active</span>
                 </label>
               </div>
 
@@ -196,7 +196,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('suspended') }}
                 />
                 <label className="custom-control-label" htmlFor="c4">
-                  <span className="badge badge-secondary d-inline-block vt mt-1">Suspended</span>
+                  <span className="badge badge-pill badge-secondary d-inline-block vt mt-1">Suspended</span>
                 </label>
               </div>
 
@@ -209,7 +209,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('invited') }}
                 />
                 <label className="custom-control-label" htmlFor="c5">
-                  <span className="badge badge-info d-inline-block vt mt-1">Invited</span>
+                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Invited</span>
                 </label>
               </div>
             </div>

src/client/js/components/Admin/Users/UserTable.jsx

@@ -56,7 +56,7 @@ class UserTable extends React.Component {
     }
 
     return (
-      <span className={`badge ${additionalClassName}`}>
+      <span className={`badge badge-pill ${additionalClassName}`}>
         {text}
       </span>
     );
@@ -71,7 +71,7 @@ class UserTable extends React.Component {
     const { t } = this.props;
 
     if (isAdmin) {
-      return <span className="badge badge-primary ml-2">{t('admin:user_management.user_table.administrator')}</span>;
+      return <span className="badge badge-primary badge-pill ml-2">{t('admin:user_management.user_table.administrator')}</span>;
     }
   }
 

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

@@ -36,7 +36,7 @@ const GrowiSubNavigation = (props) => {
   }
 
   return (
-    <div className={`row px-3 py-1 align-items-center ${compactClassName}`}>
+    <div className={`d-flex px-3 py-1 align-items-center ${compactClassName}`}>
 
       {/* Page Path */}
       <div className="title-container mr-auto">

src/client/styles/scss/_override-bootstrap.scss

@@ -44,6 +44,11 @@
     line-height: 10px;
   }
 
+  code {
+    padding: 2px 4px;
+    font-size: 90%;
+  }
+
   // Navs
   .nav-tabs {
     .nav-item {

src/client/styles/scss/_user.scss

@@ -46,8 +46,8 @@
     }
   }
 
-  .btn-like,
-  .btn-bookmark {
+  .btn.btn-like,
+  .btn.btn-bookmark {
     &.btn-lg {
       padding: 8px;
       font-size: 1.5em;

src/client/styles/scss/atoms/_buttons.scss

@@ -1,4 +1,4 @@
-.btn-circle {
+.btn.btn-circle {
   width: 30px;
   height: 30px;
   padding: 6px 0;
@@ -26,12 +26,13 @@
   border-radius: 35px;
 }
 
-.btn-like,
-.btn-bookmark {
+.btn.btn-like,
+.btn.btn-bookmark {
   font-size: 1.2em;
-  line-height: 0.8em;
+  line-height: 1em;
 
-  &.active {
+  &.active,
+  &:hover {
     // header buttons are always white for active
     color: white !important;
   }

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

@@ -299,6 +299,14 @@ body.on-edit {
   }
 }
 
+/*
+ * react bootstrap typeahead
+ */
+mark.rbt-highlight-text {
+  // Temporarily the highlight color is black
+  color: black;
+}
+
 /*
  * GROWI page attachments
  */

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

@@ -7,20 +7,16 @@
 {% endblock %}
 
 {% block layout_main %}
-<div class="container-fluid">
-
-  <header class="sticky-top py-0" id="page-header">
-
-    <div id="grw-subnav" 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) %}
-          {% include '../../widget/create_portal.html' %}
-        {% endif %}
-      {% endif %}
-
-  </header>
+<header class="sticky-top py-0" id="page-header">
+  <div id="grw-subnav" 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) %}
+      {% include '../../widget/create_portal.html' %}
+    {% endif %}
+  {% endif %}
+</header>
 
+<div class="container-fluid">
   <div class="row">
     <div id="main" class="main col-md-12 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
       {% block content_main_before %}
@@ -33,7 +29,6 @@
       {% endblock %}
     </div><!-- /.main -->
   </div><!-- /.row -->
-
 </div><!-- /.container-fluid -->
 
 <footer class="footer">

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

@@ -25,7 +25,7 @@
     </div>
 
     {# relocate #revision-toc #}
-    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container pr-2">
+    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
       {% include './widget/liker-and-seenusers.html' %}
       <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
         <div id="revision-toc-content" class="revision-toc-content"></div>

src/server/views/layout-growi/widget/liker-and-seenusers.html

@@ -1,14 +1,14 @@
 <div class="liker-and-seenusers">
   <div class="text-right">
     {% if page.liker.length > 10 %}<span class="text-muted">..</span>{% endif %}
-    <span id="liker-list" class="mr-3" data-user-ids="{{ page.liker|slice(-10)|default([])|join(',') }}"></span>
+    <span id="liker-list" class="mr-3" data-user-ids="{{ page.liker|slice(-9)|default([])|join(',') }}"></span>
     <span class="text-info">
       <i class="icon-fw icon-like"></i><span class="liker-user-count">{{ page.liker.length|default(0) }}</span>
     </span>
   </div>
   <div class="text-right">
     {% if page.seenUsers.length > 10 %}<span class="text-muted">..</span>{% endif %}
-    <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|slice(-10)|default([])|join(',') }}"></span>
+    <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|slice(-9)|default([])|join(',') }}"></span>
     <span class="text-danger">
       <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
     </span>