Merge branch 'support/apply-bootstrap4' into support/search-result-page

babel.config.js

@@ -26,6 +26,9 @@ module.exports = function(api) {
         },
       },
     ],
+    [
+      '@babel/plugin-proposal-class-properties', { loose: true },
+    ],
   ];
 
   return {

package.json

@@ -152,7 +152,11 @@
       "handsontable: v7.0.0 or above is no loger MIT lisence."
     ],
     "@alienfast/i18next-loader": "^1.0.16",
+    "@atlaskit/drawer": "^5.3.5",
+    "@atlaskit/logo": "^12.3.3",
+    "@atlaskit/navigation-next": "^8.0.2",
     "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
@@ -233,6 +237,7 @@
     "socket.io-client": "^2.0.3",
     "sticky-events": "^3.1.3",
     "style-loader": "^1.0.0",
+    "styled-components": "^5.0.1",
     "stylelint": "^13.2.0",
     "stylelint-config-recess-order": "^2.0.1",
     "swagger-jsdoc": "^3.4.0",

src/client/js/bootstrap.jsx

@@ -5,6 +5,7 @@ import Xss from '@commons/service/xss';
 
 import HeaderSearchBox from './components/HeaderSearchBox';
 import PersonalDropdown from './components/Navbar/PersonalDropdown';
+import Sidebar from './components/Sidebar';
 import StaffCredit from './components/StaffCredit/StaffCredit';
 
 import AppContainer from './services/AppContainer';
@@ -40,6 +41,8 @@ const componentMappings = {
   'search-sidebar': <HeaderSearchBox crowi={appContainer} />,
   'personal-dropdown': <PersonalDropdown />,
 
+  'grw-sidebar': <Sidebar />,
+
   'staff-credit': <StaffCredit />,
 };
 

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

@@ -99,7 +99,7 @@ class GlobalNotification extends React.Component {
 
         <h2 className="border-bottom mb-5">{t('notification_setting.notification_list')}
           <a href="/admin/global-notification/new">
-            <p className="btn btn-default pull-right">{t('notification_setting.add_notification')}</p>
+            <p className="btn btn-light pull-right">{t('notification_setting.add_notification')}</p>
           </a>
         </h2>
 

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

@@ -131,7 +131,7 @@ class GlobalNotificationList extends React.Component {
               <td className="td-abs-center">
                 <div className="dropdown">
                   <button
-                    className="btn btn-secondary dropdown-toggle"
+                    className="btn btn-light dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
                     data-toggle="dropdown"

src/client/js/components/GrowiLogo.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const GrowiLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 226.44 196.11"
+  >
+    <path
+      d="M56.61 196.11L169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11z"
+      className="group2"
+    >
+    </path>
+    <path
+      // eslint-disable-next-line max-len
+      d="M75.48 98.05L94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05z"
+      className="group1"
+    >
+    </path>
+    <path
+      d="M0 98.06L56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06z"
+      className="group1"
+    >
+    </path>
+    <path
+      d="M75.48 163.43L56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43z"
+      className="group1"
+    >
+    </path>
+  </svg>
+);
+
+export default GrowiLogo;

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

@@ -76,7 +76,7 @@ const PersonalDropdown = (props) => {
         <h6 className="dropdown-header">Color Scheme</h6>
         <form className="px-4">
           <div className="form-row align-items-center">
-            <div className="col-auto">
+            <div className="form-group col-auto">
               <div className="custom-control custom-checkbox">
                 <input
                   id="cbFollowOs"
@@ -85,12 +85,12 @@ const PersonalDropdown = (props) => {
                   checked={!isUserPreferenceExists}
                   onChange={e => followOsCheckboxModifiedHandler(e.target.checked)}
                 />
-                <label className="custom-control-label" htmlFor="cbFollowOs">Use OS Setting</label>
+                <label className="custom-control-label text-nowrap" htmlFor="cbFollowOs">Use OS Setting</label>
               </div>
             </div>
           </div>
           <div className="form-row align-items-center">
-            <div className="col-auto d-flex">
+            <div className="form-group col-auto mb-0 d-flex">
               <span className={isUserPreferenceExists ? '' : 'text-muted'}>Light</span>
               <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
                 <input

src/client/js/components/PageEditor.jsx

@@ -288,8 +288,8 @@ class PageEditor extends React.Component {
     const emojiStrategy = this.props.appContainer.getEmojiStrategy();
 
     return (
-      <div className="row">
-        <div className="col-md-6 col-sm-12 page-editor-editor-container">
+      <div className="d-flex">
+        <div className="page-editor-editor-container" style={{ flex: 1 }}>
           <Editor
             ref={(c) => { this.editor = c }}
             value={this.state.markdown}
@@ -305,7 +305,7 @@ class PageEditor extends React.Component {
             onSave={this.onSaveWithShortcut}
           />
         </div>
-        <div className="col-md-6 hidden-sm hidden-xs page-editor-preview-container">
+        <div className="d-none d-xl-block page-editor-preview-container" style={{ flex: 1 }}>
           <Preview
             markdown={this.state.markdown}
             // eslint-disable-next-line no-return-assign

src/client/js/components/PageStatusAlert.jsx

@@ -40,14 +40,14 @@ class PageStatusAlert extends React.Component {
 
   renderSomeoneEditingAlert() {
     return (
-      <div className="alert-hackmd-someone-editing myadmin-alert alert-success myadmin-alert-bottom alertbottom2">
+      <div className="alert-hackmd-someone-editing alert alert-success fixed-bottom p-3 mb-0">
         <i className="icon-fw icon-people"></i>
         Someone editing this page on HackMD
         &nbsp;
         <i className="fa fa-angle-double-right"></i>
         &nbsp;
-        <a href="#hackmd">
-          Open HackMD Editor
+        <a href="#hackmd" className="font-weight-bold text-decoration-none">
+          <u>Open HackMD Editor</u>
         </a>
       </div>
     );
@@ -55,14 +55,14 @@ class PageStatusAlert extends React.Component {
 
   renderDraftExistsAlert(isRealtime) {
     return (
-      <div className="alert-hackmd-draft-exists myadmin-alert alert-success myadmin-alert-bottom alertbottom2">
+      <div className="alert-hackmd-draft-exists alert alert-success fixed-bottom p-3 mb-0">
         <i className="icon-fw icon-pencil"></i>
         This page has a draft on HackMD
         &nbsp;
         <i className="fa fa-angle-double-right"></i>
         &nbsp;
-        <a href="#hackmd">
-          Open HackMD Editor
+        <a href="#hackmd" className="font-weight-bold text-decoration-none">
+          <u>Open HackMD Editor</u>
         </a>
       </div>
     );
@@ -74,14 +74,14 @@ class PageStatusAlert extends React.Component {
     const label2 = t('Load latest');
 
     return (
-      <div className="alert-revision-outdated myadmin-alert alert-warning myadmin-alert-bottom alertbottom2">
+      <div className="alert alert-warning fixed-bottom p-3 mb-0">
         <i className="icon-fw icon-bulb"></i>
         {this.props.pageContainer.state.lastUpdateUsername} {label1}
         &nbsp;
         <i className="fa fa-angle-double-right"></i>
         &nbsp;
-        <a href="#" onClick={this.refreshPage}>
-          {label2}
+        <a href="#" onClick={this.refreshPage} className="font-weight-bold text-decoration-none">
+          <u>{label2}</u>
         </a>
       </div>
     );

src/client/js/components/Sidebar.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import BacklogIcon from '@atlaskit/icon/glyph/backlog';
+import BoardIcon from '@atlaskit/icon/glyph/board';
+import GraphLineIcon from '@atlaskit/icon/glyph/graph-line';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import { JiraWordmark } from '@atlaskit/logo';
+
+import {
+  GroupHeading,
+  HeaderSection,
+  Item,
+  LayoutManager,
+  MenuSection,
+  NavigationProvider,
+  Separator,
+  Wordmark,
+  ThemeProvider, modeGenerator,
+} from '@atlaskit/navigation-next';
+
+import { createSubscribedElement } from './UnstatedUtils';
+import AppContainer from '../services/AppContainer';
+
+import SidebarNav from './Sidebar/SidebarNav';
+
+class Sidebar extends React.Component {
+
+  static propTypes = {
+  };
+
+  state = {
+  };
+
+  renderSidebarContents = () => (
+    <>
+      <HeaderSection>
+        { () => (
+          <div className="grw-product-nav-header">
+            <Wordmark wordmark={JiraWordmark} />
+          </div>
+        ) }
+      </HeaderSection>
+      <MenuSection>
+        { () => (
+          <div className="grw-product-nav-menu">
+            <Item
+              before={BacklogIcon}
+              text="Backlog"
+              isSelected
+            />
+            <Item
+              before={BoardIcon}
+              text="Active sprints"
+            />
+            <Item
+              before={GraphLineIcon}
+              text="Reports"
+            />
+            <Separator />
+            <GroupHeading>Shortcuts</GroupHeading>
+            <Item before={ShortcutIcon} text="Project space" />
+            <Item before={ShortcutIcon} text="Looooooooooooooooooooooooooooooong Menu" />
+          </div>
+        ) }
+      </MenuSection>
+    </>
+  );
+
+  render() {
+    return (
+      <ThemeProvider
+        theme={theme => ({
+          ...theme,
+          context: 'product',
+          mode: modeGenerator({
+            product: { text: '#ffffff', background: '#334455' },
+          }),
+        })}
+      >
+        <NavigationProvider>
+          <LayoutManager
+            globalNavigation={SidebarNav}
+            productNavigation={() => null}
+            containerNavigation={this.renderSidebarContents}
+            experimental_flyoutOnHover
+            experimental_alternateFlyoutBehaviour
+            // experimental_fullWidthFlyout
+            shouldHideGlobalNavShadow
+            showContextualNavigation
+          >
+          </LayoutManager>
+        </NavigationProvider>
+      </ThemeProvider>
+    );
+  }
+
+}
+
+
+/**
+ * Wrapper component for using unstated
+ */
+const SidebarWrapper = (props) => {
+  return createSubscribedElement(Sidebar, props, [AppContainer]);
+};
+
+export default withTranslation()(SidebarWrapper);

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

@@ -0,0 +1,64 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import EditIcon from '@atlaskit/icon/glyph/edit';
+import TrayIcon from '@atlaskit/icon/glyph/tray';
+
+import {
+  GlobalNav,
+} from '@atlaskit/navigation-next';
+import Drawer from '@atlaskit/drawer';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+
+import GrowiLogo from '../GrowiLogo';
+
+class SidebarNav extends React.Component {
+
+  propTypes = {
+  };
+
+  state = {
+    isDrawerOpen: false,
+  };
+
+  openDrawer = () => this.setState({ isDrawerOpen: true });
+
+  closeDrawer = () => this.setState({ isDrawerOpen: false });
+
+  render() {
+    const { isDrawerOpen } = this.state;
+    return (
+      <>
+        <div className="grw-logo">
+          <GrowiLogo />
+        </div>
+        <GlobalNav
+          primaryItems={[
+            { id: 'create', icon: EditIcon, label: 'Create' },
+            {
+              id: 'drawer', icon: TrayIcon, label: 'Drawer', onClick: this.openDrawer,
+            },
+          ]}
+          secondaryItems={[]}
+        />
+        <Drawer onClose={this.closeDrawer} isOpen={isDrawerOpen} width="wide">
+          <code>Drawer contents</code>
+        </Drawer>
+      </>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const SidebarNavWrapper = (props) => {
+  return createSubscribedElement(SidebarNav, props, [AppContainer]);
+};
+
+export default withTranslation()(SidebarNavWrapper);

src/client/styles/scss/_editor-overlay.scss

@@ -39,9 +39,9 @@
       opacity: 0.6;
       .card-body {
         min-width: 30em;
+        padding-bottom: 0;
         font-family: monospace;
         color: $text-muted;
-        padding-bottom: 0;
       }
       ul > li {
         list-style: none;
@@ -49,11 +49,11 @@
     }
 
     .gfm-cheatsheet-modal-link {
-      background-color: transparent;
-      border: none;
       color: $text-muted;
       pointer-events: all;
       cursor: pointer;
+      background-color: transparent;
+      border: none;
 
       opacity: 0.6;
 

src/client/styles/scss/_layout.scss

@@ -10,13 +10,11 @@
   padding-top: 10px !important;
 }
 
-.logo {
-  .logo-mark {
-    svg {
-      width: $grw-logo-width;
-      height: $grw-navbar-height;
-      padding: ($grw-logo-width - $grw-logomark-width) / 2;
-    }
+.grw-logo {
+  svg {
+    width: $grw-logo-width;
+    height: $grw-navbar-height;
+    padding: ($grw-logo-width - $grw-logomark-width) / 2;
   }
   /*
   .logo-text {
@@ -32,6 +30,12 @@
   font-weight: bold;
 }
 
+.grw-sidebar {
+  .ak-navigation-resize-button {
+    top: 110px;
+  }
+}
+
 /*
   * header
   */

src/client/styles/scss/_mixins.scss

@@ -28,8 +28,6 @@
     width: 100%;
     height: calc(100vh - #{$grw-navbar-height});
     padding-top: 2px;
-    padding-right: 0;
-    padding-left: 0;
     margin-top: 0px !important;
 
     &,
@@ -66,10 +64,6 @@
           .textarea-editor {
             height: calc(100vh - #{$editor-margin});
           }
-
-          @include media-breakpoint-up(md) {
-            padding-right: 0;
-          }
         }
       }
 

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

@@ -19,14 +19,8 @@ body.on-edit {
 
   // for growi layout
   .main {
-    > .row {
-      margin: 0;
-
-      > .col-lg-10,
-      > .col-md-9 {
-        width: 100%;
-        padding: 0;
-      }
+    .col.grw-page-content-container {
+      padding: 0;
     }
   }
 
@@ -51,7 +45,7 @@ body.on-edit {
 
   // hide unnecessary elements for growi layout
   .revision-toc-container {
-    display: none;
+    display: none !important;
   }
 
   // hide unnecessary elements for crowi layout
@@ -145,19 +139,6 @@ body.on-edit {
     }
   }
 
-  #page-status-alert .myadmin-alert {
-    position: absolute;
-    right: 3px;
-    bottom: 42px;
-    left: 3px;
-    box-shadow: 2px 2px 5px #666;
-    opacity: 0.8;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
   &.builtin-editor {
     /*****************
     * Editor styles
@@ -205,6 +186,7 @@ body.on-edit {
     .page-editor-preview-body {
       padding-top: 18px;
       padding-right: 15px;
+      padding-left: 15px;
       overflow-y: scroll;
     }
 

src/client/styles/scss/_page.scss

@@ -38,11 +38,6 @@
   padding: 10px 15px;
 }
 
-// show PageStatusAlert in default
-#page-status-alert .myadmin-alert {
-  display: block;
-}
-
 .main .content-main .revision-history {
   .revision-history-list {
     .revision-history-outer {

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

@@ -49,37 +49,38 @@ $link-hover-color: $color-link-hover;
 //== Apply to GROWI Elements
 //
 
-.logo {
+.grw-logo {
   // set transition for fill
   svg * {
     transition: fill 0.8s ease-out;
   }
 
-  .logo-mark {
-    svg {
-      fill: $fillcolor-logo-mark;
+  svg {
+    fill: $fillcolor-logo-mark;
+  }
 
-      &:hover {
-        .group1 {
-          fill: $growi-green;
-        }
+  &:hover {
+    svg {
+      .group1 {
+        fill: $growi-green;
+      }
 
-        .group2 {
-          fill: $growi-blue;
-        }
+      .group2 {
+        fill: $growi-blue;
       }
     }
   }
 }
 
 .grw-navbar {
-  background: $bgcolor-navbar;
+  // TODO: coloring
+  // background: $bgcolor-navbar;
+  // .nav-item > .nav-link {
+  //   color: white;
+  // }
+  background: darken($bgcolor-global, 8%);
   .nav-item > .nav-link {
-    color: white;
-  }
-
-  .logo {
-    background-color: darken($bgcolor-navbar, 10%);
+    color: #333;
   }
 }
 
@@ -87,6 +88,12 @@ $link-hover-color: $color-link-hover;
   background: darken($bgcolor-global, 2%);
 }
 
+.grw-sidebar {
+  .grw-logo {
+    background-color: darken($bgcolor-navbar, 10%);
+  }
+}
+
 /*
  * code color of inline-code
  */

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

@@ -13,9 +13,10 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="col-lg-10 col-md-9">
+    <div class="col grw-page-content-container">
       {% include '../widget/forbidden_content.html' %}
-    </div> {# /.col- #}
+    </div>
+    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container"></div>
   </div>
 {% endblock %}
 

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

@@ -13,9 +13,10 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="col-lg-10 col-md-9">
+    <div class="col grw-page-content-container">
       {% include '../widget/not_creatable_content.html' %}
-    </div> {# /.col- #}
+    </div>
+    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container"></div>
   </div>
 {% endblock %}
 

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

@@ -13,9 +13,10 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="col-lg-10 col-md-9">
+    <div class="col grw-page-content-container">
       {% include '../widget/not_found_content.html' %}
-    </div> {# /.col- #}
+    </div>
+    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container"></div>
   </div>
 {% endblock %}
 

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

@@ -13,7 +13,7 @@
 {% block content_main %}
   <div class="row">
 
-    <div class="col-lg-10 col-md-9">
+    <div class="col grw-page-content-container">
 
       {% include '../widget/page_content.html' %}
 
@@ -22,15 +22,15 @@
         $('#revision-toc').remove();
       </script>
 
-    </div> {# /.col- #}
+    </div>
 
     {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+    <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>
       </div>
-    </div> {# /.col- #}
+    </div>
 
   </div>
 

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

@@ -13,7 +13,7 @@
 {% block content_main %}
   <div class="row">
 
-    <div class="col-lg-10 col-md-9">
+    <div class="col grw-page-content-container">
 
       {% include '../widget/page_content.html' %}
 
@@ -22,10 +22,10 @@
         $('#revision-toc').remove();
       </script>
 
-    </div> {# /.col- #}
+    </div>
 
     {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+    <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/user_page.html

@@ -17,7 +17,7 @@
 {% block content_main %}
   <div class="row">
 
-    <div class="col-lg-10 col-md-9">
+    <div class="col grw-page-content-container">
 
       {#
         # ensure to insert 'user_page_content' widget to here
@@ -43,7 +43,7 @@
     </div> {# /.col- #}
 
     {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
       <div class="liker-and-seenusers d-flex align-items-end justify-content-end">
         {% 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>

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

@@ -13,9 +13,9 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="bg-white round-corner">
+    <div class="col bg-white round-corner">
       {% include '../widget/forbidden_content.html' %}
-    </div> {# /.col- #}
+    </div>
   </div>
 {% endblock %}
 

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

@@ -13,9 +13,9 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="bg-white round-corner">
+    <div class="col bg-white round-corner">
       {% include '../widget/not_creatable_content.html' %}
-    </div> {# /.col- #}
+    </div>
   </div>
 {% endblock %}
 

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

@@ -13,9 +13,9 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="bg-white round-corner">
+    <div class="col bg-white round-corner">
       {% include '../widget/not_found_content.html' %}
-    </div> {# /.col- #}
+    </div>
   </div>
 {% endblock %}
 

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

@@ -13,7 +13,7 @@
 {% block content_main %}
 <div class="row">
 
-  <div class="col-xs-12 bg-white round-corner">
+  <div class="col bg-white round-corner">
 
     {% include '../widget/page_content.html' %}
     {# force remove #revision-toc from #content_main of parent #}
@@ -21,8 +21,10 @@
       $('#revision-toc').remove();
     </script>
 
-  </div> {# /.col- #} {# relocate #revision-toc #}
-  <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+  </div>
+
+  {# relocate #revision-toc #}
+  <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
     <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>

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

@@ -12,28 +12,25 @@
 <div class="row page-content">
 
 
-  <div class="col-xs-12 bg-white round-corner">
+  <div class="col bg-white round-corner">
 
     {% include '../widget/page_content.html' %}
 
   </div>
 
-
   {# force remove #revision-toc from #content_main of parent #}
-      <script>
-        $('#revision-toc').remove();
-      </script>
-
-    </div> {# /.col- #}
-
-    {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
-      <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>
-    </div> {# /.col- #}
-
+  <script>
+    $('#revision-toc').remove();
+  </script>
+
+  {# relocate #revision-toc #}
+  <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
+    <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>
+  </div>
 
+</div>
 
   <div class="row page-list bg-white round-corner grw-pt-10px mb-5 {% if page.isPortal() %}mt-5{% endif %}">
     <div class="col-xs-12">

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

@@ -17,7 +17,7 @@
 {% block content_main %}
   <div class="row pt-15">
 
-    <div class="col-xs-12 bg-white round-corner">
+    <div class="col bg-white round-corner">
 
       {#
         # ensure to insert 'user_page_content' widget to here
@@ -40,14 +40,14 @@
         $('#revision-toc').remove();
       </script>
 
-    </div> {# /.col- #}
+    </div>
 
     {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+    <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
       <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>
-    </div> {# /.col- #}
+    </div>
 
   </div>
 

src/server/views/layout/layout.html

@@ -71,128 +71,71 @@
   data-userlang="{% if user %}{{ user.lang }}{% endif %}"
  >
 
-<div id="wrapper">
-  <!-- Navigation -->
-  {% block layout_head_nav %}
-  <nav class="navbar grw-navbar navbar-expand-sm navbar-dark mb-0 p-0">
-    <!-- 1 GROWI logo -->
-    <div class="navbar-brand">
-      <a class="logo d-block" href="/">
-        <div class="logo-mark d-inline-block">{% include '../widget/logo.html' %}</div>
-        {#
-        <span class="logo-text mx-2">
-          {% set appTitle = appService.getAppTitle() %}
-          {% set appTitleFontSize = getAppTitleFontSize(appTitle) %}
-          <text x="0" y="{{22+appTitleFontSize/2}}" font-size="{{appTitleFontSize}}">
-            {% block title %}{{ appTitle }}{% endblock %}
-          </text>
-        </span>
-        #}
-      </a>
-    </div>
+<div id="wrapper" class="d-flex">
 
-    <ul class="navbar-nav mr-auto">
-      {#
-      <!-- 2 side nav open -->
-      <a class="open-close d-none d-md-block mx-3 waves-effect waves-light">
-        <i class="ti-menu"></i>
-      </a>
-      #}
-      {#  disabled temporary -- 2019.05.13 Yuki Takei
-      <li class="nav-item">
-        <a class="nav-link" href="/tags">
-          <i class="tag-icon icon-tag"></i><span>{{ t('Tags') }}</span>
-        </a>
-      </div>
-
-      <ul class="nav navbar-top-links navbar-left hidden-xs">
-        <li>
-          <a class="open-close hidden-xs waves-effect waves-light">
-            <i class="ti-menu"></i>
-          </a>
-        </li>
-        {#  disabled temporary -- 2019.05.13 Yuki Takei
-        <li>
-          <li class="nav-item-admin">
-            <a href="/tags">
-              <i class="tag-icon icon-tag"></i><span>{{ t('Tags') }}</span>
-            </a>
-          </li>
-        </li>
-        #}
+  {# Sidebar #}
+  <nav>
+    <div id="grw-sidebar" class="grw-sidebar"></div>
+  </nav>
+
+  <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>
-    </ul>
-
-    <!-- 5 user action -->
-    <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 %}
-
-      {% if user %}
-      <li class="nav-item">
-        <a class="nav-link" 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"></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 #}
-
-  <!-- 6 header widget area -->
-  {% 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 sidebar %}
-  <!-- Left navbar-header -->
-  {#
-  <div class="navbar-default sidebar hidden-print" role="navigation">
-    <div class="sidebar-nav navbar-collapse slimscrollsidebar">
-      <ul class="nav" id="side-menu">
-        <li class="sidebar-search hidden-sm hidden-md hidden-lg">
-          {% if isSearchServiceConfigured() %}
-          <div class="search-sidebar" role="search" id="search-sidebar"></div>
-          {% endif %}
+      {# 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 %}
 
-        <li class="tbd"><a href="#">(TBD) Create /Sidebar</a></li>
+        {% if user %}
+        <li class="nav-item">
+          <a class="nav-link" 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"></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 #}
+
+    {% 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">
+      {% block layout_main %}
+      {% endblock %} {# layout_main #}
     </div>
-  </div>
-  #}
-  <!-- Left navbar-header end -->
-  {% endblock %}
 
-  <!-- 8 Page Content -->
-  <div id="page-wrapper">
-    {% block layout_main %}
-    {% endblock %} {# layout_main #}
-  </div><!-- /#page-wrapper -->
+  </div>
 
 </div><!-- /#wrapper -->