impl compact mode

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

@@ -58,9 +58,10 @@ const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
 };
 
 const GrowiSubNavigation = (props) => {
-  const { appContainer, pageContainer } = props;
+  const { appContainer, pageContainer, isCompactMode } = props;
   const {
-    pageId, path, createdAt, creator, updatedAt, revisionAuthor, isForbidden: isPageForbidden,
+    pageId, path, createdAt, creator, updatedAt, revisionAuthor,
+    isForbidden: isPageForbidden,
   } = pageContainer.state;
 
   const isPageNotFound = pageId == null;
@@ -69,20 +70,18 @@ const GrowiSubNavigation = (props) => {
   // Display only the RevisionPath
   if (isPageNotFound || isPageForbidden) {
     return (
-      <div className="grw-subnavbar d-flex align-items-center justify-content-between">
+      <div className="grw-subnav-content d-flex align-items-center justify-content-between">
         <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
       </div>
     );
   }
 
-  const additionalClassNames = [''];
-
   return (
-    <div className={`grw-subnavbar d-flex align-items-center justify-content-between ${additionalClassNames.join(' ')}`}>
+    <div className={`grw-subnav-content d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-content-compact' : ''}`}>
 
       {/* Page Path */}
       <div>
-        { !isPageNotFound && !isPageForbidden && (
+        { !isCompactMode && !isPageNotFound && !isPageForbidden && (
           <div className="mb-2">
             <TagLabels />
           </div>
@@ -108,18 +107,20 @@ const GrowiSubNavigation = (props) => {
         </div>
 
         {/* Page Authors */}
-        <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none">
-          { creator != null && (
-            <li className="pb-1">
-              <PageCreator creator={creator} createdAt={createdAt} />
-            </li>
-          ) }
-          { revisionAuthor != null && (
-            <li className="mt-1 pt-1 border-top">
-              <RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} />
-            </li>
-          ) }
-        </ul>
+        { !isCompactMode && (
+          <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none">
+            { creator != null && (
+              <li className="pb-1">
+                <PageCreator creator={creator} createdAt={createdAt} />
+              </li>
+            ) }
+            { revisionAuthor != null && (
+              <li className="mt-1 pt-1 border-top">
+                <RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} />
+              </li>
+            ) }
+          </ul>
+        ) }
       </div>
 
     </div>

src/client/styles/scss/_subnav.scss

@@ -9,7 +9,7 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  * Styles
  */
 
-.grw-subnavbar {
+.grw-subnav-content {
   min-height: 115px;
   padding: 10px 30px;
 
@@ -66,4 +66,11 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
       }
     }
   }
+
+  /*
+   * Compact Mode
+   */
+  &.grw-subnav-content-compact {
+    min-height: 85px;
+  }
 }

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

@@ -5,7 +5,7 @@ $color-list-hover: $color-global !default;
 $bgcolor-list-hover: lighten($bgcolor-global, 3%) !default;
 $color-list-active: $color-reversal !default;
 $bgcolor-list-active: $primary !default;
-$bgcolor-subnabvar: lighten($bgcolor-global, 3%) !default;
+$bgcolor-subnav: lighten($bgcolor-global, 3%) !default;
 $color-table: white !default;
 $bgcolor-table: #343a40 !default;
 $border-color-table: lighten($bgcolor-table, 7.5%) !default;
@@ -190,8 +190,12 @@ ul.pagination {
 /*
  * GROWI subnavigation
  */
-.grw-subnavbar {
-  background-color: $bgcolor-subnabvar;
+.grw-subnav-content {
+  background-color: $bgcolor-subnav;
+}
+
+.grw-subnav-fixed .grw-subnav-content {
+  background-color: rgba($bgcolor-subnav, 0.85);
 }
 
 // Search drop down

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

@@ -16,10 +16,14 @@ body.kibela {
       background-color: $primary !important;
     }
 
-    .grw-subnavbar {
+    .grw-subnav-content {
       background-color: rgba(lighten($bgcolor-global, 50%), 1);
     }
 
+    .grw-subnav-fixed .grw-subnav-content {
+      background-color: rgba(lighten($bgcolor-global, 50%), 0.85);
+    }
+
     /* kibela block */
     .kibela-border-top {
       border-top: solid 0.4em $thickborder;

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

@@ -5,7 +5,7 @@ $color-list-hover: $color-global !default;
 $bgcolor-list-hover: darken($bgcolor-global, 3%) !default;
 $color-list-active: $color-reversal !default;
 $bgcolor-list-active: $primary !default;
-$bgcolor-subnabvar: darken($bgcolor-global, 3%) !default;
+$bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 $color-table: $color-global !default;
 $bgcolor-table: null !default;
 $border-color-table: #dee2e6 !default;
@@ -122,8 +122,12 @@ $table-hover-bg: $bgcolor-table-hover;
 /*
  * GROWI subnavigation
  */
-.grw-subnavbar {
-  background-color: $bgcolor-subnabvar;
+.grw-subnav-content {
+  background-color: $bgcolor-subnav;
+}
+
+.grw-subnav-fixed .grw-subnav-content {
+  background-color: rgba($bgcolor-subnav, 0.85);
 }
 
 /*

src/client/styles/scss/theme/default.scss

@@ -42,7 +42,7 @@ html[light] {
   // $bgcolor-list-active: $primary; // optional
 
   // Table colors
-  // $bgcolor-subnabvar: #; // optional
+  // $bgcolor-subnav: #; // optional
   // $color-table: #; // optional
   // $bgcolor-table: #; // optional
   // $border-color-table: #; // optional
@@ -74,7 +74,7 @@ html[light] {
   $bgcolor-sidebar-list-group: #fafbff; // optional
 
   // Subnavigation
-  // $bgcolor-subnabvar: #fafafa; // optional
+  // $bgcolor-subnav: #fafafa; // optional
 
   // Tabs
   // $color-nav-tabs-link-active: #; //optional
@@ -165,7 +165,7 @@ html[dark] {
   $bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
-  $bgcolor-subnabvar: lighten($bgcolor-global, 4%); // optional
+  $bgcolor-subnav: lighten($bgcolor-global, 4%); // optional
 
   // Tabs
   $bordercolor-nav-tabs: #444; // optional

src/client/styles/scss/theme/nature.scss

@@ -44,7 +44,7 @@ html[dark] {
   $bgcolor-global: #fdfdfd;
   $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #f1ffe4;
-  $bgcolor-subnabvar: #fafafa;
+  $bgcolor-subnav: #fafafa;
 
   // Font colors
   $color-global: #460039;