From a761d320db5eedfe02588c48f15a170482d5be3f Mon Sep 17 00:00:00 2001 From: Alexei Malashkevich Date: Wed, 27 Sep 2017 17:25:27 +0300 Subject: [PATCH] Adding search to docs website (#2606) * Adding search to docs website * fix eslint errors --- .../website/public/index.html | 9 ++ packages/react-navigation/website/src/App.css | 86 ++++++++++++++++++- .../react-navigation/website/src/AppFrame.js | 5 +- .../website/src/DocSearchBar.js | 9 ++ 4 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 packages/react-navigation/website/src/DocSearchBar.js diff --git a/packages/react-navigation/website/public/index.html b/packages/react-navigation/website/public/index.html index 3543135f..8e34142d 100644 --- a/packages/react-navigation/website/public/index.html +++ b/packages/react-navigation/website/public/index.html @@ -4,9 +4,18 @@ +
+ + diff --git a/packages/react-navigation/website/src/App.css b/packages/react-navigation/website/src/App.css index 37aad7c2..3a78827e 100644 --- a/packages/react-navigation/website/src/App.css +++ b/packages/react-navigation/website/src/App.css @@ -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; } diff --git a/packages/react-navigation/website/src/AppFrame.js b/packages/react-navigation/website/src/AppFrame.js index ba319372..8df7d574 100644 --- a/packages/react-navigation/website/src/AppFrame.js +++ b/packages/react-navigation/website/src/AppFrame.js @@ -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 { - + {hasChildNavigation && ( ( +
+ +
+); + +export default DocSearchBar;