Commit f3afc915 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Search bar moved to navbar.

parent 53f99deb
Pipeline #1881 passed with stage
in 1 minute and 42 seconds
...@@ -5,6 +5,7 @@ import Typography from 'material-ui/Typography'; ...@@ -5,6 +5,7 @@ import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button'; import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu'; import MenuIcon from 'material-ui-icons/Menu';
import SearchBar from '../containers/SearchBar';
import classNames from 'classnames' import classNames from 'classnames'
class CustomAppBar extends React.Component { class CustomAppBar extends React.Component {
...@@ -36,6 +37,7 @@ class CustomAppBar extends React.Component { ...@@ -36,6 +37,7 @@ class CustomAppBar extends React.Component {
className={classNames('app-bar-menu-button', 'app-bar-text-color')}> className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
<MenuIcon/> <MenuIcon/>
</IconButton> </IconButton>
<SearchBar />
<div <div
className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}> className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
<Button <Button
......
...@@ -46,7 +46,6 @@ class Layout extends React.Component { ...@@ -46,7 +46,6 @@ class Layout extends React.Component {
}}/> }}/>
<div className={'layout-container'}> <div className={'layout-container'}>
<div className={'layout-main-content'}> <div className={'layout-main-content'}>
<SearchBar suggestions={{}}/>
<div className={'layout-card-container'}> <div className={'layout-card-container'}>
<CardContainer styles={'layout-card-container'} searchTerm={searchTerm} <CardContainer styles={'layout-card-container'} searchTerm={searchTerm}
facilities={facilities} /> facilities={facilities} />
......
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import Paper from 'material-ui/Paper';
import {withStyles} from 'material-ui/styles';
import {compose} from 'redux';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {setSearchTerm} from '../actions/ui'; import {setSearchTerm} from '../actions/ui';
import Search from 'material-ui-icons/Search' import SearchIcon from 'material-ui-icons/Search'
import Input from 'material-ui/Input'; import Input from 'material-ui/Input';
import Paper from 'material-ui/Paper';
import classNames from 'classnames';
class SearchBar extends React.Component { class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
isFocused: false,
value: ''
};
}
handleChange = (e) => { handleChange = (e) => {
this.setState({ this.setState({
value: e.target.value, value: e.target.value,
...@@ -16,23 +24,36 @@ class SearchBar extends React.Component { ...@@ -16,23 +24,36 @@ class SearchBar extends React.Component {
this.props.setSearchTerm(e.target.value) this.props.setSearchTerm(e.target.value)
}; };
handleFocus = () => {
this.setState({
isFocused: true
});
};
handleBlur = () => {
this.setState({
isFocused: false
});
};
render() { render() {
return ( return (
<Paper className={'search-bar-paper-background'} elevation={3}> <Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus')}>
<div className={'search-bar-left-search-container'}>
<SearchIcon className={'search-bar-search-icon'}/>
</div>
<Input <Input
placeholder="names, locations, etc" placeholder="Names, Locations, etc."
disableUnderline
fullWidth
autoFocus autoFocus
className={'search-bar-no-suggest-input'} disableUnderline
className={'search-bar-input'}
onChange={this.handleChange} onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
inputProps={{ inputProps={{
'aria-label': 'Description', 'aria-label': 'Search Bar',
}} }}
/> />
<div className={'search-bar-right-search-container'}>
<Search className={'search-bar-search-icon'}/>
</div>
</Paper> </Paper>
); );
} }
......
.search-bar-paper-background { .search-bar-paper-background {
height: 54px; height: 44px;
max-width: 600px; width: 400px;
width: 90%;
display: flex; display: flex;
margin: 0 auto 16px auto; border-radius: 4px !important;
background-color: rgba(0, 0, 0, 0.04) !important;
box-shadow: none !important;
&.search-bar-focus {
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
}
} }
.search-bar-right-search-container { .search-bar-left-search-container {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -18,8 +24,9 @@ ...@@ -18,8 +24,9 @@
color: rgba(0,0,0,0.54); color: rgba(0,0,0,0.54);
} }
.search-bar-no-suggest-input { .search-bar-input {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
margin-left: 8px !important; transition: ease-in-out width 250ms;
width: 100%
} }
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment