fix grw-subnav structure

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

@@ -25,46 +25,46 @@ const GrowiSubNavigation = (props) => {
   // Display only the RevisionPath if the page is trash or forbidden
   if (isTrashPage(path) || isPageForbidden) {
     return (
-      <div className="d-flex align-items-center">
-        <div className="title-container mr-auto">
-          <h1>
-            <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
-          </h1>
-        </div>
+      <div className="d-flex align-items-center px-3 py-3">
+        <h1 className="m-0">
+          <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
+        </h1>
       </div>
     );
   }
 
   return (
-    <div className={`d-flex px-3 py-1 align-items-center ${compactClassName}`}>
+    <div className={`d-flex align-items-center justify-content-between px-3 py-1 ${compactClassName}`}>
 
       {/* Page Path */}
-      <div className="title-container mr-auto">
-        <h1>
+      <div>
+        <h1 className="m-0">
           <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
         </h1>
         <TagLabels />
       </div>
 
-      {/* Header Button */}
-      <div className="mr-2">
-        <LikeButton pageId={pageId} isLiked={pageContainer.state.isLiked} />
-      </div>
-      <div>
-        <BookmarkButton pageId={pageId} crowi={appContainer} />
-      </div>
+      <div className="d-flex align-items-center">
+        {/* Header Button */}
+        <div className="mr-2">
+          <LikeButton pageId={pageId} isLiked={pageContainer.state.isLiked} />
+        </div>
+        <div>
+          <BookmarkButton pageId={pageId} crowi={appContainer} />
+        </div>
 
-      {/* 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>
-          )
-        }
-      </ul>
+        {/* 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>
+            )
+          }
+        </ul>
+      </div>
 
     </div>
   );

src/client/styles/scss/_subnav.scss

@@ -1,19 +1,34 @@
-.grw-subnav-container {
-  h1 {
-    @include variable-font-size(28px);
-    line-height: 1.1em;
+body:not(.admin-page) {
+  /*
+   * layout for sticky
+   */
+  .grw-header {
+    pointer-events: none; // disable pointer events for sticky
+
+    .grw-subnav {
+      overflow: unset;
+      pointer-events: all; // enable pointer events
+    }
   }
 
-  &:hover {
-    .btn-copy,
-    .btn-edit,
-    .btn-edit-tags {
-      // change button opacity
-      opacity: unset;
+  /*
+   * styles
+   */
+  .grw-header {
+    &:hover {
+      .btn-copy,
+      .btn-edit,
+      .btn-edit-tags {
+        // change button opacity
+        opacity: unset;
+      }
     }
   }
-}
 
-.grw-subnav {
-  overflow: unset;
+  .grw-subnav {
+    h1 {
+      @include variable-font-size(28px);
+      line-height: 1.1em;
+    }
+  }
 }

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

@@ -85,8 +85,8 @@ $link-hover-color: $color-link-hover;
   }
 }
 
-body.admin-page {
-  .grw-subnav-container {
+.admin-page {
+  .grw-header {
     background: darken($bgcolor-global, 2%);
   }
 }

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

@@ -31,7 +31,7 @@
   </aside>
 
   <div class="row grw-subnav">
-    <div class="col-md-9 grw-subnav-container">
+    <div class="col-md-9">
       {% block content_header %}
       {% endblock %}
     </div>

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

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

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

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

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

@@ -1,4 +1,4 @@
-<div id="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
+<div id="grw-subnav" class="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
 
 {% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
   {% if '/' === path.slice(-1) %}

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="user-page-header" data-page-user="{{ pageUser|json }}"></header>
+    <header id="grw-subnav-for-user-page" class="grw- subnav user-page-header" data-page-user="{{ pageUser|json }}"></header>
   {% else %}
     {% parent %}
   {% endif %}

src/server/views/tags.html

@@ -3,7 +3,7 @@
 {% block layout_main %}
 <div class="container-fluid">
   <div class="row grw-subnav">
-    <div class="col-xs-12 grw-subnav-container">
+    <div class="col-xs-12">
       {% block content_header %}
       <header id="page-header">
         <h1 id="admin-title" class="title">{{ t('Tags') }}</h1>