navbar modification toward search bar

src/client/js/components/HeaderSearchBox.jsx

@@ -68,7 +68,7 @@ class HeaderSearchBox extends React.Component {
     return (
       <FormGroup>
         <InputGroup>
-          <InputGroup.Button className="btn-group-dropdown-scope">
+          <InputGroup.Button className="btn-group-dropdown-scope" data-toggle="dropdown">
             <DropdownButton id="dbScope" title={scopeLabel}>
               <MenuItem onClick={this.onClickAllPages}>All pages</MenuItem>
               <MenuItem onClick={this.onClickChildren}>{ t('header_search_box.item_label.This tree') }</MenuItem>

src/client/js/components/SearchForm.jsx

@@ -44,44 +44,44 @@ class SearchForm extends React.Component {
     const t = this.props.t;
 
     return (
-      <table className="table m-1 search-help">
-        <caption className="text-left text-primary p-2 mb-2">
-          <h5 className="m-1"><i className="icon-magnifier pr-2 mb-2" />{ t('search_help.title') }</h5>
+      <table className="table grw-search-table search-help m-0">
+        <caption className="text-left text-success p-2">
+          <h5><i className="icon-magnifier pr-2 mb-2" />{ t('search_help.title') }</h5>
         </caption>
         <tbody>
           <tr>
-            <th className="text-right pt-2">
+            <th className="text-right py-2">
               <code>word1</code> <code>word2</code><br></br>
               <small>({ t('search_help.and.syntax help') })</small>
             </th>
-            <td><h6 className="m-0 pt-1">{ t('search_help.and.desc', { word1: 'word1', word2: 'word2' }) }</h6></td>
+            <td className="align-middle"><h6 className="m-0">{ t('search_help.and.desc', { word1: 'word1', word2: 'word2' }) }</h6></td>
           </tr>
           <tr>
-            <th className="text-right pt-2">
+            <th className="text-right py-2">
               <code>&quot;This is GROWI&quot;</code><br></br>
               <small>({ t('search_help.phrase.syntax help') })</small>
             </th>
-            <td><h6 className="m-0 pt-1">{ t('search_help.phrase.desc', { phrase: 'This is GROWI' }) }</h6></td>
+            <td className="align-middle"><h6 className="m-0">{ t('search_help.phrase.desc', { phrase: 'This is GROWI' }) }</h6></td>
           </tr>
           <tr>
-            <th className="text-right pt-2"><code>-keyword</code></th>
-            <td><h6 className="m-0 pt-1">{ t('search_help.exclude.desc', { word: 'keyword' }) }</h6></td>
+            <th className="text-right py-2"><code>-keyword</code></th>
+            <td className="align-middle"><h6 className="m-0">{ t('search_help.exclude.desc', { word: 'keyword' }) }</h6></td>
           </tr>
           <tr>
-            <th className="text-right pt-2"><code>prefix:/user/</code></th>
-            <td><h6 className="m-0 pt-1">{ t('search_help.prefix.desc', { path: '/user/' }) }</h6></td>
+            <th className="text-right py-2"><code>prefix:/user/</code></th>
+            <td className="align-middle"><h6 className="m-0">{ t('search_help.prefix.desc', { path: '/user/' }) }</h6></td>
           </tr>
           <tr>
-            <th className="text-right pt-2"><code>-prefix:/user/</code></th>
-            <td><h6 className="m-0 pt-1">{ t('search_help.exclude_prefix.desc', { path: '/user/' }) }</h6></td>
+            <th className="text-right py-2"><code>-prefix:/user/</code></th>
+            <td className="align-middle"><h6 className="m-0">{ t('search_help.exclude_prefix.desc', { path: '/user/' }) }</h6></td>
           </tr>
           <tr>
-            <th className="text-right pt-2"><code>tag:wiki</code></th>
-            <td><h6 className="m-0 pt-1">{ t('search_help.tag.desc', { tag: 'wiki' }) }</h6></td>
+            <th className="text-right py-2"><code>tag:wiki</code></th>
+            <td className="align-middle"><h6 className="m-0">{ t('search_help.tag.desc', { tag: 'wiki' }) }</h6></td>
           </tr>
           <tr>
             <th className="text-right pt-2"><code>-tag:wiki</code></th>
-            <td><h6 className="m-0 pt-1">{ t('search_help.exclude_tag.desc', { tag: 'wiki' }) }</h6></td>
+            <td className="align-middle"><h6 className="m-0">{ t('search_help.exclude_tag.desc', { tag: 'wiki' }) }</h6></td>
           </tr>
         </tbody>
       </table>

src/client/styles/scss/_layout.scss

@@ -1,3 +1,5 @@
+@import 'layout_variable';
+
 .main-container {
   h1,
   h2,
@@ -176,3 +178,44 @@ $nav-main-left-tab-width: 95px;
     }
   }
 }
+
+// dropdown menu for search
+.dropdown-menu {
+  .btn-group-dropdown-scope & {
+    position: absolute;
+    top: 43px;
+    left: -112px;
+    width: 209px;
+    padding: 0.25em 0.25em 0.25em 1.75em;
+    font-size: 13px;
+    font-weight: 900;
+    line-height: 2.75;
+    background: $grw-white-green;
+    border-radius: 3px;
+    a {
+      color: #333;
+    }
+    li {
+      list-style-type: disc;
+    }
+  }
+}
+
+.dropdown-menu {
+  .search-typeahead & {
+    position: absolute !important;
+    top: 14px !important;
+    left: 0 !important;
+    margin: 0 !important;
+  }
+}
+
+.grw-search-table {
+  caption {
+    display: table-header-group;
+  }
+  code {
+    padding: 0.25em;
+    background: aliceblue;
+  }
+}

src/client/styles/scss/_layout_variable.scss

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