Merge pull request #739 from shaminmeerankutty/improvement/search-input

Making search input affix

src/client/js/components/SearchPage.js

@@ -91,11 +91,12 @@ export default class SearchPage extends React.Component {
   render() {
     return (
       <div>
-        <SearchForm
-          onSearchFormChanged={this.search}
-          keyword={this.state.searchingKeyword}
-          />
-
+        <div className="search-page-input">
+          <SearchForm
+            onSearchFormChanged={this.search}
+            keyword={this.state.searchingKeyword}
+            />
+        </div>
         <SearchResult
           crowi={this.props.crowi} crowiRenderer={this.props.crowiRenderer}
           pages={this.state.searchedPages}

src/client/js/components/SearchPage/SearchResult.js

@@ -251,7 +251,7 @@ export default class SearchResult extends React.Component {
 
     // TODO あとでなんとかする
     setTimeout(() => {
-      $('#search-result-list > nav').affix({ offset: { top: 120 }});
+      $('#search-result-list > nav').affix({ offset: { top: 50 }});
     }, 1200);
 
     /*
@@ -262,7 +262,7 @@ export default class SearchResult extends React.Component {
       <div className="content-main">
         <div className="search-result row" id="search-result">
           <div className="col-md-4 hidden-xs hidden-sm page-list search-result-list" id="search-result-list">
-            <nav data-spy="affix" data-offset-top="120">
+            <nav data-spy="affix" data-offset-top="50">
               <div className="pull-right">
                 {deletionModeButtons}
                 {allSelectCheck}

src/client/styles/scss/_search.scss

@@ -114,7 +114,7 @@
     nav {
       padding-right: 0;
       &.affix {
-        top: 8px;
+        top: 58px;
         width: 33%;
         padding-right: 5px;
         padding-bottom: 50px;
@@ -164,3 +164,19 @@
     }
   }
 }
+
+.search-page-input{
+  padding: 10px 0;
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  .form{
+    margin: 0;
+    .input-group .form-control{
+      height: 100%;
+    }
+    .input-group-btn .btn{
+      height: 34px;
+    }
+  }
+}