WIP: WIP: apply bootstrap theme

* navbar

lib/views/layout/layout.html

@@ -115,6 +115,7 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 
 <div id="wrapper">
   <!-- Navigation -->
+  {% block layout_head_nav %}
   <nav class="navbar navbar-default navbar-static-top m-b-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">
@@ -160,24 +161,62 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
           </a>
         </li>
         <li>
-          <form role="search" class="app-search hidden-xs">
-            <input type="text" placeholder="Search..." class="form-control">
-            <a href="">
-              <i class="fa fa-search"></i>
-            </a>
-          </form>
+          {% if searchConfigured() %}
+          <div class="navbar-form navbar-left search-top" role="search" id="search-top"></div>
+          {% endif %}
         </li>
       </ul>
 
       <ul class="nav navbar-top-links navbar-right pull-right">
+        {% if user and user.admin %}
+        <li id="">
+          <a href="/admin" id="link-mypage">
+            <i class="ti-world"></i> {{ t('Admin') }}
+          </a>
+        </li>
+        {% endif %}
+
+        {% if user %}
+        <li id="" class="dropdown">
+          <a href="#" data-target="#create-page" data-toggle="modal">
+            <i class="ti-pencil-alt"></i> {{ t('New') }}
+          </a>
+        </li>
+        <li class="dropdown">
+          <a class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" href="/user/{{ user.username }}">
+            <img src="{{ user|picture }}" class="img-circle" width="25" /> {{ user.name }}
+          </a>
+          <ul class="dropdown-menu">
+            <li><a href="/me"><i class="ti-home"></i>{{ t('Home') }}</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="/trash"><i class="ti-trash"></i>{{ t('Deleted Pages') }}</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="/logout"><i class="ti-power-off"></i>{{ t('Sign out') }}</a></li>
+          </ul>
+          <!-- /.dropdown-messages -->
+        </li>
+        {% else %}
+        <li id="login-user"><a href="/login"><i class="fa fa-user"></i> Login</a></li>
+        {% endif %}
+        {% if config.crowi['app:confidential'] && config.crowi['app:confidential'] != '' %}
+        <li class="confidential"><a href="#">{{ config.crowi['app:confidential'] }}</a></li>
+        {% endif %}
       </ul>
     </div><!-- /.navbar-header -->
   </nav>
+  {% include '../modal/create_page.html' %}
+  {% endblock  %} {# layout_head_nav #}
 
   <!-- Left navbar-header -->
   <div class="navbar-default sidebar" role="navigation">
     <div class="sidebar-nav navbar-collapse slimscrollsidebar">
       <ul class="nav" id="side-menu">
+        <li class="sidebar-search hidden-sm hidden-md hidden-lg">
+          {% if searchConfigured() %}
+          <div class="search-sidebar" role="search" id="search-sidebar"></div>
+          {% endif %}
+        </li>
+
         <li><a href="#">(TBD) Create /Sidebar</a></li>
       </ul>
     </div>
@@ -215,89 +254,6 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 
 </div><!-- /#wrapper -->
 
-{% block layout_head_nav %}
-<nav class="crowi-header navbar navbar-default" role="navigation">
-  <!-- Brand and toggle get grouped for better mobile display -->
-  <div class="navbar-header">
-    <a class="navbar-brand" href="/">
-      <img alt="Crowi" src="/images/logo/32x32.png" width="16">
-      <span class="hidden-xs">{% block title %}{{ config.crowi['app:title']|default('Crowi') }}{% endblock %}</span>
-    </a>
-  {% if searchConfigured() %}
-  <div class="navbar-form navbar-left search-top" role="search" id="search-top">
-  </div>
-  {% endif %}
-  </div>
-
-
-  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
-    <span class="sr-only">Toggle navigation</span>
-    <span class="icon-bar"></span>
-    <span class="icon-bar"></span>
-    <span class="icon-bar"></span>
-  </button>
-  <!-- Collect the nav links, forms, and other content for toggling -->
-  <div class="collapse navbar-collapse" id="navbarCollapse">
-
-    <ul class="nav navbar-nav navbar-right">
-
-      {% if user and user.admin %}
-      <li id="">
-        <a href="/admin" id="link-mypage">
-          <i class="fa fa-cube"></i> {{ t('Admin') }}
-        </a>
-      </li>
-      {% endif %}
-      {#
-      <li id="">
-        <a href="#" id="createPage">
-          <i class="fa fa-plus"> 新規</i>
-        </a>
-      </li>
-      #}
-      {% if user %}
-      {#
-      <li id="" class="notif">
-        <a href="" id="notif-opener">
-          <i class="fa fa-globe"></i> <span class="badge badge-danger">6</span>
-        </a>
-      </li>
-      #}
-      <li id="" class="dropdown">
-        <button class="btn btn-default create-page-button" data-target="#create-page" data-toggle="modal">
-          <i class="fa fa-pencil"></i> {{ t('New') }}
-        </button>
-      </li>
-      <li id="login-user">
-        <a href="/user/{{ user.username }}" id="link-mypage">
-          <img src="{{ user|picture }}" class="picture picture-rounded" width="25" /> {{ user.name }}
-        </a>
-      </li>
-      <li class="dropdown">
-        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> <label class="sr-only">メニュー</label></a>
-        <ul class="dropdown-menu">
-          <li><a href="/me"><i class="fa fa-gears"></i> {{ t('User Settings') }}</a></li>
-          <li class="divider"></li>
-          <li><a href="/trash/"><i class="fa fa-trash-o"></i> {{ t('Deleted Pages') }}</a></li>
-          <li class="divider"></li>
-          <li><a href="/logout"><i class="fa fa-sign-out"></i> {{ t('Sign out') }}</a></li>
-          {# <li><a href="#">今日の日報を作成</a></li> #}
-          {# <li class="divider"></li> #}
-          {# <li class="divider"></li> #}
-          {# <li><a href="#">ログアウト</a></li> #}
-        </ul>
-      </li>
-      {% else %}
-      <li id="login-user"><a href="/login"><i class="fa fa-user"></i> Login</a></li>
-      {% endif %}
-      {% if config.crowi['app:confidential'] && config.crowi['app:confidential'] != '' %}
-      <li class="confidential"><a href="#">{{ config.crowi['app:confidential'] }}</a></li>
-      {% endif %}
-    </ul>
-  </div><!-- /.navbar-collapse -->
-</nav>
-{% include '../modal/create_page.html' %}
-{% endblock  %} {# layout_head_nav #}
 
 <div class="container-fluid">
   <div class="row">

resource/styles/scss/_layout.scss

@@ -5,63 +5,19 @@
 
   &.main-container { // {{{
 
-    .crowi-header { // {{{
-      z-index: 1040;
-      // background: $crowiHeaderBackground;
-      // height: $crowiHeaderHeight;
-      border-radius: 0;
-      border: none;
-      margin-bottom: 0;
-
-      box-shadow: 0 3px 10px 0px rgba(0,0,0,.3);
-
-      .navbar-brand {
-        font-weight: bold;
-        img {
-          display: inline;
-          margin-right: 8px;
-        }
-      }
-      .navbar-collapse {
-        // background: $crowiHeaderBackground;
-      }
-
-      > div > .navbar-nav li button {
-        margin: 10px;
-      }
-
-      > div > a ,
-      > div > ul > li > a {
-        color: #ccc;
-        &:hover {
-          color: #aaa;
-        }
-      }
-
+    .navbar-top-links { // {{{
       .confidential {
         a {
-          border: solid 2px #f00;
-          background: #fff;
-          color: #f00;
-          font-weight: bold;
-          height: 42px;
-          margin-top: 5px;
-          padding: 10px;
-          margin-right: 5px;
+          // border: solid 2px #f00;
+          // background: #fff;
+          // color: #f00;
+          // font-weight: bold;
+          // height: 42px;
+          // margin-top: 5px;
+          // padding: 10px;
+          // margin-right: 5px;
         }
       }
-
-      .navbar-toggle {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-      .navbar-collapse.collapse.in {
-
-        .confidential {
-        }
-      }
-
     } // }}}
 
     .main {

resource/styles/scss/_search.scss

@@ -8,11 +8,9 @@
   color: #999;
 }
 .search-listpage-clear {
-  z-index: 3;
   display: none;
   position: absolute;
   right: 8px;
-  z-index: 10;
   font-size: 0.6em;
   width: 22px;
   height: 22px;
@@ -20,37 +18,51 @@
   padding: 8px;
 }
 
-.search-input-group {
-  display: inline-block;
-  margin-left: 20px;
-  margin-bottom: 0;
-  width: 200px;
-  vertical-align: bottom;
-}
-
-.search-top {
-  .search-top-input-group {
-    .search-top-clear {
+.search-top, .search-sidebar {
+  .search-input-group {
+    .search-clear {
       position: absolute;
-      right: 40px;
-      z-index: 10;
-      width: 22px;
-      height: 22px;
-      top: 7px;
-      color: #ccc;
+      z-index: 2;
+      right: 28px;
+      width: 24px;
+      height: 24px;
+      top: 3px;
+      color: #999;
       padding: 0;
     }
   }
 
+  .input-group-btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    a {
+      padding: 4px 10px;
+    }
+  }
+
   // using react-bootstrap-typeahead
   // see: https://github.com/ericgio/react-bootstrap-typeahead
+  .rbt-input.form-control {
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 40px;
+    border-top-right-radius: 40px;
+    border-bottom-right-radius: 40px;
+    padding-top: 4px;
+    height: 30px;
+
+    // focus
+    &.focus {
+      box-shadow: none;
+      border-color: #ccc;
+    }
+
+    .rbt-input-wrapper {
+      margin-left: 8px;
+    }
+  }
   .rbt-menu {
     li a span {
-      .picture {
-        width: 14px;
-        height: 14px;
-      }
-
       .page-path {
         display: inline;
         padding: 0 4px;
@@ -71,8 +83,31 @@
   .rbt-aux {
     display: none;
   }
+
 }
 
+// layout
+.search-top {
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  .rbt-input.form-control {
+    width: 180px;
+    transition: 0.3s ease-out;
+    // focus
+    &.focus {
+      width: 300px;
+    }
+  }
+}
+.search-sidebar {
+  .search-form, .form-group, .rbt-input.form-control, .input-group {
+    width: 100%;
+  }
+  .input-group-btn {
+    right: 30px;
+  }
+}
 
 .search-result {
 
@@ -129,57 +164,3 @@
     }
   }
 }
-
-// Smartphone and Tablet
-@media (max-width: $screen-xs-max) {
-  .search-top {
-    margin-top: 4px 0 0 0;
-    padding: 0;
-    border-style: none !important;
-    box-shadow: none !important;
-    -webkit-box-shadow: none !important;
-  }
-
-  .search-result {
-    .search-result-content {
-      .search-result-page {
-        .wiki {
-          h1, h2, h3, h4, h5, h6 {
-            font-size: medium;
-          }
-          height: 250px;
-          overflow: scroll;
-        }
-      }
-    }
-  }
-}
-
-.search-top .search-form {
-  @media (min-width: $screen-sm-max) {
-    // using react-bootstrap-typeahead
-    // see: https://github.com/ericgio/react-bootstrap-typeahead
-    .rbt-input input {
-      width: 500px !important;
-    }
-  }
-  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    background-color: #0f0;
-    // using react-bootstrap-typeahead
-    // see: https://github.com/ericgio/react-bootstrap-typeahead
-    .rbt-input input {
-      width: 270px !important;
-    }
-  }
-  @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
-    width: 70%;
-  }
-  @media (min-width: $screen-xs-min*2/3) and (max-width: $screen-xs-min) {
-    width: 58%;
-  }
-  @media (max-width: $screen-xs-min*2/3) {
-    width: 40%;
-    min-width: 120px;
-  }
-}
-