adjust .grow-subnavbar styles and transition

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

@@ -18,9 +18,8 @@ const GrowiSubNavigation = (props) => {
   const isPageForbidden = document.querySelector('#grw-subnav').getAttribute('data-is-forbidden-page');
   const { appContainer, pageContainer } = props;
   const {
-    pageId, path, createdAt, creator, updatedAt, revisionAuthor, isCompactMode,
+    pageId, path, createdAt, creator, updatedAt, revisionAuthor, isHeaderSticky, isSubnavCompact,
   } = pageContainer.state;
-  const compactClassName = isCompactMode ? 'grw-compact-subnavbar' : null;
 
   // Display only the RevisionPath if the page is trash or forbidden
   if (isTrashPage(path) || isPageForbidden) {
@@ -33,8 +32,16 @@ const GrowiSubNavigation = (props) => {
     );
   }
 
+  const additionalClassNames = [];
+  if (isHeaderSticky) {
+    additionalClassNames.push('grw-subnavbar-sticky');
+  }
+  if (isSubnavCompact) {
+    additionalClassNames.push('grw-subnavbar-compact');
+  }
+
   return (
-    <div className={`d-flex align-items-center justify-content-between px-3 py-1 ${compactClassName}`}>
+    <div className={`d-flex align-items-center justify-content-between px-3 py-1 grw-subnavbar ${additionalClassNames.join(' ')}`}>
 
       {/* Page Path */}
       <div>
@@ -55,14 +62,16 @@ const GrowiSubNavigation = (props) => {
 
         {/* Page Authors */}
         <ul className="authors text-nowrap d-none d-lg-block">
-          {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} isCompactMode={isCompactMode} /></li>}
-          { revisionAuthor != null
-            && (
-              <li className="mt-1">
-                <RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} isCompactMode={isCompactMode} />
-              </li>
-            )
-          }
+          { creator != null && (
+            <li>
+              <PageCreator creator={creator} createdAt={createdAt} isCompactMode={isSubnavCompact} />
+            </li>
+          ) }
+          { revisionAuthor != null && (
+            <li className="mt-1">
+              <RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} isCompactMode={isSubnavCompact} />
+            </li>
+          ) }
         </ul>
       </div>
 

src/client/js/services/PageContainer.js

@@ -8,7 +8,8 @@ import * as toastr from 'toastr';
 import { throttle } from 'throttle-debounce';
 
 const logger = loggerFactory('growi:services:PageContainer');
-const scrollAmountForFixed = 50;
+const scrollThresForSticky = 50;
+const scrollThresForCompact = 100;
 
 /**
  * Service container related to Page
@@ -58,7 +59,9 @@ export default class PageContainer extends Container {
       pageIdOnHackmd: mainContent.getAttribute('data-page-id-on-hackmd') || null,
       hasDraftOnHackmd: !!mainContent.getAttribute('data-page-has-draft-on-hackmd'),
       isHackmdDraftUpdatingInRealtime: false,
-      isCompactMode: false,
+
+      isHeaderSticky: false,
+      isSubnavCompact: false,
     };
 
     this.initStateMarkdown();
@@ -69,8 +72,13 @@ export default class PageContainer extends Container {
     this.addWebSocketEventHandlers = this.addWebSocketEventHandlers.bind(this);
     this.addWebSocketEventHandlers();
 
-    window.addEventListener('scroll', throttle(300, () => {
-      this.setState({ isCompactMode: window.pageYOffset > scrollAmountForFixed });
+    window.addEventListener('scroll', throttle(150, () => {
+      const currentYOffset = window.pageYOffset;
+
+      this.setState({
+        isHeaderSticky: scrollThresForSticky < currentYOffset,
+        isSubnavCompact: scrollThresForCompact < currentYOffset,
+      });
     }));
   }
 

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

@@ -72,8 +72,8 @@ body.on-edit {
     }
   }
 
-  // show compact subnav
-  .grw-compact-subnav {
+  // show revision path
+  .grw-revision-path-for-edit {
     display: block !important;
   }
 

src/client/styles/scss/_page_growi.scss

@@ -1,41 +0,0 @@
-.growi {
-  header {
-    // Adjust to be on top of the growi subnavigation
-    z-index: $zindex-sticky - 100;
-    ul.authors {
-      padding-left: 1.5em;
-      margin: 0;
-
-      li {
-        font-size: 12px;
-        list-style: none;
-      }
-
-      .picture {
-        width: 22px;
-        height: 22px;
-        border: 1px solid #ccc;
-
-        &.picture-xs {
-          width: 14px;
-          height: 14px;
-        }
-      }
-    }
-    .grw-compact-subnavbar {
-      h2 {
-        font-size: 20px;
-        line-height: 1.1em;
-        @include media-breakpoint-down(md) {
-          font-size: 18px;
-        }
-        @include media-breakpoint-down(sm) {
-          font-size: 14px;
-        }
-        @include media-breakpoint-down(xs) {
-          font-size: 12px;
-        }
-      }
-    }
-  }
-}

src/client/styles/scss/_subnav.scss

@@ -3,6 +3,10 @@ body:not(.admin-page) {
    * layout for sticky
    */
   .grw-header {
+    // Adjust to be on top of the growi subnavigation
+    z-index: $zindex-sticky - 100;
+
+    height: 80px;
     pointer-events: none; // disable pointer events for sticky
 
     .grw-subnav {
@@ -11,10 +15,35 @@ body:not(.admin-page) {
     }
   }
 
+  /*
+   * Compact Mode Switching
+   */
+  .grw-subnavbar {
+    transition: background-color, box-shadow 400ms linear;
+
+    h1 {
+      line-height: 1.1em;
+
+      // set transition-duration (compact -> normal)
+      transition: font-size 0;
+
+      @include variable-font-size(28px);
+    }
+
+    &.grw-subnavbar-compact {
+      h1 {
+        // set transition-duration (normal -> compact)
+        transition: font-size 300ms cubic-bezier(0.65, 0, 0.35, 1);
+
+        @include variable-font-size(18px);
+      }
+    }
+  }
+
   /*
    * styles
    */
-  .grw-header {
+  .grw-subnavbar {
     &:hover {
       .btn-copy,
       .btn-edit,
@@ -23,12 +52,26 @@ body:not(.admin-page) {
         opacity: unset;
       }
     }
-  }
 
-  .grw-subnav {
-    h1 {
-      @include variable-font-size(28px);
-      line-height: 1.1em;
+    ul.authors {
+      padding-left: 1.5em;
+      margin: 0;
+
+      li {
+        font-size: 12px;
+        list-style: none;
+      }
+
+      .picture {
+        width: 22px;
+        height: 22px;
+        border: 1px solid #ccc;
+
+        &.picture-xs {
+          width: 14px;
+          height: 14px;
+        }
+      }
     }
   }
 }

src/client/styles/scss/style-app.scss

@@ -47,7 +47,6 @@
 @import 'on-edit';
 @import 'page_list';
 @import 'page';
-@import 'page_growi';
 @import 'search';
 @import 'shortcuts';
 @import 'subnav';

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

@@ -139,9 +139,9 @@ header.affix {
 /*
  * GROWI subnavigation
  */
-.grw-compact-subnavbar {
+.grw-subnavbar-sticky {
   background-color: rgba(darken($bgcolor-global, 90%), 0.9);
-  box-shadow: 0 0 2px darken($bgcolor-global, 5%);
+  box-shadow: 0 3px 2px -2px darken($bgcolor-global, 5%);
 }
 
 /*

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

@@ -35,9 +35,9 @@ header.affix {
 /*
  * GROWI subnavigation
  */
-.grw-compact-subnavbar {
+.grw-subnavbar-sticky {
   background-color: rgba(darken($bgcolor-global, 6%), 0.9);
-  box-shadow: 0 0 2px darken($bgcolor-global, 40%);
+  box-shadow: 0 3px 2px -2px darken($bgcolor-global, 40%);
 }
 
 /*

src/server/views/widget/page_tabs.html

@@ -11,31 +11,33 @@
   </li>
 
   {% if !isTrashPage() %}
-  <li class="nav-item grw-main-nav-item-left grw-nav-item-edit">
-    <a
-      {% if user %} href="#edit" data-toggle="tab" class="nav-link edit-button" {% endif %}
-      {% if not user %}
-        class="edit-button edit-button-disabled"
-        data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-      {% endif %}
-    >
-      <i class="icon-note"></i> {{ t('Edit') }}
-    </a>
-  </li>
-  {% if isHackmdSetup() %}
-  <li class="nav-item grw-main-nav-item-left grw-nav-tab-hackmd">
-    <a
-      {% if user %} href="#hackmd" data-toggle="tab" class="nav-link edit-button" {% endif %}
-      {% if not user %}
-        class="edit-button edit-button-disabled"
-        data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-      {% endif %}
-    >
-      <i class="fa fa-file-text-o"></i> {{ t('HackMD') }}
-    </a>
-  </li>
-  {% endif %}
-    <div class="grw-compact-subnav d-none ml-2">
+    <li class="nav-item grw-main-nav-item-left grw-nav-item-edit">
+      <a
+        {% if user %} href="#edit" data-toggle="tab" class="nav-link edit-button" {% endif %}
+        {% if not user %}
+          class="edit-button edit-button-disabled"
+          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
+        {% endif %}
+      >
+        <i class="icon-note"></i> {{ t('Edit') }}
+      </a>
+    </li>
+
+    {% if isHackmdSetup() %}
+    <li class="nav-item grw-main-nav-item-left grw-nav-tab-hackmd">
+      <a
+        {% if user %} href="#hackmd" data-toggle="tab" class="nav-link edit-button" {% endif %}
+        {% if not user %}
+          class="edit-button edit-button-disabled"
+          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
+        {% endif %}
+      >
+        <i class="fa fa-file-text-o"></i> {{ t('HackMD') }}
+      </a>
+    </li>
+    {% endif %}
+
+    <div class="grw-revision-path-for-edit d-none ml-2">
       <h4 id="revision-path" class="mb-0"></h4>
       <div id="tag-label"></div>
     </div>