kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-13 22:30:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding search to docs website (#2606)

Browse Source 
* Adding search to docs website

* fix eslint errors
This commit is contained in:
Alexei Malashkevich
2017-09-27 17:25:27 +03:00
parent b9d31896b7
commit a761d320db
4 changed files with 107 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/react-navigation/website/public/index.html
View File

@@ -4,9 +4,18 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<title></title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript"> docsearch({
apiKey: 'c967b4a1491b9cb486d3dca087b771e6',
indexName: 'reactnavigation',
inputSelector: '#doc-search',
debug: false
});
</script>
</html>

86
packages/react-navigation/website/src/App.css
View File

@@ -495,10 +495,94 @@ p + .example-section .phone {
margin: 80px 0;
}
@media screen and (max-width: 1100px) {
.search-wrapper {
padding-top: 10px;
margin-left: 25px;
}
input#doc-search {
font-family: inherit;
padding: 0 10px 0 10px;
height: 30px;
font-size: 16px;
line-height: 20px;
border-radius: 4px;
border: 1px #bfbfbf solid;
color: inherit;
outline: none;
width: 170px;
-moz-transition: 0.5s width ease;
-ms-transition: 0.5s width ease;
-o-transition: 0.5s width ease;
-webkit-transition: 0.5s width ease;
transition: 0.5s width ease;
}
input#doc-search:focus {
width: 200px;
}
/* Bottom border of each suggestion */
.algolia-docsearch-suggestion {
border-bottom-color: #6b52ae;
}
/* Main category headers */
.algolia-docsearch-suggestion--category-header span {
background-color: #fff;
color: #6b52ae;
font-size: 18px;
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: #6b52ae;
background-color: transparent;
}
.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
color: #6b52ae;
box-shadow: inset 0 -2px 0 0 rgba(107, 82, 174, 0.56)
}
/* Highlighted search terms */
.algolia-docsearch-suggestion--highlight {
color: #6b52ae;
}
/* Currently selected suggestion */
.aa-cursor .algolia-docsearch-suggestion--content {
color: #6b52ae;
}
.aa-cursor .algolia-docsearch-suggestion {
background: #EBEBFB;
}
/* For bigger screens, when displaying results in two columns */
@media (min-width: 768px) {
/* Bottom border of each suggestion */
.algolia-docsearch-suggestion {
border-bottom-color: #7671df;
}
/* Left column, with secondary category header */
.algolia-docsearch-suggestion--subcategory-column {
border-right-color: #7671df;
color: #4E4726;
}
}
@media screen and (max-width: 960px) {
.search-wrapper {
display: none;
}
}
@media screen and (max-width: 1100px) {
.home-container .example-section .buttonbar {
display: block;
}
.home-container .example-section .phone .false {
display: none;
}

5
packages/react-navigation/website/src/AppFrame.js vendored
View File

@@ -2,6 +2,7 @@ import React from 'react';
import Link from './Link';
import Footer from './Footer';
import DocSearchBar from './DocSearchBar';
import { addNavigationHelpers } from 'react-navigation';
const NavigationLinks = ({ navigation, className, reverse }) => {
@@ -40,12 +41,14 @@ const NavigationLinks = ({ navigation, className, reverse }) => {
class AppFrame extends React.Component {
state = { isMobileMenuOpen: false };
componentWillReceiveProps(props) {
if (this.props.navigation.state !== props.navigation.state) {
this.setState({ isMobileMenuOpen: false });
window.scrollTo(0, 0);
}
}
render() {
const { navigation, router } = this.props;
const { isMobileMenuOpen } = this.state;
@@ -77,7 +80,7 @@ class AppFrame extends React.Component {
</Link>
<NavigationLinks navigation={navigation} className="navbuttons" />
<DocSearchBar />
{hasChildNavigation && (
<span
className={`pt-icon-properties openMenuButton ${isMobileMenuOpen

9
packages/react-navigation/website/src/DocSearchBar.js vendored Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
const DocSearchBar = () => (
<div className="search-wrapper">
<input id="doc-search" type="text" placeholder="Search..." />
</div>
);
export default DocSearchBar;