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

config/webpack.common.js

@@ -38,7 +38,7 @@ module.exports = (options) => {
       // 'styles/theme-mono-blue':       './src/client/styles/scss/theme/mono-blue.scss',
       // 'styles/theme-future':          './src/client/styles/scss/theme/future.scss',
       // 'styles/theme-blue-night':      './src/client/styles/scss/theme/blue-night.scss',
-      // 'styles/theme-kibela':          './src/client/styles/scss/theme/kibela.scss',
+      'styles/theme-kibela':          './src/client/styles/scss/theme/kibela.scss',
       // 'styles/theme-halloween':       './src/client/styles/scss/theme/halloween.scss',
       // 'styles/theme-wood':          './src/client/styles/scss/theme/wood.scss',
       // 'styles/theme-christmas':          './src/client/styles/scss/theme/christmas.scss',

resource/cdn-manifests.js

@@ -138,6 +138,14 @@ module.exports = {
         integrity: '',
       },
     },
+    {
+      name: 'animate.css',
+      url: 'https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css',
+      groups: ['basis'],
+      args: {
+        integrity: '',
+      },
+    },
     {
       name: 'jquery-ui',
       url: 'https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css',

src/client/js/bootstrap.jsx

@@ -4,6 +4,7 @@ import loggerFactory from '@alias/logger';
 import Xss from '@commons/service/xss';
 
 import HeaderSearchBox from './components/HeaderSearchBox';
+import NavbarToggler from './components/Navbar/NavbarToggler';
 import PersonalDropdown from './components/Navbar/PersonalDropdown';
 import Sidebar from './components/Sidebar';
 import StaffCredit from './components/StaffCredit/StaffCredit';
@@ -37,6 +38,8 @@ appContainer.injectToWindow();
  *  value: React Element
  */
 const componentMappings = {
+  'grw-navbar-toggler': <NavbarToggler />,
+
   'search-top': <HeaderSearchBox />,
   'search-sidebar': <HeaderSearchBox crowi={appContainer} />,
   'personal-dropdown': <PersonalDropdown />,

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

@@ -50,11 +50,11 @@ class AwsSetting extends React.Component {
           </span>
         </p>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.region')}
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               placeholder={`${t('eg')} ap-northeast-1`}
@@ -66,11 +66,11 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.custom_endpoint')}
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -84,11 +84,11 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.bucket_name')}
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -101,11 +101,11 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             Access Key ID
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -117,11 +117,11 @@ class AwsSetting extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-5">
-          <label className="col-3 col-form-label">
+        <div className="row form-group">
+          <label className="text-left text-md-right col-md-3 col-form-label">
             Secret Access Key
           </label>
-          <div className="col-6">
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"

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

@@ -43,7 +43,7 @@ class SiteUrlSetting extends React.Component {
           && (<p className="alert alert-danger"><i className="icon-exclamation"></i> {t('admin:app_setting.site_url_warn')}</p>)}
 
         <div className="row form-group">
-          <div className="col-9 offset-3">
+          <div className="col-md-9 offset-md-3">
             <table className="table settings-table">
               <colgroup>
                 <col className="from-db" />

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

@@ -7,7 +7,7 @@ const AdminUpdateButtonRow = (props) => {
 
   return (
     <div className="row my-3">
-      <div className="offset-4 col-5">
+      <div className="mx-auto">
         <button type="button" className="btn btn-primary" onClick={props.onClick} disabled={props.disabled}>{ t('Update') }</button>
       </div>
     </div>

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

@@ -216,7 +216,7 @@ class ImportDataPage extends React.Component {
                     name="Esa"
                     type="button"
                     id="importFromEsa"
-                    className="btn btn-outline-secondary btn-esa"
+                    className="btn btn-secondary btn-esa"
                     onClick={this.esaHandleSubmitTest}
                     value={t('admin:importer_management.esa_settings.test_connection')}
                   />
@@ -309,7 +309,7 @@ class ImportDataPage extends React.Component {
                     name="Qiita"
                     type="button"
                     id="importFromQiita"
-                    className="btn btn-outline-secondary btn-qiita"
+                    className="btn btn-secondary btn-qiita"
                     onClick={this.qiitaHandleSubmitTest}
                     value={t('admin:importer_management.qiita_settings.test_connection')}
                   />

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

@@ -63,6 +63,7 @@ class NotificationSetting extends React.Component {
             <NavLink
               className={`${activeTab === 'slack-configuration' && 'active'} `}
               onClick={() => { this.toggleActiveTab('slack-configuration') }}
+              href="#slack-configuration"
             >
               <i className="icon-settings"></i> Slack Configuration
             </NavLink>
@@ -71,6 +72,7 @@ class NotificationSetting extends React.Component {
             <NavLink
               className={`${activeTab === 'user-trigger-notification' && 'active'} `}
               onClick={() => { this.toggleActiveTab('user-trigger-notification') }}
+              href="#user-trigger-notification"
             >
               <i className="icon-settings"></i> User Trigger Notification
             </NavLink>
@@ -79,6 +81,7 @@ class NotificationSetting extends React.Component {
             <NavLink
               className={`${activeTab === 'global-notification' && 'active'} `}
               onClick={() => { this.toggleActiveTab('global-notification') }}
+              href="#global-notification"
             >
               <i className="icon-settings"></i> Global Notification
             </NavLink>

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

@@ -194,7 +194,7 @@ class UserManagement extends React.Component {
                 </label>
               </div>
 
-              <div className="custom-control custom-checkbox custom-checkbox-secondary mr-2">
+              <div className="custom-control custom-checkbox custom-checkbox-warning mr-2">
                 <input
                   className="custom-control-input"
                   type="checkbox"
@@ -203,7 +203,7 @@ class UserManagement extends React.Component {
                   onClick={() => { this.handleClick('suspended') }}
                 />
                 <label className="custom-control-label" htmlFor="c4">
-                  <span className="badge badge-pill badge-secondary d-inline-block vt mt-1">Suspended</span>
+                  <span className="badge badge-pill badge-warning d-inline-block vt mt-1">Suspended</span>
                 </label>
               </div>
 
@@ -235,8 +235,8 @@ class UserManagement extends React.Component {
               </button>
             </div>
 
-            <div className="ml-5">
-              {this.state.isNotifyCommentShow && <span className="text-warning small">{t('admin:user_management.click_twice_same_checkbox')}</span>}
+            <div className="ml-4">
+              {this.state.isNotifyCommentShow && <span className="text-warning">{t('admin:user_management.click_twice_same_checkbox')}</span>}
             </div>
 
           </div>

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

@@ -42,7 +42,7 @@ class UserTable extends React.Component {
         text = 'Active';
         break;
       case 3:
-        additionalClassName = 'badge-secondary';
+        additionalClassName = 'badge-warning';
         text = 'Suspended';
         break;
       case 4:

src/client/js/components/BookmarkButton.jsx

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

src/client/js/components/LikeButton.jsx

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

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+
+const NavbarToggler = (props) => {
+
+  // eslint-disable-next-line no-unused-vars
+  const { appContainer } = props;
+
+  return (
+    <button className="navbar-toggler grw-navbar-toggler border-0" type="button" aria-expanded="false" aria-label="Toggle navigation">
+      <i className="icon-menu"></i>
+    </button>
+  );
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const NavbarTogglerWrapper = (props) => {
+  return createSubscribedElement(NavbarToggler, props, [AppContainer]);
+};
+
+
+NavbarToggler.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(NavbarTogglerWrapper);

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 />&nbsp;{user.name}
+        <UserPicture user={user} withoutLink /><span className="d-none d-sm-inline-block">&nbsp;{user.name}</span>
       </a>
 
       {/* Menu */}

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

@@ -552,7 +552,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   renderCheatsheetModalButton() {
     return (
-      <button type="button" className="btn-link gfm-cheatsheet-modal-link small p-0" onClick={() => { this.markdownHelpButtonClickedHandler() }}>
+      <button type="button" className="btn-link gfm-cheatsheet-modal-link small" onClick={() => { this.markdownHelpButtonClickedHandler() }}>
         <i className="icon-question" /> Markdown
       </button>
     );
@@ -567,13 +567,13 @@ export default class CodeMirrorEditor extends AbstractEditor {
           ? (
             <div className="text-right">
               {cheatsheetModalButton}
-              <div className="mt-2">
+              <div className="mb-2">
                 <SimpleCheatsheet />
               </div>
             </div>
           )
           : (
-            <div className="mr-4">
+            <div className="mr-4 mb-2">
               {cheatsheetModalButton}
             </div>
           )

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

@@ -110,7 +110,7 @@ class OptionsSelector extends React.Component {
 
     return (
       <div className="my-0 form-group">
-        <label>Theme:</label>
+        <label className="mr-2">Theme:</label>
         <div className="btn-group btn-group-sm dropup">
           <button className="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedTheme}
@@ -137,7 +137,7 @@ class OptionsSelector extends React.Component {
 
     return (
       <div className="my-0 form-group">
-        <label>Keymap:</label>
+        <label className="mr-2">Keymap:</label>
         <div className="btn-group btn-group-sm dropup">
           <button className="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedKeymapMode}

src/client/js/components/PageHistory/RevisionDiff.jsx

@@ -39,7 +39,7 @@ export default class RevisionDiff extends React.Component {
 
     const diffView = { __html: diffViewHTML };
     // eslint-disable-next-line react/no-danger
-    return <div className="revision-history-diff" dangerouslySetInnerHTML={diffView} />;
+    return <div className="revision-history-diff d-table w-100" dangerouslySetInnerHTML={diffView} />;
   }
 
 }

src/client/js/components/Sidebar.jsx

@@ -15,7 +15,6 @@ import Drawer from '@atlaskit/drawer';
 import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
-import GrowiLogo from './GrowiLogo';
 import SidebarNav from './Sidebar/SidebarNav';
 import History from './Sidebar/History';
 import CustomSidebar from './Sidebar/CustomSidebar';
@@ -56,9 +55,6 @@ class Sidebar extends React.Component {
 
   renderGlobalNavigation = () => (
     <>
-      <div className="grw-logo">
-        <a href="/"><GrowiLogo /></a>
-      </div>
       <SidebarNav currentContentsId={this.state.currentContentsId} onItemSelected={this.itemSelectedHandler} />
       <Drawer onClose={this.closeDrawer} isOpen={this.state.isDrawerOpen} width="wide">
         <code>Drawer contents</code>
@@ -99,6 +95,7 @@ class Sidebar extends React.Component {
           // experimental_fullWidthFlyout
           shouldHideGlobalNavShadow
           showContextualNavigation
+          topOffset={50}
         >
         </LayoutManager>
       </ThemeProvider>

src/client/js/components/Sidebar/SidebarNav.jsx

@@ -5,6 +5,7 @@ import { withTranslation } from 'react-i18next';
 
 import {
   GlobalNav,
+  GlobalItem,
 } from '@atlaskit/navigation-next';
 
 import { createSubscribedElement } from '../UnstatedUtils';
@@ -28,13 +29,37 @@ class SidebarNav extends React.Component {
     }
   }
 
-  generateSidebarItemObj(id, label, icon) {
+  generatePrimaryItemObj(id, label, icon) {
+    const isSelected = this.props.currentContentsId === id;
+
     return {
       id,
-      icon,
-      label,
-      isSelected: this.props.currentContentsId === id,
-      onClick: () => this.itemSelectedHandler(id),
+      component: ({ className }) => (
+        <div className={`${className} grw-global-item-container ${isSelected ? 'active' : ''}`}>
+          <GlobalItem
+            icon={icon}
+            label={label}
+            isSelected={isSelected}
+            onClick={() => this.itemSelectedHandler(id)}
+          />
+        </div>
+      ),
+    };
+  }
+
+  generateSecondaryItemObj(id, label, icon, href) {
+    return {
+      id,
+      component: ({ className }) => (
+        <div className={`${className} grw-global-item-container d-block d-md-none`}>
+          <a href={href}>
+            <GlobalItem
+              icon={icon}
+              label={label}
+            />
+          </a>
+        </div>
+      ),
     };
   }
 
@@ -46,10 +71,13 @@ class SidebarNav extends React.Component {
     return (
       <GlobalNav
         primaryItems={[
-          this.generateSidebarItemObj('custom', 'Custom Sidebar', this.generateIconFactory('fa fa-2x fa-code')),
-          this.generateSidebarItemObj('history', 'History', this.generateIconFactory('icon-clock fa-2x')),
+          this.generatePrimaryItemObj('custom', 'Custom Sidebar', this.generateIconFactory('fa fa-code')),
+          this.generatePrimaryItemObj('history', 'History', this.generateIconFactory('icon-clock')),
+        ]}
+        secondaryItems={[
+          this.generateSecondaryItemObj('admin', 'Admin', this.generateIconFactory('icon-settings'), '/admin'),
+          this.generateSecondaryItemObj('help', 'Help', this.generateIconFactory('icon-question'), 'https://docs.growi.org'),
         ]}
-        secondaryItems={[]}
       />
     );
   }

src/client/js/services/PageContainer.js

@@ -6,9 +6,9 @@ import * as entities from 'entities';
 import * as toastr from 'toastr';
 
 const logger = loggerFactory('growi:services:PageContainer');
-const scrollThresForSticky = 50;
-const scrollThresForCompact = 100;
-const scrollThresForThrottling = 200;
+const scrollThresForSticky = 0;
+const scrollThresForCompact = 30;
+const scrollThresForThrottling = 100;
 
 /**
  * Service container related to Page

src/client/styles/scss/_admin.scss

@@ -1,5 +1,5 @@
 .admin-page {
-  .grw-header.sticky-top {
+  header.grw-header {
     height: unset;
   }
 

src/client/styles/scss/_layout.scss

@@ -1,5 +1,24 @@
 @import 'layout_variable';
 
+%fukidashi-for-active {
+  position: relative;
+
+  // speech balloon
+  &:after {
+    position: absolute;
+    top: 0.5em;
+    right: -1em;
+    display: block;
+    width: 0;
+    content: '';
+    border: 1em solid transparent;
+    border-left-width: 0;
+
+    // @include media-breakpoint-down(xs) {
+    // }
+  }
+}
+
 // FIXME: replace with mt-2 or mt-3
 .grw-mt-10px {
   margin-top: 10px !important;
@@ -32,10 +51,53 @@
 
 .grw-sidebar {
   .ak-navigation-resize-button {
-    top: 110px;
+    top: calc(50vh - 20px);
+  }
+
+  // override @atlaskit/navigation-next styles
+  div[class$='-NavigationContainer'] {
+    // Adjust to be on top of the growi subnavigation
+    z-index: $zindex-sticky + 5;
+  }
+
+  // override @atlaskit/navigation-next styles
+  div[class$='-Outer'] {
+    div[class$='-Shadow'] {
+      background: unset;
+      border-right: 1px solid $border;
+    }
+  }
+
+  .grw-global-item-container {
+    i {
+      font-size: 1.5em;
+    }
+
+    // icon opacity
+    &:not(.active) {
+      i {
+        opacity: 0.4;
+      }
+      &:hover,
+      &:focus {
+        i {
+          opacity: 0.7;
+        }
+      }
+    }
+
+    &.active {
+      button {
+        @extend %fukidashi-for-active;
+      }
+    }
   }
 }
 
+#page-wrapper {
+  margin-top: $grw-navbar-height;
+}
+
 .grw-sidebar-header-container {
   padding: 10px;
 
@@ -100,6 +162,18 @@
   }
 }
 
+.grw-fixed-controls-container {
+  position: fixed;
+  right: 1em;
+  bottom: 3em;
+
+  transition: all 200ms linear;
+
+  .grw-fixed-controls-button-container {
+    box-shadow: 0 3px 4px rgba($black, 0.3);
+  }
+}
+
 // printable style
 @media print {
   padding: 30px;

src/client/styles/scss/_layout_kibela.scss

@@ -1,28 +1,8 @@
-@import '../scss/theme/layout_kibela_variable';
-
 body.kibela {
-  .icon-link,
-  .CodeMirror-hint-active,
-  .grw-nav-main-left-tab,
-  .tav-pane,
-  .active {
-    color: #5882fa;
-  }
-
-  .bg-white {
-    background: #fefffe !important;
-  }
-
-  .bg-primary {
-    background-color: $primary !important;
-  }
-
+  /* Logo */
   .logo {
-    background: transparent;
-
     .logo-mark {
       height: 50px;
-      background-color: white;
       box-shadow: none;
 
       svg {
@@ -32,10 +12,6 @@ body.kibela {
   }
 
   /* header */
-  .background-t {
-    background-color: transparent;
-  }
-
   .authors {
     padding-top: 10px;
 
@@ -44,28 +20,12 @@ body.kibela {
     }
   }
 
-  .search-input-group,
-  .search-typeahead {
-    .btn {
-      background-color: transparent;
-    }
-  }
-
   .panel-heading {
     border-radius: 0 !important;
   }
 
-  .btn-open-dropzone {
-    background: rgb(243, 245, 247);
-  }
-
   /* page list */
-  .page-list {
-    background: white;
-  }
-
   .page-attachments-row {
-    background-color: #e5ecf1 !important;
     border: 0px;
   }
 
@@ -75,7 +35,6 @@ body.kibela {
 
   .round-corner-top {
     z-index: absolute;
-    border-top: solid 0.4em #5584e1;
     border-radius: 0.35em;
   }
 
@@ -86,16 +45,14 @@ body.kibela {
     bottom: 0px;
     left: 0px;
     z-index: absolute;
-    height: 11em;
     max-width: 840px;
+    height: 11em;
     margin: auto;
-    border-top: solid 0.4em #5584e1;
     border-radius: 0.35em;
   }
 
   .grw-subnav {
     position: relative;
-    background: transparent;
     border: none;
 
     svg {
@@ -131,114 +88,27 @@ body.kibela {
     .list-group-item + .list-group-item.active {
       margin-top: 2px;
     }
-
-    .list-group-item.active {
-      color: #fff;
-      background: #1256a3;
-    }
-
-    .list-group-item {
-      &:hover {
-        background: #eee;
-      }
-    }
-  }
-
-  /* search page */
-  .search-result-list,
-  .page-list-li {
-    background: #f4f5f6;
   }
 
   /* Tabs */
   .nav.nav-tabs {
     > .nav-item {
-      color: #5882fa;
       cursor: pointer;
-      background: transparent;
-
-      &:hover,
-      &:focus {
-        > .nav-link {
-          color: #7a94d9;
-        }
-      }
 
       > .nav-link {
-        color: #5882fa;
         border: none;
         border-radius: 3px;
       }
-
-      > .nav-link.active {
-        background: transparent !important;
-        border-bottom: solid 2.7px #5584e1;
-      }
-    }
-
-    .wiki {
-      h1 {
-        border-bottom: solid 2px #5584e1 !important;
-      }
-
-      h2 {
-        border-color: solid 1px #5584e1;
-      }
-    }
-  }
-
-  /* Modal */
-  .modal-content {
-    background-color: $themelight;
-
-    .modal-header.bg-primary {
-      color: white;
-
-      .close {
-        color: white;
-      }
-    }
-  }
-
-  /* Inline Code */
-  :not(.hljs) > code:not(.hljs) {
-    background-color: $bgcolor-inline-code;
-    color: $color-inline-code;
-  }
-
-  /* Card */
-  .card {
-    border: 1px solid $border;
-
-    .card-header {
-      background-color: $lightthemecolor;
-      border-bottom: 1px solid $border;
-    }
-
-    .card-body {
-      background-color: $themelight;
-    }
-
-    .card-footer {
-      background: white;
-      border-top: 1px solid $border;
     }
   }
 
   /* button */
   .btn {
-    border-radius: $radius;
-  }
-
-  .btn-primary {
-    background: $primary;
-    border: 1px solid $primary;
+    // border-radius: $radius;
   }
 
   /* edit */
   .CodeMirror {
-    border: solid 1.2px #d8d8d8;
-    border-top: solid 0.3em #5584e1 !important;
     border-radius: 0.35em;
   }
 
@@ -279,7 +149,6 @@ body.kibela {
     .page-editor-preview-container {
       padding-right: 0px !important;
       padding-left: 2em;
-      background: white !important;
     }
 
     .page-editor-footer {

src/client/styles/scss/_layout_variable.scss

@@ -1,30 +1,8 @@
 /* color variables */
 
-/* green */
-$grw-base-green: rgb(7, 146, 72);
-$grw-mos-green: rgb(5, 70, 35);
-$grw-light-green: rgb(204, 238, 220);
-$grw-white-green: #f8fffb;
-$grw-sea-green: seagreen;
-
-.bg-grw-green {
-  background: $grw-base-green;
-}
-
-.bg-grw-mos-green {
-  background: $grw-mos-green;
-}
-
-.bg-grw-light-green {
-  background: $grw-light-green;
-}
-
 /* blue */
 $grw-alice-blue: aliceblue;
 
 /* gray */
 $grw-line-gray: #dee2e6;
 $grw-line-light-gray: #ddd;
-
-/* white */
-$grw-floral-white: floralwhite;

src/client/styles/scss/_me.scss

@@ -1,5 +1,5 @@
 .user-settings-page {
-  .grw-header.sticky-top {
+  header.grw-header {
     height: unset;
   }
 }

src/client/styles/scss/_mixins.scss

@@ -72,7 +72,7 @@
         .hackmd-preinit,
         .hackmd-error,
         #iframe-hackmd-container > iframe {
-          width: 100vw;
+          width: 100%;
           height: calc(100vh - #{$header-plus-footer});
           min-height: calc(100vh - #{$header-plus-footer}); // for IE11
         }

src/client/styles/scss/_navbar.scss

@@ -1,4 +1,9 @@
 .grw-navbar {
+  .grw-navbar-toggler {
+    padding: 0.5rem;
+    font-size: 1.5em;
+  }
+
   .nav-link,
   .nav-item.confidential {
     display: flex;

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

@@ -197,10 +197,6 @@ body.on-edit {
     }
 
     #page-editor-options-selector {
-      label {
-        margin-right: 0.5em;
-      }
-
       .grw-editor-configuration-dropdown {
         .icon-container {
           display: inline-block;

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

@@ -18,7 +18,7 @@ $dark: #3e4d6c !default;
 //## Font, line-height, and color for body text, headings, and more.
 $font-family-sans-serif:  Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif;
-$font-family-monospace: Osaka-Mono, 'MS Gothic', Monaco, Menlo, Consolas, 'Courier New', monospace;
+$font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 $font-family-base:        $font-family-sans-serif;
 
 $font-size-root: 14px;

src/client/styles/scss/_page.scss

@@ -70,6 +70,7 @@
       .revision-history-diff {
         padding-left: 40px;
         color: #333;
+        table-layout: fixed;
       }
     }
 

src/client/styles/scss/_subnav.scss

@@ -1,6 +1,6 @@
 $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 
-@mixin setTransitionForCompactMode() {
+%transitionForCompactMode {
   // set transition-duration (normal -> compact)
   transition: all 300ms $easeInOutCubic;
 }
@@ -8,9 +8,12 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 /*
  * layout for sticky
  */
-.grw-header.sticky-top {
+header.grw-header {
+  top: $grw-navbar-height;
+
   // Adjust to be on top of the growi subnavigation
-  z-index: $zindex-sticky - 100;
+  z-index: $zindex-sticky;
+
   height: 80px;
   pointer-events: none; // disable pointer events for sticky
 
@@ -25,11 +28,11 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  */
 .grw-subnavbar {
   &.grw-subnavbar-compact {
-    @include setTransitionForCompactMode();
+    @extend %transitionForCompactMode;
 
     h1 {
       @include variable-font-size(18px);
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
   }
 }

src/client/styles/scss/_tag.scss

@@ -1,5 +1,5 @@
 .tags-page {
-  .grw-header.sticky-top {
+  header.grw-header {
     height: unset;
   }
 

src/client/styles/scss/_user.scss

@@ -1,6 +1,6 @@
 $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 
-@mixin setTransitionForCompactMode() {
+%transitionForCompactMode {
   // set transition-duration (normal -> compact)
   transition: all 300ms $easeInOutCubic;
 }
@@ -18,24 +18,24 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
       margin-bottom: 0;
       font-size: 14px;
 
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
     .picture {
       width: 62px;
       height: 62px;
 
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
     h1 {
       font-size: 1.5em;
       line-height: 30px;
 
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
     .users-meta {
       margin-left: 15px;
 
-      @include setTransitionForCompactMode();
+      @extend %transitionForCompactMode;
     }
   }
 }
@@ -88,10 +88,8 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
     }
   }
 
-  .btn.btn-like,
   .btn.btn-bookmark {
     &.btn-lg {
-      padding: 8px;
       font-size: 1.5em;
     }
   }

src/client/styles/scss/_variables.scss

@@ -6,8 +6,8 @@ $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', Mei
 
 //== Layout
 $grw-navbar-height: 50px;
-$grw-logo-width: 60px;
-$grw-logomark-width: 32px;
+$grw-logo-width: 64px;
+$grw-logomark-width: 40px;
 
 // fix tab width to 95 pixels
 // see also '_on-edit.scss'

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

@@ -1,36 +1,5 @@
-.btn.btn-circle {
-  width: 30px;
-  height: 30px;
-  padding: 6px 0;
-  font-size: 12px;
-  line-height: 1.428571429;
-  text-align: center;
-  border-radius: 15px;
-}
-
-.btn-circle.btn-lg {
-  width: 50px;
-  height: 50px;
-  padding: 10px 16px;
-  font-size: 18px;
-  line-height: 1.33;
-  border-radius: 25px;
-}
-
-.btn-circle.btn-xl {
-  width: 70px;
-  height: 70px;
-  padding: 10px 16px;
-  font-size: 24px;
-  line-height: 1.33;
-  border-radius: 35px;
-}
-
 .btn.btn-like,
 .btn.btn-bookmark {
-  font-size: 1.2em;
-  line-height: 1em;
-
   &.active,
   &:hover {
     // header buttons are always white for active

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

@@ -0,0 +1,212 @@
+body.kibela {
+  .icon-link,
+  .CodeMirror-hint-active,
+  .grw-nav-main-left-tab,
+  .tav-pane,
+  .active {
+    color: $subthemecolor;
+  }
+  
+  .bg-white {
+    background: #fefffe !important;
+  }
+  
+  .bg-primary {
+    background-color: $primary !important;
+  }
+  
+  /* kibela block */
+  .kibela-block {
+    border-top: solid 0.4em $thickborder;
+  }
+
+  /* page wrapper */
+  #page-wrapper {
+    background-color: $bgcolor-global;
+  }
+
+  /* Logo */
+  .logo {
+    background: transparent;
+
+    .logo-mark {
+      background-color: white;
+    }
+  }
+
+  /* header*/
+  .background-t {
+    background-color: transparent;
+  }
+
+  .search-input-group,
+  .search-typeahead {
+    .btn {
+      background-color: transparent;
+    }
+  }
+
+  .btn-open-dropzone {
+    background: $themelight;
+  }
+
+  /* page list */
+  .page-list {
+    background: white;
+  }
+
+  .page-attachments-row {
+    background-color: #e5ecf1;
+  }
+
+  /* round */
+  .round-corner-top {
+    border-top: solid 0.4em $thickborder;
+  }
+
+  /* admin navigation */
+  .admin-navigation {
+    .list-group-item {
+      background-color: transparent;
+
+      &:hover {
+        background: #eee;
+      }
+    }
+
+    .list-group-item.active {
+      color: white;
+      background: $bgcolor-navbar-active;
+    }
+  }
+
+  /* search page */
+  .search-result-list,
+  .page-list-li {
+    background: $themelight;
+  }
+
+  /* Tabs */
+  .nav.nav-tabs {
+    > .nav-item {
+      color: $color-link;
+      background: transparent;
+
+      &:hover,
+      &:focus {
+        > .nav-link {
+          color: $color-link-hover;
+        }
+      }
+
+      > .nav-link {
+        color: $color-link;
+      }
+
+      > .nav-link.active {
+        background: transparent !important;
+        border-bottom: solid 2.7px $thickborder;
+      }
+    }
+  }
+
+  /* wiki */
+  .wiki {
+    h1 {
+      border-bottom: solid 2px $thickborder !important;
+    }
+
+    h2 {
+      border-color: solid 1px $thickborder;
+    }
+
+    // change color of highlighted header in wiki (default: orange)
+    .code-line.revision-head.highlighted {
+      color: $themelight;
+      background-color: lighten($bgcolor-theme, 20%);
+
+      .icon-note,
+      .icon-link {
+        color: $themelight;
+      }
+    }
+  }
+
+  /* Modal */
+  .modal-content {
+    background-color: $themelight;
+
+    .modal-header.bg-primary {
+      color: white;
+
+      .close {
+        color: white;
+      }
+    }
+  }
+
+  /* Inline Code */
+  :not(.hljs) > code:not(.hljs) {
+    color: $color-inline-code;
+    background-color: $bgcolor-inline-code;
+  }
+
+  /* Card */
+  .card {
+    border: 1px solid $border-color-theme;
+
+    .card-header {
+      background-color: $lightthemecolor;
+      border-bottom: 1px solid $border-color-theme;
+    }
+
+    .card-body {
+      background-color: $themelight;
+    }
+
+    .card-footer {
+      background: white;
+      border-top: 1px solid $border-color-theme
+    }
+  }
+
+  /* button */
+  .btn-primary {
+    background: $primary;
+    border: 1px solid $primary;
+  }
+
+  /* edit */
+  .CodeMirror {
+    border: solid 1.2px #d8d8d8;
+    border-top: solid 0.3em $thickborder !important;
+  }
+
+  &.on-edit {
+    .page-editor-preview-container {
+      background: white !important;
+    }
+  }
+
+  /* subnav */
+  .grw-subnav {
+    background: transparent;
+  }
+
+  /* navbar */
+  .grw-navbar {
+    .nav-item > .nav-link:hover {
+      color: $color-link-nabvar-hover;
+    }
+  }
+
+  /* h */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $color-header;
+  }
+}

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

@@ -56,6 +56,8 @@ $link-hover-color: $color-link-hover;
 //
 
 .grw-logo {
+  background-color: darken($bgcolor-navbar, 10%);
+
   // set transition for fill
   svg * {
     transition: fill 0.8s ease-out;
@@ -86,8 +88,11 @@ $link-hover-color: $color-link-hover;
 }
 
 .grw-sidebar {
-  .grw-logo {
-    background-color: darken($bgcolor-navbar, 10%);
+  .grw-global-item-container.active {
+    button:after {
+      // fukidashi color
+      border-right-color: darken($bgcolor-global, 4%);
+    }
   }
 }
 

src/client/styles/scss/theme/_layout_kibela_variable.scss

@@ -1,39 +0,0 @@
-$radius: .25em;
-
-$bgcolor-theme: rgb(18, 86, 163);
-$themelight: #f4f5f6;
-$subthemecolor: rgb(90, 149, 216);
-$lightthemecolor: rgba(181, 203, 247, 0.61);
-
-$bgcolor-navbar: $bgcolor-theme;
-$bgcolor-global: $themelight;
-$bgcolor-global: $themelight;
-
-$color-header: $bgcolor-theme;
-$color-global: #3c4a60;
-$linktext: rgb(74, 109, 204);
-$linktext-hover: lighten($linktext, 12%);
-$sidebar-text: $bgcolor-theme;
-
-$primary: $bgcolor-theme;
-$info: lighten($bgcolor-theme, 20%);
-
-$fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
-$color-link-wiki: lighten($bgcolor-theme, 20%);
-$color-link-wiki-hover: lighten($color-link-wiki, 20%);
-$color-inline-code: $subthemecolor;
-$bgcolor-inline-code: lighten($subthemecolor, 70%);
-$border: $lightthemecolor;
-
-// change color of highlighted header in wiki (default: orange)
-.wiki {
-  .code-line.revision-head.highlighted {
-    color: $themelight;
-    background-color: lighten($bgcolor-theme, 20%);
-
-    .icon-note,
-    .icon-link {
-      color: $themelight;
-    }
-  }
-}

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

@@ -56,3 +56,10 @@
     }
   }
 }
+
+@each $theme-color, $color in $theme-colors {
+  .badge.badge-#{$theme-color} {
+    color: $bgcolor-global;
+    background: $color;
+  }
+}

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

@@ -1,9 +1,93 @@
-// import colors
-@import '../../agile-admin/inverse/colors/kibela';
-@import 'layout_kibela_valiable';
+@import '../variables';
+@import '../override-bootstrap-variables';
 
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
+// Light Mode
+html[light] {
+  $bgcolor-theme: rgb(18, 86, 163);
+  $themelight: #f4f5f6;
+  $subthemecolor: rgb(88, 130, 250);
+  $lightthemecolor: rgba(181, 203, 247, 0.61);
 
-// override
-@import 'override-agileadmin';
+  // Background colors
+  $bgcolor-navbar: white;
+  $bgcolor-navbar-active: $bgcolor-theme;
+  $bgcolor-global: $themelight;
+  $bgcolor-card: #e3e5e7;
+  $bgcolor-inline-code: lighten($subthemecolor, 70%);
+
+  $color-header: $bgcolor-theme;
+  $color-global: #3c4a60;
+  $color-link: rgb(74, 109, 204);
+  $color-link-hover: lighten($color-link, 12%);
+  $sidebar-text: $bgcolor-theme;
+  $color-reversal: #eee;
+
+  $primary: $bgcolor-theme;
+  $info: lighten($bgcolor-theme, 20%);
+
+  $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
+  $color-link-wiki: lighten($bgcolor-theme, 20%);
+  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
+  $color-link-nabvar: $color-global;
+  $color-link-nabvar-hover: $color-global;
+  $color-inline-code: $subthemecolor;
+
+  // border colors
+  $border-color-theme: $lightthemecolor;
+  $thickborder: #5584e1;
+
+  // dropdown colors
+  $bgcolor-dropdown-link-active: $growi-blue;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  @import 'apply-colors';
+  @import 'apply-colors-light';
+  @import 'apply-colors-kibela';
+}
+
+
+// Dark Mode ( same as Light Mode )
+html[dark] {
+  $bgcolor-theme: rgb(18, 86, 163);
+  $themelight: #f4f5f6;
+  $subthemecolor: rgb(88, 130, 250);
+  $lightthemecolor: rgba(181, 203, 247, 0.61);
+
+  // Background colors
+  $bgcolor-navbar: white;
+  $bgcolor-navbar-active: $bgcolor-theme;
+  $bgcolor-global: $themelight;
+  $bgcolor-card: #e3e5e7;
+  $bgcolor-inline-code: lighten($subthemecolor, 70%);
+
+  $color-header: $bgcolor-theme;
+  $color-global: #3c4a60;
+  $color-link: rgb(74, 109, 204);
+  $color-link-hover: lighten($color-link, 12%);
+  $sidebar-text: $bgcolor-theme;
+  $color-reversal: #eee;
+
+  $primary: $bgcolor-theme;
+  $info: lighten($bgcolor-theme, 20%);
+
+  $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
+  $color-link-wiki: lighten($bgcolor-theme, 20%);
+  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
+  $color-link-nabvar: $color-global;
+  $color-link-nabvar-hover: $color-global;
+  $color-inline-code: $subthemecolor;
+
+  // border colors
+  $border-color-theme: $lightthemecolor;
+  $thickborder: #5584e1;
+
+  // dropdown colors
+  $bgcolor-dropdown-link-active: $growi-blue;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  @import 'apply-colors';
+  @import 'apply-colors-light';
+  @import 'apply-colors-kibela';
+}

src/server/routes/apiv3/customize-setting.js

@@ -100,7 +100,7 @@ module.exports = (crowi) => {
       ]),
     ],
     layoutTheme: [
-      body('layoutType').isString().isIn(['growi', 'kibela', 'crowi']),
+      body('layoutType').isString().isIn(['growi', 'kibela']),
       body('themeType').isString().isIn([
         'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'future', 'blue-night', 'halloween', 'spring',
       ]),

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

@@ -9,7 +9,7 @@
 {% block layout_main %}
 
 {% block content_header_wrapper %}
-<header class="sticky-top py-0 grw-header">
+<header class="py-0 position-sticky grw-header">
   {% block content_header %}
   {% endblock %}
 </header>

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

@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block content_header_wrapper %}
-  <header class="sticky-top py-0 grw-header grw-header-user-page">
+  <header class="py-0 position-sticky grw-header grw-header-user-page">
     {% if pageUser %}
       <div id="grw-subnav-for-user-page" class="grw-subnav" data-page-user="{{ pageUser|json }}"></div>
     {% else %}

src/server/views/layout/layout.html

@@ -71,74 +71,88 @@
   data-userlang="{% if user %}{{ user.lang }}{% endif %}"
  >
 
-<div id="wrapper" class="d-flex">
+<div id="wrapper">
 
-  {# Sidebar #}
-  <nav>
-    <div id="grw-sidebar" class="grw-sidebar"></div>
-  </nav>
+  {% block layout_head_nav %}
+  <nav class="navbar grw-navbar navbar-expand-sm navbar-dark fixed-top mb-0 p-sm-0">
+    <div id="grw-navbar-toggler" class="d-sm-none mr-auto"></div>
 
-  <div class="flex-grow-1">
-
-    {% block layout_head_nav %}
-    <nav class="navbar grw-navbar navbar-expand-sm navbar-dark mb-0 p-0">
-      {# Navbar Left #}
-      <ul class="navbar-nav mr-auto pl-4">
-        <li>
-          {% if isSearchServiceConfigured() %}
-          <div class="navbar-form navbar-left search-top" role="search" id="search-top"></div>
-          {% endif %}
-        </li>
-      </ul>
-
-      {# Navbar Right #}
-      <ul class="navbar-nav">
-        {% if user and user.admin %}
-        <li class="nav-item">
-          <a class="nav-link" href="/admin">
-            <i class="icon-settings mr-2"></i>
-            <span class="d-none d-md-inline-block">{{ t('Admin') }}</span>
-          </a>
-        </li>
-        {% endif %}
+    {# Brand Logo #}
+    <div class="navbar-brand mr-sm-auto">
+      <a class="grw-logo d-block" href="/">
+        {% include '../widget/logo.html' %}
+      </a>
+    </div>
 
-        {% if user %}
-        <li class="nav-item">
-          <a class="nav-link create-page" href="#" data-target="#create-page" data-toggle="modal">
-            <i class="icon-pencil mr-2"></i>
-            <span class="d-none d-md-inline-block">{{ t('New') }}</span>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="https://docs.growi.org/" target="_blank">
-            <i class="icon-question mr-2"></i><span class="d-none d-md-inline-block mr-2">{{ t('Help') }}</span><span class="text-muted small"><i class="icon-share-alt"></i></span>
-          </a>
-        </li>
-        <li id="personal-dropdown" class="nav-item dropdown dropdown-toggle"></li>
-        {% else %}
-        <li id="login-user" class="nav-item"><a class="nav-link" href="/login">Login</a></li>
+    {# Navbar Center #}
+    <ul class="navbar-nav d-none d-md-block">
+      <li>
+        {% if isSearchServiceConfigured() %}
+        <div class="search-top" role="search" id="search-top"></div>
         {% endif %}
-        {% if getConfig('crowi', 'app:confidential') %}
-        <li class="nav-item confidential text-light">{{ getConfig('crowi', 'app:confidential') }}</li>
-        {% endif %}
-      </ul>
+      </li>
+    </ul>
+
+    {# Navbar Right #}
+    <ul class="navbar-nav ml-auto">
+      {% if user and user.admin %}
+      <li class="nav-item d-none d-md-block">
+        <a class="nav-link" href="/admin">
+          <i class="icon-settings mr-2"></i>
+          {{ t('Admin') }}
+        </a>
+      </li>
+      {% endif %}
+
+      {% if user %}
+      <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') }}
+        </a>
+      </li>
+      <li class="nav-item d-none d-md-block">
+        <a class="nav-link" href="https://docs.growi.org/" target="_blank">
+          <i class="icon-question mr-2"></i><span class="mr-2">{{ t('Help') }}</span><span class="small"><i class="icon-share-alt"></i></span>
+        </a>
+      </li>
+      <li id="personal-dropdown" class="nav-item dropdown dropdown-toggle"></li>
+      {% else %}
+      <li id="login-user" class="nav-item"><a class="nav-link" href="/login">Login</a></li>
+      {% endif %}
+      {% if getConfig('crowi', 'app:confidential') %}
+      <li class="nav-item confidential text-light">{{ getConfig('crowi', 'app:confidential') }}</li>
+      {% endif %}
+    </ul>
 
-    </nav>
-    {% include '../modal/create_page.html' %}
-    {% endblock  %} {# layout_head_nav #}
+  </nav>
+  {% 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 %}
+  {% 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 id="page-wrapper">
+  <div class="d-flex">
+    {# Sidebar #}
+    <nav class="d-none d-sm-block">
+      <div id="grw-sidebar" class="grw-sidebar"></div>
+    </nav>
+    <div id="page-wrapper" class="flex-grow-1">
       {% block layout_main %}
       {% endblock %} {# layout_main #}
     </div>
-
   </div>
 
 </div><!-- /#wrapper -->
 
+<div class="grw-fixed-controls-container d-md-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>
+    </button>
+  </div>
+</div>
+
 <!-- /#staff-credit -->
 <div id="staff-credit"></div>
 

src/server/views/tags.html

@@ -5,7 +5,7 @@
 {% block html_base_css %}tags-page{% endblock %}
 
 {% block layout_main %}
-<header class="sticky-top py-0 grw-header">
+<header class="py-0 position-sticky grw-header">
   <h1 class="title">{{ t('Tags') }}</h1>
 </header>
 

src/server/views/widget/page_tabs.html

@@ -72,7 +72,7 @@
     {% if page.isPortal() %}
     <li class="nav-item dropdown">
       <a
-        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" data-toggle="dropdown" {% endif %}
+        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" href="#" data-toggle="dropdown" {% endif %}
         {% if not user %}
           class="nav-link dropdown-toggle dropdown-toggle-disabled dropdown-toggle-no-caret"
           data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
@@ -94,7 +94,7 @@
     {% else %}
     <li class="nav-item dropdown">
       <a
-        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" data-toggle="dropdown" {% endif %}
+        {% if user %} role="button" class="nav-link dropdown-toggle dropdown-toggle-no-caret" href="#" data-toggle="dropdown" {% endif %}
         {% if not user %}
           class="nav-link dropdown-toggle dropdown-toggle-disabled dropdown-toggle-no-caret"
           data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"