Merge pull request #876 from nwind/master

tweak: 优化搜索结果样式

examples/components/App.tsx

@@ -281,9 +281,10 @@ export class App extends React.PureComponent {
               }}
             />
           </div>
-        </div>
-        <div className={`${theme.ns}Layout-searchBar hidden-xs hidden-sm`}>
-          <DocSearch theme={this.state.theme.value} />
+
+          <div className="hidden-xs p-t pull-right">
+            <DocSearch theme={this.state.theme.value} />
+          </div>
         </div>
 
         <a

examples/components/DocSearch.jsx

@@ -68,18 +68,20 @@ export default class DocSearch extends React.Component {
   render() {
     const searchResults = this.state.searchResults;
     return (
-      <div className="p-l p-t">
+      <div className="p-r">
         <SearchBox onSearch={this.onSearch} onCancel={this.onSearchCancel} />
-        <div className="search-result">
-          {searchResults.map(item => {
-            return (
-              <a href={'/' + item.path} key={`list_${item.path}`}>
-                <h5>{item.title}</h5>
-                <p dangerouslySetInnerHTML={{__html: item.abstract}} />
-              </a>
-            );
-          })}
-        </div>
+        {searchResults.length > 0 ? (
+          <div className="search-result">
+            {searchResults.map(item => {
+              return (
+                <a href={'/' + item.path} key={`list_${item.path}`}>
+                  <h5>{item.title}</h5>
+                  <p dangerouslySetInnerHTML={{__html: item.abstract}} />
+                </a>
+              );
+            })}
+          </div>
+        ) : null}
       </div>
     );
   }

examples/style.scss

@@ -714,11 +714,19 @@ a {
 
 .search-result {
   background-color: #fff;
-  top: 45px;
+  top: 50px;
   bottom: 0;
   position: fixed;
   overflow-y: scroll;
   overflow-x: hidden;
+  box-shadow: 0px 2px 7px #888888;
+  a {
+    padding: 0 5px;
+    display: block;
+  }
+  a:hover {
+    background-color: $gray200;
+  }
 }
 
 .dark {