Merge pull request #1686 from weseek/support/BS4-navbar

Support/bs4 navbar

src/client/js/components/BookmarkButton.jsx

@@ -78,7 +78,7 @@ export default class BookmarkButton extends React.Component {
         href="#"
         title="Bookmark"
         onClick={this.handleClick}
-        className={`btn-bookmark btn btn-circle btn-outline-secondary ${addedClassName}`}
+        className={`btn btn-circle btn-outline-warning border-0 ${addedClassName}`}
       >
         <i className="icon-star"></i>
       </button>

src/client/js/components/HeaderSearchBox.jsx

@@ -66,10 +66,10 @@ class HeaderSearchBox extends React.Component {
     const isReachable = config.isSearchServiceReachable;
 
     return (
-      <div className={`form-group ${isReachable ? '' : 'has-error'}`}>
+      <div className={`form-group mb-0 ${isReachable ? '' : 'has-error'}`}>
         <div className="input-group flex-nowrap">
           <div className="input-group-prepend">
-            <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
+            <button className="btn btn-secondary dropdown-toggle py-0" type="button" data-toggle="dropdown" aria-haspopup="true">
               {scopeLabel}
             </button>
             <div className="dropdown-menu">

src/client/js/components/LikeButton.jsx

@@ -59,7 +59,7 @@ class LikeButton extends React.Component {
         href="#"
         title="Like"
         onClick={this.handleClick}
-        className={`btn-like btn btn-circle btn-outline-secondary ${addedClassName}`}
+        className={`btn btn-circle btn-outline-info border-0 ${addedClassName}`}
       >
         <i className="icon-like"></i>
       </button>

src/client/styles/scss/_layout.scss

@@ -50,6 +50,42 @@
 
   header {
     line-height: 1em;
+    // the container of h1
+    div.title-container {
+      padding-right: 5px;
+      padding-left: 5px;
+      margin-right: auto;
+    }
+
+    .btn-copy,
+    .btn-copy-link,
+    .btn-edit {
+      display: block;
+      color: $text-muted;
+      border: none;
+      opacity: 0.3;
+
+      &:not(:hover) {
+        background-color: transparent;
+      }
+      // change button opacity
+      &:hover {
+        opacity: unset;
+      }
+    }
+
+    .btn-edit-tags {
+      color: $text-muted;
+      opacity: 0.5;
+
+      &.no-tags {
+        opacity: 0.7;
+      }
+      // change button opacity
+      &:hover {
+        opacity: unset;
+      }
+    }
 
     h1 {
       @include variable-font-size(28px);
@@ -70,6 +106,18 @@
       }
     }
   }
+
+  #like-button,
+  #bookmark-button {
+    & button {
+      font-size: 1.2em;
+      line-height: 0.8em;
+
+      &:not(:hover):not(.active) {
+        background-color: transparent;
+      }
+    }
+  }
 }
 
 .main {

src/client/styles/scss/_navbar.scss

@@ -7,6 +7,11 @@
     padding: 0 1rem;
   }
 
+  .personal-dropdown > .dropdown-toggle::after {
+    // hide caret
+    content: none;
+  }
+
   .nav-link {
     &:hover {
       background: rgba(0, 0, 0, 0.1);

src/client/styles/scss/_override-bootstrap.scss

@@ -74,6 +74,10 @@ h5 {
   .dropdown-toggle.btn.disabled {
     cursor: not-allowed;
   }
+  button {
+    background: transparent;
+    border: none;
+  }
 }
 
 // agile-admin style

src/client/styles/scss/_page.scss

@@ -4,72 +4,6 @@
 .main-container {
   // padding controll of .header-wrap and .content-main are moved to _layout and _form
 
-  /*
-   * header
-   */
-  header {
-    // the container of h1
-    div.title-container {
-      padding-right: 5px;
-      padding-left: 5px;
-      margin-right: auto;
-    }
-
-    .btn-copy,
-    .btn-copy-link,
-    .btn-edit {
-      color: $text-muted;
-      border: none;
-      opacity: 0.3;
-
-      &:not(:hover) {
-        background-color: transparent;
-      }
-    }
-
-    .btn-edit-tags {
-      color: $text-muted;
-      opacity: 0.5;
-
-      &.no-tags {
-        opacity: 0.7;
-      }
-    }
-
-    // change button opacity
-    &:hover {
-      .btn.btn-copy,
-      .btn-copy-link,
-      .btn.btn-edit,
-      .btn.btn-edit-tags {
-        opacity: unset;
-      }
-    }
-  }
-
-  .btn-like,
-  .btn-bookmark {
-    font-size: 1.2em;
-    line-height: 0.8em;
-    border: none;
-
-    &:not(:hover):not(.active) {
-      background-color: transparent;
-    }
-  }
-
-  .btn-like {
-    &.active {
-      @extend .btn-info;
-    }
-  }
-
-  .btn-bookmark {
-    &.active {
-      @extend .btn-warning;
-    }
-  }
-
   .url-line {
     font-size: 1rem;
     color: #999;

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

@@ -136,6 +136,9 @@ body {
 
 .grw-navbar {
   background: $bgcolor-navbar;
+  .nav-item > .nav-link {
+    color: white;
+  }
 }
 
 .grw-title-bar {

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

@@ -8,7 +8,7 @@
         </a>
       </div><!-- /.title-logo-container -->
 
-      <div class="title-container">
+      <div class="title-container mr-auto">
         <h1 class="title" id="revision-path"></h1>
         {% if not forbidden and not isTrashPage() %}
           <div id="tag-label"></div>

src/server/views/layout/layout.html

@@ -126,16 +126,6 @@
           {% endif %}
         </li>
       </ul>
-
-      <ul class="nav navbar-top-links navbar-right pull-right">
-        {% if user and user.admin %}
-        <li class="nav-item-admin">
-          <a href="/admin">
-            <i class="icon-settings"></i><span>{{ t('Admin') }}</span>
-          </a>
-        </li>
-        {% endif %}
-      </form>
     </ul>
 
     <!-- 5 user action -->
@@ -158,10 +148,10 @@
       </li>
       <li class="nav-item">
         <a class="nav-link" href="https://docs.growi.org/" target="_blank">
-          <i class="icon-question"></i><span class="d-none d-md-inline-block">{{ t('Help') }}</span><span class="text-muted small"><i class="icon-share-alt"></i></span>
+          <i class="icon-question mr-2"></i><span class="d-none d-md-inline-block mr-2">{{ t('Help') }}</span><span class="text-muted small"><i class="icon-share-alt"></i></span>
         </a>
       </li>
-      <li class="nav-item dropdown">
+      <li class="nav-item dropdown personal-dropdown">
         <a class="btn nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown">
           <img src="{{ user|picture }}" class="picture rounded-circle" width="25" />
           <span class="user-name text-wrap ml-2">{{ user.name }}</span>
@@ -195,6 +185,7 @@
 
   {% block sidebar %}
   <!-- Left navbar-header -->
+  {#
   <div class="navbar-default sidebar hidden-print" role="navigation">
     <div class="sidebar-nav navbar-collapse slimscrollsidebar">
       <ul class="nav" id="side-menu">
@@ -208,6 +199,7 @@
       </ul>
     </div>
   </div>
+  #}
   <!-- Left navbar-header end -->
   {% endblock %}