Merge pull request #1973 from weseek/support/apply-bootstrap4

Support/apply bootstrap4

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

@@ -16,7 +16,7 @@ import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
 
 const GrowiSubNavigation = (props) => {
-  const isPageForbidden = document.querySelector('#grw-subnav').getAttribute('data-is-forbidden-page');
+  const isPageForbidden = document.querySelector('#grw-subnav').getAttribute('data-is-forbidden-page') === 'true';
   const { appContainer, pageContainer } = props;
   const {
     pageId, path, createdAt, creator, updatedAt, revisionAuthor, isHeaderSticky, isSubnavCompact,
@@ -25,6 +25,9 @@ const GrowiSubNavigation = (props) => {
   const isPageNotFound = pageId == null;
   const isPageInTrash = isTrashPage(path);
 
+  console.log({
+    isPageForbidden, isPageNotFound, isPageInTrash, pageId, path,
+  });
   // Display only the RevisionPath
   if (isPageNotFound || isPageForbidden || isPageInTrash) {
     return (
@@ -34,9 +37,9 @@ const GrowiSubNavigation = (props) => {
             behaviorType={appContainer.config.behaviorType}
             pageId={pageId}
             pagePath={pageContainer.state.path}
-            isPageNotFound
-            isPageForbidden
-            isPageInTrash
+            isPageNotFound={isPageNotFound}
+            isPageForbidden={isPageForbidden}
+            isPageInTrash={isPageInTrash}
           />
         </h1>
       </div>
@@ -59,7 +62,9 @@ const GrowiSubNavigation = (props) => {
         <h1 className="m-0">
           <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
         </h1>
-        <TagLabels />
+        { !isPageNotFound && !isPageForbidden && (
+          <TagLabels />
+        ) }
       </div>
 
       <div className="d-flex align-items-center">

src/client/js/components/Page/TagLabels.jsx

@@ -108,7 +108,7 @@ class TagLabels extends React.Component {
     });
 
     return (
-      <div className={`tag-viewer ${pageId ? 'existed-page' : 'new-page'}`}>
+      <div className="tag-labels">
         {tags.length === 0 && (
           <a className="btn btn-link btn-edit-tags no-tags p-0 text-muted" onClick={this.showEditor}>
             { t('Add tags for this page') } <i className="manage-tags ml-2 icon-plus"></i>

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

@@ -117,7 +117,7 @@ body.on-edit {
       }
     }
 
-    .tag-viewer.new-page {
+    .tag-labels.new-page {
       display: block;
     }
   }

src/client/styles/scss/_page.scss

@@ -25,7 +25,7 @@
     }
   }
 
-  .tag-viewer.new-page {
+  .tag-labels.new-page {
     display: none;
   }
 }

src/client/styles/scss/_tag.scss

@@ -3,29 +3,29 @@
     height: unset;
   }
 
-  .tag-viewer {
-    .manage-tags {
-      font-size: 10px;
-      cursor: pointer;
-    }
+  .list-tag-count {
+    background: rgba(0, 0, 0, 0.08);
+  }
+}
 
-    .tag-icon:not(:first-child) {
-      margin-left: 5px;
-    }
+.tag-labels {
+  .manage-tags {
+    font-size: 10px;
+    cursor: pointer;
+  }
 
-    .btn.btn-edit-tags,
-    .tag-icon {
-      font-size: 10px;
-    }
+  .tag-icon:not(:first-child) {
+    margin-left: 5px;
+  }
 
-    .tag-name {
-      margin-left: 1px;
-      font-size: 10px;
-    }
+  .btn.btn-edit-tags,
+  .tag-icon {
+    font-size: 10px;
   }
 
-  .list-tag-count {
-    background: rgba(0, 0, 0, 0.08);
+  .tag-name {
+    margin-left: 1px;
+    font-size: 10px;
   }
 }