Merge pull request #1203 from weseek/support/apply-botstrap4-child

GW-227 navbar を公式準拠コードに：Support/apply botstrap4 child

src/client/styles/scss/_layout.scss

@@ -9,6 +9,8 @@
   }
 
   .navbar-top-links {
+    height: 30px;
+    border-radius: 40px;
     .confidential {
       a {
         font-weight: bold;
@@ -164,3 +166,13 @@ $nav-main-left-tab-width: 95px;
     margin-left: 0.5em;
   }
 }
+
+// GROWI brand logo
+.logo {
+  .logo-mark {
+    &._white {
+      color: white;
+      fill: white !important;
+    }
+  }
+}

src/client/styles/scss/_layout_variable.scss

@@ -0,0 +1,17 @@
+/* color variables */
+
+$grw-base-green: rgb(7, 146, 72);
+$grw-mos-green: rgb(5, 70, 35);
+$grw-light-green: rgb(204, 238, 220);
+
+.bg-grw-green {
+  background: $grw-base-green;
+}
+
+.bg-grw-mos-green {
+  background: $grw-mos-green;
+}
+
+.bg-grw-light-green {
+  background: $grw-light-green;
+}

src/client/styles/scss/_search.scss

@@ -100,9 +100,6 @@
 
 // layout
 .search-top {
-  margin-top: 10px;
-  margin-bottom: 10px;
-
   .rbt-input.form-control {
     width: 200px;
     transition: 0.3s ease-out;

src/client/styles/scss/style-app.scss

@@ -28,6 +28,7 @@
 @import 'layout_crowi_sidebar';
 @import 'layout_growi';
 @import 'layout_kibela';
+@import 'layout_variable';
 @import 'login';
 @import 'notification';
 @import 'on-edit';

src/server/views/layout/layout.html

@@ -75,70 +75,69 @@
 <div id="wrapper">
   <!-- Navigation -->
   {% block layout_head_nav %}
-  <nav class="navbar navbar-default navbar-static-top mb-0">
-    <div class="navbar-header">
-      <a class="navbar-toggle hidden-sm hidden-md hidden-lg " href="javascript:void(0)" data-toggle="collapse" data-target=".navbar-collapse">
-        <i class="ti-menu"></i>
+  <nav class="navbar navbar-default bg-grw-green mb-0 p-0">
+    <div class="navbar-header d-flex w-100">
+
+      <!--1 GROWI logo-->
+      <a class="logo d-block top-left-part bg-grw-mos-green my-auto px-3" href="/">
+        <div class="logo-mark _white d-inline-block py-3">{% include '../widget/logo.html' %}</div>
+        <span class="logo-text mx-3 text-white">
+          {% set appTitle = appService.getAppTitle() %}
+          {% set appTitleFontSize = getAppTitleFontSize(appTitle) %}
+          <text x="0" y="{{22+appTitleFontSize/2}}" font-size="{{appTitleFontSize}}">
+            {% block title %}{{ appTitle }}{% endblock %}
+          </text>
+        </span>
       </a>
-      <div class="top-left-part">
-        <a class="logo" href="/">
-          <b>
-            <div class="logo-mark">{% include '../widget/logo.html' %}</div>
-          </b>
-          <span class="hidden-xs" style="color: black">
-            {% set appTitle = appService.getAppTitle() %}
-            {% set appTitleFontSize = getAppTitleFontSize(appTitle) %}
-            <span class="logo-text">
-              <svg xmlns="http://www.w3.org/2000/svg">
-                <text x="0" y="{{22+appTitleFontSize/2}}" font-size="{{appTitleFontSize}}">
-                  {% block title %}{{ appTitle }}{% endblock %}
-                </text>
-              </svg>
-            </span>
-          </span>
-        </a>
-      </div>
-
-      <ul class="nav navbar-top-links navbar-left hidden-xs">
-        <li>
-          <a class="open-close hidden-xs waves-effect waves-light">
-            <i class="ti-menu"></i>
-          </a>
-        </li>
+
+      <!--2 side nav open-->
+      <a class="open-close d-none d-md-block mx-3 my-auto waves-effect waves-light">
+        <i class="ti-menu text-white"></i>
+      </a>
+
+      <!--3 mobile menu touch icon-->
+      <a class="navbar-toggle d-md-none my-auto mx-3" href="javascript:void(0)" data-toggle="collapse" data-target=".navbar-collapse">
+        <i class="ti-menu text-white"></i>
+      </a>
+
+      <!--4 search nav-->
+      <ul class="nav navbar-top-links d-none d-md-block bg-grw-light-green my-auto">
         {#  disabled temporary -- 2019.05.13 Yuki Takei
-        <li>
-          <li class="nav-item-admin">
-            <a href="/tags">
-              <i class="tag-icon icon-tag"></i><span>{{ t('Tags') }}</span>
-            </a>
-          </li>
+        <li class="nav-item-admin">
+          <a href="/tags">
+            <i class="tag-icon icon-tag"></i><span>{{ t('Tags') }}</span>
+          </a>
         </li>
         #}
         <li>
           {% if searchConfigured() %}
-          <div class="navbar-form navbar-left search-top" role="search" id="search-top"></div>
+          <span class="navbar-form search-top" role="search" id="search-top"></span>
           {% endif %}
         </li>
       </ul>
 
-      <ul class="nav navbar-top-links navbar-right pull-right">
+      <!--5 user action-->
+      <ul class="nav navbar-top-links flex-nowrap ml-auto my-auto">
         {% if user and user.admin %}
-        <li class="nav-item-admin">
-          <a href="/admin">
-            <i class="icon-settings"></i><span>{{ t('Admin') }}</span>
+        <li class="nav-item-admin mr-3">
+          <a class="text-white" href="/admin">
+            <i class="icon-settings mr-2"></i>
+            <span class="d-none d-md-inline-block">{{ t('Admin') }}</span>
           </a>
         </li>
         {% endif %}
 
         {% if user %}
-        <li class="nav-item-create-page">
-          <a href="#" data-target="#create-page" data-toggle="modal" class="d-none d-sm-block ml-1">
-            <i class="icon-pencil"></i><span>{{ t('New') }}</span>
+        <li class="nav-item-create-page mr-3">
+          <a class="text-white" href="#" data-target="#create-page" data-toggle="modal">
+            <i class="icon-pencil mr-2"></i>
+            <span class="d-none d-md-inline-block">{{ t('New') }}</span>
           </a>
         </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown">
-            <img src="{{ user|picture }}" class="picture img-circle" width="25" /> <span class="user-name">{{ user.name }}</span>
+        <li class="dropdown mr-3">
+          <a class="dropdown-toggle waves-effect waves-light text-white" data-toggle="dropdown">
+            <img src="{{ user|picture }}" class="picture rounded-circle" width="25" />
+            <span class="user-name text-wrap ml-2">{{ user.name }}</span>
           </a>
           <ul class="dropdown-menu dropdown-menu-right">
             <li><a href="/user/{{ user.username }}"><i class="icon-fw icon-home"></i>{{ t('Home') }}</a></li>
@@ -158,6 +157,7 @@
         <li class="confidential"><a href="#">{{ getConfig('crowi', 'app:confidential') }}</a></li>
         {% endif %}
       </ul>
+
     </div><!-- /.navbar-header -->
   </nav>
   {% include '../modal/create_page.html' %}
@@ -168,7 +168,9 @@
 
   {% block sidebar %}
   <!-- Left navbar-header -->
-  <div class="navbar-default sidebar hidden-print" role="navigation">
+  <div class="navbar-default sidebar d-print-none" role="navigation">
+
+    <!--6 mobile drop down area-->
     <div class="sidebar-nav navbar-collapse slimscrollsidebar">
       <ul class="nav" id="side-menu">
         <li class="sidebar-search hidden-sm hidden-md hidden-lg">
@@ -180,6 +182,8 @@
         <li class="tbd"><a href="#">(TBD) Create /Sidebar</a></li>
       </ul>
     </div>
+
+
   </div>
   <!-- Left navbar-header end -->
   {% endblock %}