Merge branch 'support/apply-bootstrap4' into support/reactify-login-page-stock

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

@@ -159,8 +159,8 @@ class UserManagement extends React.Component {
         <h2>{t('User_Management')}</h2>
         <div className="border-top border-bottom">
 
-          <div className="d-flex justify-content-start align-items-center my-2">
-            <div className="d-flex align-items-baseline">
+          <div className="row d-flex justify-content-start align-items-center my-2">
+            <div className="col-md-4 d-flex align-items-center my-2">
               <i className="icon-magnifier mr-1"></i>
               <span className="search-typeahead">
                 <input
@@ -172,7 +172,7 @@ class UserManagement extends React.Component {
               </span>
             </div>
 
-            <div className="mx-5">
+            <div className="col-md-6 my-2">
               <div className="form-inline">
                 {this.renderCheckbox('all', 'All', 'primary')}
                 {this.renderCheckbox('registered', 'Approval Pending', 'info')}
@@ -188,7 +188,7 @@ class UserManagement extends React.Component {
               </div>
             </div>
 
-            <div>
+            <div className="col-md-2 my-2">
               <button
                 type="button"
                 className="btn btn-outline-secondary btn-sm"

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -567,7 +567,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
           ? (
             <div className="text-right">
               {cheatsheetModalButton}
-              <div className="mb-2">
+              <div className="mb-2 d-none d-md-block">
                 <SimpleCheatsheet />
               </div>
             </div>

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -49,6 +49,13 @@ export default class StaffCredit extends React.Component {
         const scrollTargetHeight = target.children().innerHeight();
         const duration = scrollTargetHeight / scrollSpeed;
         target.animate({ scrollTop: scrollTargetHeight }, duration, 'linear');
+
+        target.slimScroll({
+          height: target.innerHeight(),
+          // Able to scroll after automatic schooling is complete so set "bottom" to allow scrolling from the bottom.
+          start: 'bottom',
+          color: '#FFFFFF',
+        });
       }
       else {
         // add UserCommand
@@ -97,7 +104,7 @@ export default class StaffCredit extends React.Component {
         });
         return (
           <React.Fragment key={`${contributor.sectionName}-fragment`}>
-            <div className={`row staff-credit-my-10 ${contributor.additionalClass}`} key={`${contributor.sectionName}-row`}>
+            <div className={`row ${contributor.additionalClass}`} key={`${contributor.sectionName}-row`}>
               <h2 className="col-md-12 dev-team mt-5 staff-credit-mb-10" key={contributor.sectionName}>{contributor.sectionName}</h2>
               {memberGroups}
             </div>
@@ -106,7 +113,7 @@ export default class StaffCredit extends React.Component {
         );
       });
       return (
-        <div className="text-center" onClick={this.deleteCredit}>
+        <div className="text-center staff-credit-pb-10" onClick={this.deleteCredit}>
           <h1 className="staff-credit-mb-10">GROWI Contributors</h1>
           <div className="clearfix"></div>
           {credit}

src/client/styles/scss/_layout_kibela.scss

@@ -1,4 +1,11 @@
+$navbar-height-adjustment: 10px;
+
 body.kibela {
+  /* navbar for kibela */
+  #page-wrapper {
+    margin-top: 60px;
+  }
+
   /* Logo */
   .logo {
     .logo-mark {
@@ -40,13 +47,13 @@ body.kibela {
 
   .kibela-block {
     position: relative;
-    top: 20px;
+    top: 10px;
     right: 100px;
     bottom: 0px;
     left: 0px;
     z-index: absolute;
-    max-width: 840px;
-    height: 8em;
+    max-width: 1024px;
+    min-height: 8em;
     margin: auto;
     border-radius: 0.35em;
   }
@@ -59,6 +66,10 @@ body.kibela {
       display: none;
     }
 
+    &.grw-subnav-user-page {
+      min-height: 128px;
+    }
+
     @media screen and (max-width: 765px) {
       padding-top: 30px;
     }
@@ -119,10 +130,13 @@ body.kibela {
       + 1px //                    .page-editor-footer border-top
       + 60px; //                  .page-editor-footer min-height
 
-    @include expand-editor($header-plus-footer);
+    @include expand-editor($header-plus-footer, $navbar-height-adjustment);
 
     .kibela-block {
+      top: 0px;
       max-width: unset;
+      padding-top: 0px;
+      border: 0px;
     }
 
     .tab-content {
@@ -153,9 +167,3 @@ body.kibela {
     }
   }
 }
-
-.on-edit {
-  .kibela-block {
-    border: 0px;
-  }
-}

src/client/styles/scss/_mixins.scss

@@ -17,7 +17,8 @@
   }
 }
 
-@mixin expand-editor($editor-header-plus-footer) {
+@mixin expand-editor($editor-header-plus-footer, $navbar-height-adjustment: 0px) {
+  $grw-navbar-height: $grw-navbar-height + $navbar-height-adjustment;
   $header-plus-footer: $grw-navbar-height + $editor-header-plus-footer + 2px; // add .main padding-top
 
   $editor-margin: $header-plus-footer //

src/client/styles/scss/_staff_credit.scss

@@ -60,4 +60,8 @@
     @extend .staff-credit-mt-10;
     @extend .staff-credit-mb-10;
   }
+
+  .staff-credit-pb-10 {
+    padding-bottom: 6rem;
+  }
 }

src/client/styles/scss/_wiki.scss

@@ -11,7 +11,11 @@ div.body {
 
 .wiki {
   font-size: 15px;
-  line-height: 1.8em;
+
+  // override line-height except hljs and child of it.
+  :not(pre*) {
+    line-height: 1.8em;
+  }
 
   h1,
   h2,

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

@@ -20,7 +20,7 @@ body.kibela {
   }
 
   /* kibela block */
-  .kibela-block {
+  .kibela-border-top {
     border-top: solid 0.4em $thickborder;
   }
 
@@ -161,8 +161,13 @@ body.kibela {
 
   /* navbar */
   .grw-navbar {
-    .nav-item > .nav-link:hover {
-      color: $color-link-nabvar-hover;
+    .nav-item > .nav-link {
+      &:hover {
+        color: $color-link-nabvar-hover;
+      }
+      &:focus {
+        color: $color-link-nabvar;
+      }
     }
   }
 

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

@@ -11,11 +11,12 @@
 
   <div class="row body m-0 p-0">
 
-    <div id="main" class="main col-12 kibela-block round-corner border-0 {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
+    <div id="main" class="main col-12 kibela-block round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
       <div class="row grw-subnav d-edit-none">
-        <div class="col-9 px-0 mx-0 kibela-block">
+        <div class="col px-0 mx-0 bg-white kibela-border-top round-corner">
           {% block content_header %} {% endblock %}
         </div>
+        <div class="col-xl-3 col-lg-4"></div>
       </div>
       <!-- /.grw-subnav -->
 

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

@@ -7,7 +7,7 @@
 
 {% block content_header %}
   {% if pageUser %}
-    <header id="grw-subnav-for-user-page" class="grw- subnav grw-subnav-user-page" data-page-user="{{ pageUser|json }}"></header>
+    <header id="grw-subnav-for-user-page" class="grw-subnav grw-subnav-user-page" data-page-user="{{ pageUser|json }}"></header>
   {% else %}
     {% parent %}
   {% endif %}
@@ -53,7 +53,7 @@
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
   <div class="row page-list mt-5 d-edit-none">
-    <div class="col-xs-12">
+    <div class="col-12">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>
   </div>

src/server/views/layout/layout.html

@@ -110,7 +110,7 @@
       <li class="nav-item d-none d-md-block">
         <a class="nav-link create-page" href="#" data-target="#create-page" data-toggle="modal">
           <i class="icon-pencil mr-2"></i>
-          {{ t('New') }}
+          <span>{{ t('New') }}</span>
         </a>
       </li>
       <li class="nav-item d-none d-md-block">

src/server/views/widget/page_tabs.html

@@ -47,25 +47,24 @@
     Right Tabs
   #}
 
+  {# to place right side #}
+  <div class="mr-auto"></div>
+
   <!-- presentation -->
   {% if not page.isPortal() %}
-    <li class="nav-item ml-md-auto">
+    <li class="nav-item">
       <a href="?presentation=1" class="nav-link toggle-presentation">
-        <i class="icon-film"></i><span class="hidden-xs"> {{ t('Presentation Mode') }}</span>
+        <i class="icon-film"></i><span class="d-none d-md-inline"> {{ t('Presentation Mode') }}</span>
       </a>
     </li>
   {% endif %}
 
   <!-- revision-history -->
-  {% if page.isPortal() %}
-    <li class="nav-item ml-md-auto">
-    {% else %}
-    <li class="nav-item">
-  {% endif %}
-        <a class="nav-link" href="#revision-history" role="tab" data-toggle="tab">
-          <i class="icon-layers"></i><span class="hidden-xs"> {{ t('History') }}</span>
-        </a>
-      </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#revision-history" role="tab" data-toggle="tab">
+      <i class="icon-layers"></i><span class="d-none d-md-inline"> {{ t('History') }}</span>
+    </a>
+  </li>
 
   <!-- icon-options-vertical -->
   {% if !isTrashPage() %}

src/server/views/widget/system-version.html

@@ -1,4 +1,4 @@
-<div class="system-version hidden-xs">
+<div class="system-version d-none d-md-block">
   <span>
     <a href="https://growi.org">GROWI</a> {{ growiVersion() }}
   </span>