Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[www] add search input to home page #3662

Merged
merged 5 commits into from
Feb 2, 2018
Merged

[www] add search input to home page #3662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
965cb78
Experiment adding search input to home page
m-allanson Jan 23, 2018
5025f3a
Prettier
m-allanson Jan 23, 2018
14279a8
Comment unused imports
m-allanson Jan 23, 2018
c1b25ba
Display social icons when viewport is wide enough
m-allanson Feb 1, 2018
5b2c50b
Use alternate colours at Hd breakpoint on home page
m-allanson Feb 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 34 additions & 24 deletions www/src/components/navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from "react"
import Link from "gatsby-link"
import GithubIcon from "react-icons/lib/go/mark-github"
import TwitterIcon from "react-icons/lib/fa/twitter"

import SearchForm from "../components/search-form"
import DiscordIcon from "../components/discord"
import GithubIcon from "react-icons/lib/go/mark-github"
import SearchForm from "../components/search-form"
import logo from "../logo.svg"
import typography, { rhythm, scale } from "../utils/typography"
import presets, { colors } from "../utils/presets"
Expand Down Expand Up @@ -163,9 +162,11 @@ export default ({ pathname }) => {
marginLeft: `auto`,
}}
>
{!isHomepage && (
<SearchForm key="SearchForm" styles={{ ...navItemStyles }} />
)}
<SearchForm
key="SearchForm"
iconStyles={{ ...socialIconsStyles }}
isHomepage={isHomepage}
/>
<a
href="https://github.com/gatsbyjs/gatsby"
title="GitHub"
Expand All @@ -176,27 +177,36 @@ export default ({ pathname }) => {
>
<GithubIcon style={{ verticalAlign: `text-top` }} />
</a>
<a
href="https://discord.gg/0ZcbPKXt5bZjGY5n"
title="Discord"
css={{
...navItemStyles,
...socialIconsStyles,
}}
>
<DiscordIcon overrideCSS={{ verticalAlign: `text-top` }} />
</a>
<a
href="https://twitter.com/gatsbyjs"
title="@gatsbyjs"

<div
css={{
...navItemStyles,
...socialIconsStyles,
paddingRight: 0,
display: `none`,
[presets.Desktop]: { display: !isHomepage && `inline-block` },
[presets.Hd]: { display: `inline-block` },
}}
>
<TwitterIcon style={{ verticalAlign: `text-top` }} />
</a>
<a
href="https://discord.gg/0ZcbPKXt5bZjGY5n"
title="Discord"
css={{
...navItemStyles,
...socialIconsStyles,
}}
>
<DiscordIcon overrideCSS={{ verticalAlign: `text-top` }} />
</a>
<a
href="https://twitter.com/gatsbyjs"
title="@gatsbyjs"
css={{
...navItemStyles,
...socialIconsStyles,
paddingRight: 0,
}}
>
<TwitterIcon style={{ verticalAlign: `text-top` }} />
</a>
</div>
</div>
</div>
</div>
Expand Down
121 changes: 78 additions & 43 deletions www/src/components/search-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@ import React, { Component } from "react"
import PropTypes from "prop-types"
import { navigateTo } from "gatsby-link"
import { rhythm } from "../utils/typography"

import presets, { colors } from "../utils/presets"
import hex2rgba from "hex2rgba"
import SearchIcon from './search-icon'

import { css } from "glamor"

const { curveDefault, speedDefault } = presets.animation

// Override default search result styles (docsearch.css)
css.insert(`
.algolia-autocomplete .ds-dropdown-menu {
Expand Down Expand Up @@ -227,7 +231,7 @@ css.insert(`
class SearchForm extends Component {
constructor() {
super()
this.state = { enabled: true }
this.state = { enabled: true, focussed: false }
this.autocompleteSelected = this.autocompleteSelected.bind(this)
this.focusSearchInput = this.focusSearchInput.bind(this)
}
Expand Down Expand Up @@ -293,12 +297,12 @@ class SearchForm extends Component {
}

render() {
const { enabled } = this.state
const { styles } = this.props.styles
const { enabled, focussed } = this.state
const { iconStyles, isHomepage } = this.props

return enabled ? (
<form
css={{
...styles,
display: `flex`,
flex: `0 0 auto`,
flexDirection: `row`,
Expand All @@ -309,52 +313,83 @@ class SearchForm extends Component {
className="searchWrap"
onSubmit={e => e.preventDefault()}
>
<input
id="doc-search"
css={{
appearance: `none`,
background: `transparent`,
border: 0,
color: colors.gatsby,
paddingTop: rhythm(1 / 8),
paddingRight: rhythm(1 / 4),
paddingBottom: rhythm(1 / 8),
paddingLeft: rhythm(1),
backgroundImage: `url(/search.svg)`,
backgroundSize: `16px 16px`,
backgroundRepeat: `no-repeat`,
backgroundPositionY: `center`,
backgroundPositionX: `5px`,
overflow: `hidden`,
width: rhythm(1),
transition: `width 0.2s ease`,

":focus": {
outline: 0,
backgroundColor: colors.ui.light,
<label css={{ position: `relative` }}>
<input
id="doc-search"
css={{
appearance: `none`,
backgroundColor: `transparent`,
border: 0,
borderRadius: presets.radiusLg,
width: rhythm(5),
},

[presets.Desktop]: {
width: rhythm(5),
},
}}
type="search"
placeholder="Search docs"
aria-label="Search docs"
title="Hit 's' to search docs"
ref={input => {
this.searchInput = input
}}
/>
color: colors.gatsby,
paddingTop: rhythm(1 / 8),
paddingRight: rhythm(1 / 4),
paddingBottom: rhythm(1 / 8),
paddingLeft: rhythm(1),
overflow: `hidden`,
width: rhythm(1),
transition: `width ${speedDefault} ${curveDefault}, background-color ${speedDefault} ${curveDefault}`,
":focus": {
outline: 0,
backgroundColor: colors.ui.light,
borderRadius: presets.radiusLg,
width: rhythm(5),
transition: `width ${speedDefault} ${curveDefault}, background-color ${speedDefault} ${curveDefault}`,
},

[presets.Desktop]: {
backgroundColor: !isHomepage && `#fff`,
color: colors.gatsby,
width: !isHomepage && rhythm(5),
":focus": {
backgroundColor: colors.ui.light,
color: colors.gatsby,
},
},

[presets.Hd]: {
backgroundColor: isHomepage && colors.lilac,
color: isHomepage && colors.ui.light,
width: isHomepage && rhythm(5),
},
}}
type="search"
placeholder="Search docs"
aria-label="Search docs"
title="Hit 's' to search docs"
onFocus={() => this.setState({ focussed: true })}
onBlur={() => this.setState({ focussed: false })}
ref={input => {
this.searchInput = input
}}
/>
<SearchIcon
overrideCSS={{
...iconStyles,
fill: focussed && colors.gatsby,
position: `absolute`,
left: `5px`,
top: `50%`,
width: `16px`,
height: `16px`,
pointerEvents: `none`,
transition: `fill ${speedDefault} ${curveDefault}`,
transform: `translateY(-50%)`,

[presets.Hd]: {
fill: focussed && isHomepage && colors.gatsby,
},
}}
/>
</label>
</form>
) : null
}
}

SearchForm.propTypes = {
styles: PropTypes.object,
isHomepage: PropTypes.bool,
iconStyles: PropTypes.object,
}

export default SearchForm
22 changes: 22 additions & 0 deletions www/src/components/search-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react"
import PropTypes from "prop-types"

const SearchIcon = ({ overrideCSS }) => (
<svg
viewBox="0 0 40 40"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
css={{ ...overrideCSS }}
>
{/* Based on the 'search' icon in https://github.com/ionic-team/ionicons */}
<g>
<path d="m34.8 30.2c0.3 0.3 0.3 0.8 0 1.1l-3.4 3.5c-0.1 0.1-0.4 0.2-0.6 0.2s-0.4-0.1-0.6-0.2l-6.5-6.8c-2 1.2-4.1 1.8-6.3 1.8-6.8 0-12.4-5.5-12.4-12.4s5.6-12.4 12.4-12.4 12.4 5.5 12.4 12.4c0 2.1-0.6 4.2-1.7 6.1z m-17.4-20.4c-4.1 0-7.6 3.4-7.6 7.6s3.5 7.6 7.6 7.6 7.5-3.4 7.5-7.6-3.3-7.6-7.5-7.6z" />
</g>
</svg>
)

SearchIcon.propTypes = {
overrideCSS: PropTypes.object,
}

export default SearchIcon
1 change: 0 additions & 1 deletion www/static/search.svg
View file
Open in desktop

This file was deleted.