use isCompactMode

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

@@ -13,8 +13,6 @@ import LikeButton from '../LikeButton';
 import BookmarkButton from '../BookmarkButton';
 import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
-import ReducedPageCreator from './ReducedPageCreator';
-import ReducedRevisionAuthor from './ReducedRevisionAuthor';
 
 const GrowiSubNavigation = (props) => {
   const isPageForbidden = document.querySelector('#grw-subnav').getAttribute('data-is-forbidden-page');
@@ -22,10 +20,7 @@ const GrowiSubNavigation = (props) => {
   const {
     path, createdAt, creator, updatedAt, revisionAuthor,
   } = pageContainer.state;
-  const isTopBarVisible = window.addEventListener('scroll', () => {
-    console.log(window.pageYOffset);
-    return window.pageYOffset > 122;
-  });
+  const isCompactMode = true;
   // Display only the RevisionPath if the page is trash or forbidden
   if (isTrashPage(path) || isPageForbidden) {
     return (
@@ -39,8 +34,8 @@ const GrowiSubNavigation = (props) => {
     );
   }
 
-  return (
-    <div>
+  if (isCompactMode) {
+    return (
       <div className="d-flex align-items-center fixed-top grw-compact-subnavbar px-3">
 
         {/* Page Path */}
@@ -61,34 +56,36 @@ const GrowiSubNavigation = (props) => {
 
         {/* Page Authors */}
         <ul className="authors text-nowrap d-none d-lg-block">
-          {creator != null && <li><ReducedPageCreator creator={creator} createdAt={createdAt} /></li>}
-          {revisionAuthor != null && <li className="mt-1"><ReducedRevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
+          {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} /></li>}
+          {revisionAuthor != null && <li className="mt-1"><RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
         </ul>
 
       </div>
-      <div className="d-flex align-items-center">
-        {/* Page Path */}
-        <div className="title-container mr-auto">
-          <h1>
-            <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />
-          </h1>
-          <TagLabels />
-        </div>
-
-        {/* Header Button */}
-        <div className="ml-1">
-          <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />
-        </div>
-        <div>
-          <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />
-        </div>
+    );
+  }
+  return (
+    <div className="d-flex align-items-center">
+      {/* Page Path */}
+      <div className="title-container mr-auto">
+        <h1>
+          <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />
+        </h1>
+        <TagLabels />
+      </div>
 
-        {/* Page Authors */}
-        <ul className="authors text-nowrap d-none d-lg-block">
-          {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} /></li>}
-          {revisionAuthor != null && <li className="mt-1"><RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
-        </ul>
+      {/* Header Button */}
+      <div className="ml-1">
+        <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />
+      </div>
+      <div>
+        <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />
       </div>
+
+      {/* Page Authors */}
+      <ul className="authors text-nowrap d-none d-lg-block">
+        {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} /></li>}
+        {revisionAuthor != null && <li className="mt-1"><RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
+      </ul>
     </div>
   );
 };

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

@@ -6,7 +6,20 @@ import { userPageRoot } from '../../../../lib/util/path-utils';
 
 const PageCreator = (props) => {
   const { creator, createdAt } = props;
+  const isCompactMode = true;
 
+  if (isCompactMode) {
+    return (
+      <div className="d-flex align-items-center">
+        <div className="mr-2" href={userPageRoot(creator)} data-toggle="tooltip" data-placement="bottom" title={creator.name}>
+          <UserPicture user={creator} size="xs" />
+        </div>
+        <div>
+          Created in <span className="text-muted">{createdAt}</span>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="d-flex align-items-center">
       <div className="mr-2" href={userPageRoot(creator)} data-toggle="tooltip" data-placement="bottom" title={creator.name}>

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import UserPicture from '../User/UserPicture';
-import { userPageRoot } from '../../../../lib/util/path-utils';
-
-const ReducedPageCreator = (props) => {
-  const { creator, createdAt } = props;
-
-  return (
-    <div className="d-flex align-items-center">
-      <div className="mr-2" href={userPageRoot(creator)} data-toggle="tooltip" data-placement="bottom" title={creator.name}>
-        <UserPicture user={creator} size="xs" />
-      </div>
-      <div>
-        Created in <span className="text-muted">{createdAt}</span>
-      </div>
-    </div>
-  );
-};
-
-ReducedPageCreator.propTypes = {
-  creator: PropTypes.object.isRequired,
-  createdAt: PropTypes.string.isRequired,
-};
-
-
-export default ReducedPageCreator;

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import UserPicture from '../User/UserPicture';
-import { userPageRoot } from '../../../../lib/util/path-utils';
-
-const ReducedRevisionAuthor = (props) => {
-  const { revisionAuthor, updatedAt } = props;
-
-  return (
-    <div className="d-flex align-items-center">
-      <div className="mr-2" href={userPageRoot(revisionAuthor)} data-toggle="tooltip" data-placement="bottom" title={revisionAuthor.name}>
-        <UserPicture user={revisionAuthor} size="xs" />
-      </div>
-      <div>
-        Updated in <span className="text-muted">{updatedAt}</span>
-      </div>
-    </div>
-  );
-};
-
-ReducedRevisionAuthor.propTypes = {
-
-  revisionAuthor: PropTypes.object.isRequired,
-  updatedAt: PropTypes.string.isRequired,
-};
-
-
-export default ReducedRevisionAuthor;

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

@@ -6,7 +6,19 @@ import { userPageRoot } from '../../../../lib/util/path-utils';
 
 const RevisionAuthor = (props) => {
   const { revisionAuthor, updatedAt } = props;
-
+  const isCompactMode = true;
+  if (isCompactMode) {
+    return (
+      <div className="d-flex align-items-center">
+        <div className="mr-2" href={userPageRoot(revisionAuthor)} data-toggle="tooltip" data-placement="bottom" title={revisionAuthor.name}>
+          <UserPicture user={revisionAuthor} size="xs" />
+        </div>
+        <div>
+          Updated in <span className="text-muted">{updatedAt}</span>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="d-flex align-items-center">
       <div className="mr-2" href={userPageRoot(revisionAuthor)} data-toggle="tooltip" data-placement="bottom" title={revisionAuthor.name}>