Merge pull request #1744 from weseek/support/migrate-to-scrollpos-styler

Support/migrate to scrollpos styler

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     jquery: true,
     emojione: true,
     hljs: true,
+    ScrollPosStyler: true,
     window: true,
   },
   plugins: [

resource/cdn-manifests.js

@@ -2,7 +2,8 @@ module.exports = {
   js: [
     {
       name: 'basis',
-      url: 'https://cdn.jsdelivr.net/combine/npm/emojione@3.1.2,npm/jquery@3.4.0,npm/popper.js@1.15.0,npm/bootstrap@4.4.1/dist/js/bootstrap.min.js',
+      // eslint-disable-next-line max-len
+      url: 'https://cdn.jsdelivr.net/combine/npm/emojione@3.1.2,npm/jquery@3.4.0,npm/popper.js@1.15.0,npm/bootstrap@4.4.1/dist/js/bootstrap.min.js,npm/scrollpos-styler@0.7.1',
       groups: ['basis'],
       args: {
         integrity: '',

src/client/js/app.jsx

@@ -125,3 +125,6 @@ $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', () => {
     </I18nextProvider>, document.getElementById('revision-history'),
   );
 });
+
+// initialize scrollpos-styler
+ScrollPosStyler.init();

src/client/js/components/SearchPage.jsx

@@ -92,7 +92,7 @@ class SearchPage extends React.Component {
   render() {
     return (
       <div>
-        <div className="search-page-input">
+        <div className="search-page-input sps sps--abv">
           <SearchPageForm
             t={this.props.t}
             onSearchFormChanged={this.search}

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

@@ -264,11 +264,6 @@ class SearchResult extends React.Component {
       );
     });
 
-    // TODO あとでなんとかする
-    setTimeout(() => {
-      $('#search-result-list > nav').affix({ offset: { top: 50 } });
-    }, 1200);
-
     /*
     UI あとで考える
     <span className="search-result-meta">Found: {this.props.searchResultMeta.total} pages with "{this.props.searchingKeyword}"</span>

src/client/js/legacy/crowi.js

@@ -116,28 +116,6 @@ Crowi.handleKeyCtrlSlashHandler = (event) => {
   event.preventDefault();
 };
 
-Crowi.initAffix = () => {
-  const $affixContent = $('#page-header');
-  if ($affixContent.length > 0) {
-    const $affixContentContainer = $('.row.grw-subnav');
-    const containerHeight = $affixContentContainer.outerHeight(true);
-    $affixContent.affix({
-      offset: {
-        top() {
-          return $('.navbar').outerHeight(true) + containerHeight;
-        },
-      },
-    });
-    $('[data-affix-disable]').on('click', function(e) {
-      const $elm = $($(this).data('affix-disable'));
-      $(window).off('.affix');
-      $elm.removeData('affix').removeClass('affix affix-top affix-bottom');
-      return false;
-    });
-    $affixContentContainer.css({ 'min-height': containerHeight });
-  }
-};
-
 Crowi.initClassesByOS = function() {
   // add classes to cmd-key by OS
   const platform = navigator.platform.toLowerCase();
@@ -665,7 +643,6 @@ window.addEventListener('load', (e) => {
 
   Crowi.highlightSelectedSection(window.location.hash);
   Crowi.modifyScrollTop();
-  Crowi.initAffix();
   Crowi.initClassesByOS();
 });
 

src/client/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -1,16 +1,19 @@
 .top-left-part {
-  .logo-mark, .logo-text {
+  .logo-mark,
+  .logo-text {
     fill: white;
   }
 }
 
-
 /*
  * Button
  */
 .btn-default {
-  &:hover, &:focus,
-  &.active, &.active:hover, &.active:focus {
+  &:hover,
+  &:focus,
+  &.active,
+  &.active:hover,
+  &.active:focus {
     color: white;
     background-color: lighten($bodycolor, 5%);
   }
@@ -19,12 +22,14 @@
 /*
   * Form
   */
-input.form-control, textarea.form-control {
+input.form-control,
+textarea.form-control {
   color: lighten($bodytext, 30%);
   background-color: darken($bodycolor, 5%);
   border: 1px solid darken($border, 30%);
 }
-.form-control[disabled], .form-control[readonly] {
+.form-control[disabled],
+.form-control[readonly] {
   color: lighten($bodytext, 10%);
   background-color: lighten($bodycolor, 5%);
 }
@@ -61,8 +66,11 @@ input.form-control, textarea.form-control {
  * Panel
  */
 .panel {
-  &, &.panel-white, &.panel-default {
-    .panel-heading, .panel-body {
+  &,
+  &.panel-white,
+  &.panel-default {
+    .panel-heading,
+    .panel-body {
       color: $light;
     }
   }
@@ -71,36 +79,31 @@ input.form-control, textarea.form-control {
 /*
  * Table
  */
- .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
- .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td ,
- .table > thead > tr > th, .table-bordered{
-     border-top: 1px solid $border;
- }
-
- .table-bordered > thead > tr > th,
- .table-bordered > tbody > tr > th,
- .table-bordered > tfoot > tr > th,
- .table-bordered > thead > tr > td,
- .table-bordered > tbody > tr > td,
- .table-bordered > tfoot > tr > td {
-   border: 1px solid $border;
- }
- .table > thead > tr > th {
-     border-bottom: 1px solid $border;
- }
-
- .table-bordered {
-     border: 1px solid $border;
- }
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td,
+.table > thead > tr > th,
+.table-bordered {
+  border-top: 1px solid $border;
+}
 
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid $border;
+}
+.table > thead > tr > th {
+  border-bottom: 1px solid $border;
+}
 
-/*
- * GROWI header
- */
-.main-container header.affix {
-  .logo-mark {
-    fill: white;
-  }
+.table-bordered {
+  border: 1px solid $border;
 }
 
 /*
@@ -160,8 +163,8 @@ legend {
 .admin-page {
   #themeOptions {
     .theme-option-container.active a {
-      background-color: darken($themecolor,15%);
-      border-color: darken($themecolor,15%);
+      background-color: darken($themecolor, 15%);
+      border-color: darken($themecolor, 15%);
     }
   }
 }

src/client/styles/scss/_layout.scss

@@ -44,37 +44,21 @@
   border-bottom: 1px solid $grw-line-gray;
 }
 
-.header-wrap {
+header {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 
-  header {
-    line-height: 1em;
-    // the container of h1
-    div.title-container {
-      padding-right: 5px;
-      padding-left: 5px;
-      margin-right: auto;
-    }
-
-    h1 {
-      @include variable-font-size(28px);
-      line-height: 1.1em;
-    }
-
-    // affix
-    &.affix {
-      top: 0;
-      left: 0;
-      z-index: 15; // over the .sidebar
-      width: 100%;
-      padding: 2px 20px;
-      box-shadow: 0 0px 2px #999;
+  line-height: 1em;
+  // the container of h1
+  div.title-container {
+    padding-right: 5px;
+    padding-left: 5px;
+    margin-right: auto;
+  }
 
-      h1 {
-        @include variable-font-size(20px);
-      }
-    }
+  h1 {
+    @include variable-font-size(28px);
+    line-height: 1.1em;
   }
 }
 

src/client/styles/scss/_layout_growi.scss

@@ -19,11 +19,10 @@
   }
 
   .revision-toc {
-    &.affix {
-      top: calc(46px + 5px);
-      min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
-      margin-top: 5px;
-    }
+    position: sticky;
+    top: calc(46px + 5px);
+    min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
+    margin-top: 5px;
 
     .revision-toc-content {
       padding: 0;

src/client/styles/scss/_layout_kibela.scss

@@ -101,12 +101,11 @@ body.kibela {
   }
 
   .revision-toc {
-    &.affix {
-      top: calc(60px + 5px);
-      right: 10rem;
-      min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
-      margin-top: 40px;
-    }
+    position: sticky;
+    top: calc(60px + 5px);
+    right: 10rem;
+    min-width: calc(#{100 / 12 * 2%} - #{$grid-gutter-width}); // width of 2column - padding
+    margin-top: 40px;
 
     .revision-toc-content {
       padding: 0;
@@ -160,12 +159,6 @@ body.kibela {
     }
   }
 
-  /* user page */
-  .header-wrap {
-    padding: 0px;
-    margin-left: 2em;
-  }
-
   /* edit */
   .CodeMirror {
     border: solid 1.2px #d8d8d8;

src/client/styles/scss/_page.scss

@@ -2,8 +2,6 @@
 @import '~diff2html/bundles/css/diff2html.min.css';
 
 .main-container {
-  // padding controll of .header-wrap and .content-main are moved to _layout and _form
-
   .url-line {
     font-size: 1rem;
     color: #999;
@@ -48,7 +46,6 @@
 .main .content-main .revision-history {
   .revision-history-list {
     .revision-history-outer {
-
       // add border-top except of first element
       &:not(:first-of-type) {
         border-top: 1px solid $border;

src/client/styles/scss/_page_growi.scss

@@ -1,23 +1,5 @@
 .growi {
   header {
-    div.title-logo-container {
-      display: none; // hide in default
-
-      a {
-        // centering
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 32px;
-        height: 32px;
-
-        img {
-          width: 16px;
-          height: 16px;
-        }
-      }
-    }
-
     ul.authors {
       padding-left: 1.5em;
       margin: 0;
@@ -39,29 +21,4 @@
       }
     }
   }
-
-  /*
-   * affix header
-   */
-  header:not(.affix) {
-    .only-affix {
-      display: none !important;
-    }
-  }
-  header.affix {
-    .not-affix {
-      display: none !important;
-    }
-
-    // show logo link
-    div.title-logo-container {
-      display: unset;
-      margin-right: 6px;
-      margin-left: -12px;
-    }
-    // hide authors in affix
-    .authors {
-      padding-left: 0.5em;
-    }
-  }
 }

src/client/styles/scss/_search.scss

@@ -180,11 +180,9 @@
 
 .search-page-input {
   position: sticky;
-  top: 0;
+  top: 15px;
   z-index: 1;
 
-  // for sticky layout
-  padding-top: 15px;
   margin-bottom: 15px;
 
   .input-group-btn .btn {

src/client/styles/scss/_user_growi.scss

@@ -7,8 +7,7 @@
   }
 
   .revision-toc {
-    &.affix {
-      top: 105px;
-    }
+    position: sticky;
+    top: 105px;
   }
 }

src/server/views/admin/Users_reserve.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('User_Management')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('User_Management') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('User_Management') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/app.html

@@ -6,11 +6,9 @@
 {% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('App settings') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('App settings') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/customize.html

@@ -13,11 +13,9 @@
 {% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('Customize') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('Customize') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/export.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Export Archive Data')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('Export Archive Data') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('Export Archive Data') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/external-accounts.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('external_account_management')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('User_Management') }} / {{ t('external_account_management') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('User_Management') }} / {{ t('external_account_management') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/global-notification-detail.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Notification settings')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('Notification settings') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('Notification settings') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/importer.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Import Data')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('Import Data') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('Import Data') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/index.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Management Wiki Home')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title"> {{ t('Management Wiki Home') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title"> {{ t('Management Wiki Home') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/markdown.html

@@ -4,11 +4,9 @@
  · {{ path }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('Markdown Settings') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('Markdown Settings') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/notification.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Notification settings')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('Notification settings') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('Notification settings') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/search.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Full Text Search management')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('Full Text Search management') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('Full Text Search management') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/security.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('security_settings')) }} · {% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('security_settings') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('security_settings') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/user-group-detail.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('UserGroup Management') + '/' + userGroup.name) | preventXss }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('UserGroup Management') + '/' + userGroup.name | preventXss }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('UserGroup Management') + '/' + userGroup.name | preventXss }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/user-groups.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('UserGroup Management')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('UserGroup Management') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('UserGroup Management') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/admin/users.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('User_Management')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('User_Management') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="admin-title" class="title">{{ t('User_Management') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

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

@@ -5,19 +5,16 @@
   {% block content_header_before %}
   {% endblock %}
 
-  <div class="header-wrap">
-    <header id="page-header">
+  <header id="page-header">
+    <div>
       <div>
-        <div>
-          <h1 class="title" id="revision-path"></h1>
-          {% if page and not forbidden and not isTrashPage() %}
-            <div id="tag-label"></div>
-          {% endif %}
-        </div>
+        <h1 class="title" id="revision-path"></h1>
+        {% if page and not forbidden and not isTrashPage() %}
+          <div id="tag-label"></div>
+        {% endif %}
       </div>
-
-    </header>
-  </div>
+    </div>
+  </header>
 
   {% block content_header_after %}
   {% endblock %}

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

@@ -5,19 +5,16 @@
   {% block content_header_before %}
   {% endblock %}
 
-  <div class="header-wrap">
-    <header id="page-header">
+  <header id="page-header">
+    <div>
       <div>
-        <div>
-          <h1 class="title" id="revision-path"></h1>
-          {% if page and not forbidden and not isTrashPage() %}
-            <div id="tag-label"></div>
-          {% endif %}
-        </div>
+        <h1 class="title" id="revision-path"></h1>
+        {% if page and not forbidden and not isTrashPage() %}
+          <div id="tag-label"></div>
+        {% endif %}
       </div>
-
-    </header>
-  </div>
+    </div>
+  </header>
 
   {% block content_header_after %}
   {% endblock %}

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

@@ -5,19 +5,16 @@
   {% block content_header_before %}
   {% endblock %}
 
-  <div class="header-wrap">
-    <header id="page-header">
+  <header id="page-header">
+    <div>
       <div>
-        <div>
-          <h1 class="title" id="revision-path"></h1>
-          {% if not forbidden and not isTrashPage() %}
-            <div id="tag-label"></div>
-          {% endif %}
-        </div>
+        <h1 class="title" id="revision-path"></h1>
+        {% if not forbidden and not isTrashPage() %}
+          <div id="tag-label"></div>
+        {% endif %}
       </div>
-
-    </header>
-  </div>
+    </div>
+  </header>
 
   {% block content_header_after %}
   {% endblock %}

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

@@ -6,19 +6,17 @@
   {% block content_header_before %}
   {% endblock %}
 
-  <div class="header-wrap">
-    <header id="page-header">
-      <div class="d-flex align-items-center">
-        <div class="title-container">
-          <h1 class="title" id="revision-path"></h1>
-          {% if page and not forbidden and not isTrashPage() %}
-            <div id="tag-label"></div>
-          {% endif %}
-        </div>
-        {% include '../widget/header-buttons.html' %}
+  <header id="page-header">
+    <div class="d-flex align-items-center">
+      <div class="title-container">
+        <h1 class="title" id="revision-path"></h1>
+        {% if page and not forbidden and not isTrashPage() %}
+          <div id="tag-label"></div>
+        {% endif %}
       </div>
-    </header>
-  </div>
+      {% include '../widget/header-buttons.html' %}
+    </div>
+  </header>
 
   {% block content_header_after %}
   {% endblock %}

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

@@ -11,21 +11,19 @@
 {% block content_header_before %}
 {% endblock %}
 
-<div class="header-wrap">
-  <header id="page-header" class="{% if page %}has-page{% endif %}">
-
-    <div class="d-flex align-items-center">
-      <div class="title-container">
-        <h1 class="title" id="revision-path"></h1>
-        {% if page and not forbidden and not isTrashPage() %}
-          <div id="tag-label"></div>
-        {% endif %}
-      </div>
-      {% include '../widget/header-buttons.html' %}
+<header id="page-header" class="{% if page %}has-page{% endif %}">
+
+  <div class="d-flex align-items-center">
+    <div class="title-container">
+      <h1 class="title" id="revision-path"></h1>
+      {% if page and not forbidden and not isTrashPage() %}
+        <div id="tag-label"></div>
+      {% endif %}
     </div>
+    {% include '../widget/header-buttons.html' %}
+  </div>
 
-  </header>
-</div>
+</header>
 
 {% endblock %}
 

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

@@ -27,7 +27,7 @@
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       {% include './widget/liker-and-seenusers.html' %}
-      <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="123">
+      <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- #}

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

@@ -27,7 +27,7 @@
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       {% include './widget/liker-and-seenusers.html' %}
-      <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="123">
+      <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- #}

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

@@ -51,7 +51,7 @@
           <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
         </span>
       </div>
-      <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="116">
+      <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="116">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
     </div> {# /.col- #}

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

@@ -1,70 +1,47 @@
-<div class="header-wrap">
-  <header id="page-header">
+<header id="page-header">
 
-    <div class="d-flex align-items-center">
-      <div class="title-logo-container hidden-xs hidden-sm">
-        <a class="logo" href="/">
-          <div class="logo-mark">{% include '../../widget/logo.html' %}</div>
-        </a>
-      </div><!-- /.title-logo-container -->
+  <div class="d-flex align-items-center">
 
-      <div class="title-container mr-auto">
-        <h1 class="title" id="revision-path"></h1>
-        {% if not forbidden and not isTrashPage() %}
-          <div id="tag-label"></div>
-        {% endif %}
-      </div><!-- /.title-container -->
-      {% if page %}
-      {% include '../../widget/header-buttons.html' %}
+    <div class="title-container mr-auto">
+      <h1 class="title" id="revision-path"></h1>
+      {% if not forbidden and not isTrashPage() %}
+        <div id="tag-label"></div>
+      {% endif %}
+    </div><!-- /.title-container -->
+    {% if page %}
+    {% include '../../widget/header-buttons.html' %}
 
-      <ul class="authors hidden-sm hidden-xs text-nowrap">
-        <li>
-          <div class="d-flex align-items-center not-affix">
-            <a class="mr-2" href="{{ userPageRoot(page.creator) }}" data-toggle="tooltip" data-placement="bottom" title="{{ page.creator.name|default(author.name) }}">
-              <img src="{{ page.creator|default(author)|picture }}" class="picture rounded-circle">
-            </a>
-            <div>
-              <div>Created by <a href="{{ userPageRoot(page.creator) }}">{{ page.creator.name|default(author.name) }}</a></div>
-              <div class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</div>
-            </div>
-          </div>
-          <div class="d-flex align-items-center only-affix">
-            <a class="mr-2" href="{{ userPageRoot(page.creator) }}" data-toggle="tooltip" data-placement="bottom" title="{{ page.creator.name|default(author.name) }}">
-              <img src="{{ page.creator|default(author)|picture }}" class="picture picture-xs rounded-circle">
-            </a>
-            <div class="ml-auto">
-              <div>Created in <span class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</span></div>
-            </div>
+    <ul class="authors hidden-sm hidden-xs text-nowrap">
+      <li>
+        <div class="d-flex align-items-center">
+          <a class="mr-2" href="{{ userPageRoot(page.creator) }}" data-toggle="tooltip" data-placement="bottom" title="{{ page.creator.name|default(author.name) }}">
+            <img src="{{ page.creator|default(author)|picture }}" class="picture rounded-circle">
+          </a>
+          <div>
+            <div>Created by <a href="{{ userPageRoot(page.creator) }}">{{ page.creator.name|default(author.name) }}</a></div>
+            <div class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</div>
           </div>
-        </li>
-        <li class="mt-1">
-          <div class="d-flex align-items-center not-affix">
-            <a class="mr-2" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
-              <img src="{{ author|picture }}" class="picture rounded-circle">
-            </a>
-            <div>
-              <div>Updated by <a href="{{ userPageRoot(page.revision.author) }}">{{ author.name }}</a></div>
-              <div class="text-muted"">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</div>
-            </div>
+        </div>
+      </li>
+      <li class="mt-1">
+        <div class="d-flex align-items-center">
+          <a class="mr-2" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
+            <img src="{{ author|picture }}" class="picture rounded-circle">
+          </a>
+          <div>
+            <div>Updated by <a href="{{ userPageRoot(page.revision.author) }}">{{ author.name }}</a></div>
+            <div class="text-muted"">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</div>
           </div>
-          <div class="d-flex align-items-center only-affix">
-            <a class="mr-2" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
-              <img src="{{ author|picture }}" class="picture picture-xs rounded-circle">
-            </a>
-            <div class="ml-auto">
-              <div>Updated in <span class="text-muted"">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</span></div>
-            </div>
-          </div>
-        </li>
-      </ul><!-- /.authors -->
-      {% endif %}
+        </div>
+      </li>
+    </ul><!-- /.authors -->
+    {% endif %}
 
-      {% 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 %}
+    {% 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 %}
-    </div>
+    {% endif %}
+  </div>
 
-  </header>
-</div><!-- / .header-wrap -->
+</header>

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

@@ -23,7 +23,7 @@
 
   </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 affix" data-spy="" data-offset-top="80">
+    <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- #}

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

@@ -28,7 +28,7 @@
 
     {# 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 affix" data-spy="" data-offset-top="80">
+      <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- #}

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

@@ -44,7 +44,7 @@
 
     {# 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 affix" data-spy="" data-offset-top="75">
+      <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- #}

src/server/views/me/api_token.html

@@ -5,11 +5,9 @@
 
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
+<header id="page-header">
   <h1 id="admin-title" class="title">{{ t('API Settings') }}</h1>
-  </header>
-</div>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/me/external-accounts.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('user_management.external_account')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="mypage-title" class="title">{{ t('user_management.external_account') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="mypage-title" class="title">{{ t('user_management.external_account') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/me/index.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('User Settings')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="mypage-title" class="title">{{ t('User Settings') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="mypage-title" class="title">{{ t('User Settings') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/me/password.html

@@ -3,11 +3,9 @@
 {% block html_title %}{{ customizeService.generateCustomTitle(t('Password Settings')) }}{% endblock %}
 
 {% block content_header %}
-<div class="header-wrap">
-  <header id="page-header">
-    <h1 id="mypage-title" class="title">{{ t('Password Settings') }}</h1>
-  </header>
-</div>
+<header id="page-header">
+  <h1 id="mypage-title" class="title">{{ t('Password Settings') }}</h1>
+</header>
 {% endblock %}
 
 {% block content_main %}

src/server/views/tags.html

@@ -5,11 +5,9 @@
   <div class="row grw-subnav">
     <div class="col-xs-12 grw-title-bar">
       {% block content_header %}
-      <div class="header-wrap">
-        <header id="page-header">
-          <h1 id="admin-title" class="title">{{ t('Tags') }}</h1>
-        </header>
-      </div>
+      <header id="page-header">
+        <h1 id="admin-title" class="title">{{ t('Tags') }}</h1>
+      </header>
       {% endblock %}
     </div>
   </div>

src/server/views/widget/user_page_header.html

@@ -1,36 +1,34 @@
-<div class="header-wrap">
-  <header id="page-header" class="user-page-header">
+<header id="page-header" class="user-page-header">
 
-    <h4 id="revision-path"></h4>
+  <h4 id="revision-path"></h4>
 
-    <div class="users-info d-flex align-items-center">
-      <img src="{{ pageUser|picture }}" class="picture rounded-circle">
-      <div class="users-meta" style="flex: 1;">
-        <div class="d-flex align-items-center">
-          <h1>
-            {{ pageUser.name }}
-          </h1>
-        </div>
-        <div class="user-page-meta">
-          <ul>
-            <li class="user-page-username"><i class="icon-user"></i> {{ pageUser.username }}</li>
-            <li class="user-page-email">
-              <i class="icon-envelope"></i>
-              {% if pageUser.isEmailPublished %}
-                {{ pageUser.email }}
-              {% else %}
-                *****
-              {% endif %}
-            </li>
-            {% if pageUser.introduction %}
-            <li class="user-page-introduction"><p>{{ pageUser.introduction|nl2br }}</p></li>
-            {% endif %}
-          </ul>
-        </div>
+  <div class="users-info d-flex align-items-center">
+    <img src="{{ pageUser|picture }}" class="picture rounded-circle">
+    <div class="users-meta" style="flex: 1;">
+      <div class="d-flex align-items-center">
+        <h1>
+          {{ pageUser.name }}
+        </h1>
       </div>
-      <div class="d-flex">
-        {% include 'header-buttons-lg.html' %}
+      <div class="user-page-meta">
+        <ul>
+          <li class="user-page-username"><i class="icon-user"></i> {{ pageUser.username }}</li>
+          <li class="user-page-email">
+            <i class="icon-envelope"></i>
+            {% if pageUser.isEmailPublished %}
+              {{ pageUser.email }}
+            {% else %}
+              *****
+            {% endif %}
+          </li>
+          {% if pageUser.introduction %}
+          <li class="user-page-introduction"><p>{{ pageUser.introduction|nl2br }}</p></li>
+          {% endif %}
+        </ul>
       </div>
     </div>
-  </header>
-</div>
+    <div class="d-flex">
+      {% include 'header-buttons-lg.html' %}
+    </div>
+  </div>
+</header>