organize GrowiSubNavigationForUserPage

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

@@ -43,7 +43,7 @@ const GrowiSubNavigation = (props) => {
     );
   }
 
-  const additionalClassNames = [];
+  const additionalClassNames = ['grw-subnavbar'];
   if (isHeaderSticky) {
     additionalClassNames.push('grw-subnavbar-sticky');
   }
@@ -52,7 +52,7 @@ const GrowiSubNavigation = (props) => {
   }
 
   return (
-    <div className={`d-flex align-items-center justify-content-between px-3 py-1 grw-subnavbar ${additionalClassNames.join(' ')}`}>
+    <div className={`d-flex align-items-center justify-content-between px-3 py-1 ${additionalClassNames.join(' ')}`}>
 
       {/* Page Path */}
       <div>

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

@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
-import { throttle } from 'throttle-debounce';
 
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
@@ -14,55 +13,47 @@ import UserPicture from '../User/UserPicture';
 const GrowiSubNavigationForUserPage = (props) => {
   const pageUser = JSON.parse(document.querySelector('#grw-subnav-for-user-page').getAttribute('data-page-user'));
   const { appContainer, pageContainer } = props;
-  const { pageId } = pageContainer.state;
-  const [isCompactMode, setIsCompactMode] = useState(false);
-  const scrollAmountForFixed = 50;
-  const layoutType = appContainer.getConfig().layoutType;
-
-  useEffect(() => {
-    window.addEventListener('scroll', throttle(300, () => {
-      setIsCompactMode(window.pageYOffset > scrollAmountForFixed);
-    }));
-  }, []);
+  const { pageId, isHeaderSticky, isSubnavCompact } = pageContainer.state;
+
+  const additionalClassNames = ['grw-subnavbar', 'grw-subnavbar-user-page'];
+  if (isHeaderSticky) {
+    additionalClassNames.push('grw-subnavbar-sticky');
+  }
+  if (isSubnavCompact) {
+    additionalClassNames.push('py-2 grw-subnavbar-compact');
+  }
+  else {
+    additionalClassNames.push('py-3');
+  }
 
   return (
-    <div className={`row px-3 py-1 ${(isCompactMode && layoutType === 'growi') && 'grw-compact-subnavbar'}`}>
-
-      <div className="col-12">
-        {/* Page Path */}
-        <h4>
-          <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
-        </h4>
-
-        <div className="d-flex">
-          <div className="users-info d-flex align-items-center mr-auto">
-            <UserPicture user={pageUser} />
-
-            <div className="users-meta">
-              <div className="d-flex align-items-center">
-                <h1>
-                  {pageUser.name}
-                </h1>
-              </div>
-              <div className="user-page-meta">
-                <ul>
-                  <li className="user-page-username"><i className="icon-user mr-1"></i>{pageUser.username}</li>
-                  <li className="user-page-email">
-                    <i className="icon-envelope mr-1"></i>
-                    {pageUser.isEmailPublished ? pageUser.email : '*****'}
-                  </li>
-                  {pageUser.introduction && <li className="user-page-introduction"><p>{pageUser.introduction}</p></li>}
-                </ul>
-              </div>
-            </div>
+    <div className={`px-3 ${additionalClassNames.join(' ')}`}>
+      <h4 className="grw-user-page-path">
+        <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
+      </h4>
+
+      <div className="d-flex align-items-center justify-content-between">
+
+        <div className="users-info d-flex align-items-center">
+          <UserPicture user={pageUser} />
+
+          <div className="users-meta">
+            <h1>
+              {pageUser.name}
+            </h1>
+            <ul className="user-page-meta mt-1 mb-0">
+              <li className="user-page-username"><i className="icon-user mr-1"></i>{pageUser.username}</li>
+              <li className="user-page-email">
+                <i className="icon-envelope mr-1"></i>
+                {pageUser.isEmailPublished ? pageUser.email : '*****'}
+              </li>
+              {pageUser.introduction && <li className="user-page-introduction"><p>{pageUser.introduction}</p></li>}
+            </ul>
           </div>
-
-          {/* Header Button */}
-          <BookmarkButton pageId={pageId} crowi={appContainer} size="lg" />
         </div>
-      </div>
-
 
+        <BookmarkButton pageId={pageId} crowi={appContainer} size="lg" />
+      </div>
     </div>
   );
 

src/client/styles/scss/_subnav.scss

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

src/client/styles/scss/_user.scss

@@ -1,4 +1,49 @@
-.user-page-header {
+$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
+
+@mixin setTransitionForCompactMode() {
+  // set transition-duration (normal -> compact)
+  transition: all 300ms $easeInOutCubic;
+}
+
+.grw-header.grw-header-user-page {
+  height: 150px;
+}
+
+/*
+ * Compact Mode Switching
+ */
+.grw-subnavbar.grw-subnavbar-user-page {
+  &.grw-subnavbar-compact {
+    .grw-user-page-path {
+      margin-bottom: 0;
+      font-size: 14px;
+
+      @include setTransitionForCompactMode();
+    }
+    .picture {
+      width: 62px;
+      height: 62px;
+
+      @include setTransitionForCompactMode();
+    }
+    h1 {
+      font-size: 1.5em;
+      line-height: 30px;
+
+      @include setTransitionForCompactMode();
+    }
+    .users-meta {
+      margin-left: 15px;
+
+      @include setTransitionForCompactMode();
+    }
+  }
+}
+
+/*
+ * Styles
+ */
+.grw-subnavbar-user-page {
   #revision-path {
     margin-bottom: 0;
   }
@@ -14,19 +59,16 @@
   }
 
   .picture {
-    width: 64px;
-    height: 64px;
+    width: 72px;
+    height: 72px;
   }
 
-  .user-page-meta {
+  ul.user-page-meta {
+    padding-left: 0;
     color: #999;
 
-    ul {
-      padding-left: 0;
-
-      li {
-        list-style: none;
-      }
+    li {
+      list-style: none;
     }
 
     .user-page-username {
@@ -55,23 +97,6 @@
   }
 }
 
-// affix
-.user-page-header.affix {
-  .users-meta {
-    margin-left: 15px;
-  }
-
-  h1 {
-    font-size: 1.5em;
-    line-height: 30px;
-  }
-
-  .picture {
-    width: 48px;
-    height: 48px;
-  }
-}
-
 .draft-list-item {
   .icon-container {
     .icon-copy,

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

@@ -7,10 +7,13 @@
 {% endblock %}
 
 {% block layout_main %}
+
+{% block content_header_wrapper %}
 <header class="sticky-top py-0 grw-header">
   {% block content_header %}
   {% endblock %}
 </header>
+{% endblock %}
 
 <div class="container-fluid">
   <div class="row">

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

@@ -5,12 +5,14 @@
   user-page
 {% endblock %}
 
-{% block content_header %}
-  {% if pageUser %}
-    <header id="grw-subnav-for-user-page" class="grw-subnav user-page-header" data-page-user="{{ pageUser|json }}"></header>
-  {% else %}
-    {% parent %}
-  {% endif %}
+{% block content_header_wrapper %}
+  <header class="sticky-top py-0 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 %}
+      {% parent %}
+    {% endif %}
+  </header>
 {% endblock %}
 
 

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

@@ -7,7 +7,7 @@
 
 {% block content_header %}
   {% if pageUser %}
-    <header id="grw-subnav-for-user-page" class="grw- subnav user-page-header" data-page-user="{{ pageUser|json }}"></header>
+    <header id="grw-subnav-for-user-page" class="grw- subnav grw-subnav-user-page" data-page-user="{{ pageUser|json }}"></header>
   {% else %}
     {% parent %}
   {% endif %}